Shapes Reference
Complete reference for 55+ shape types including process shapes, container shapes, interactive data visualisation, structural/decorative, and infographic shapes.
The diagram editor provides 55+ shape types organised into process shapes, container shapes, interactive data visualisation shapes, structural/decorative shapes, infographic shapes, and media shapes.
Process Shapes
Standard flowchart and process diagram shapes.
| Shape | Description | Use Case |
|---|---|---|
| process | Standard rectangle | Processes and activities |
| connector | Circle connector | Flow connections |
| terminator | Rounded terminator | Start and end points |
| decision | Diamond shape | Decision points and branches |
| delay | D-shaped indicator | Wait or delay states |
| document | Curved bottom rectangle | Single document |
| documents | Stacked documents | Multiple documents |
| input-output | Parallelogram | I/O operations |
| data-input | Specialised input shape | Data entry |
| data-output | Specialised output shape | Data output |
| off-page-connector | Pentagon | Off-page connections |
| database | Cylinder | Databases and storage |
| text | Text without border | Labels and annotations |
| sticky-note | Note shape | Comments and notes |
Container Shapes
Simple shapes for grouping and visual organisation.
| Shape | Description |
|---|---|
| rectangle | Basic rectangle |
| circle | Circle |
| pill | Rounded pill shape |
| diamond | Diamond |
| hexagon | Hexagon |
| parallelogram | Parallelogram |
| trapezoid | Trapezoid |
| cloud | Cloud shape for external services |
| bracket | Bracket shape |
| octagon | Octagon |
| ellipse | Ellipse |
| triangle | Equilateral triangle |
| rightTriangle | Right-angle triangle |
| pentagon | Pentagon |
| cross | Cross/plus shape |
| star | Five-point star |
Specialised Container Shapes
Media Shapes
| Shape | Formats | Notes |
|---|---|---|
| image | PNG, JPG | Raster images at original resolution |
| svg-image | SVG | Vector images with optional colour tinting |
Data Visualisation Shapes
Chart and data display shapes with interactive controls for values, segments, and colours. All shapes adapt to light/dark theme.
| Shape | Description | Key Properties |
|---|---|---|
| pie-chart | Pie chart with configurable segments | Segments with start/end angles and colours, inner radius (0 for pie, >0 for donut) |
| ring-segment | Arc segment of a ring | Start/end angle, inner radius, fill colour |
| gauge | Gauge meter with needle | Value (0–1), colour zones, needle colour, arc width |
| progress-ring | Circular progress indicator | Value (0–1), track and fill colours, ring width |
| bar-chart | Vertical bar chart | Bars with values and colours, bar spacing |
| radar-chart | Spider/radar chart | Axes with labels and values, fill colour and opacity, grid levels |
| treemap | Proportional area treemap | Cells with values and colours, gap between cells |
| heatmap-grid | Grid heatmap with colour gradients | Rows, columns, value array, low/high colours |
| sparkline | Compact line chart | Values array, line colour/width, fill below option, show dots |
| bubble-chart | Scatter plot with sized bubbles | Bubbles with x, y, size, colour; fill opacity |
| stacked-bar | Stacked bar chart | Stacks with coloured segments, bar spacing |
| sankey | Flow diagram between two columns | Left/right nodes, flows with from/to indices and values |
| timeline | Gantt-style timeline | Items with start, end, row, colour; number of rows |
Structural / Decorative Shapes
Geometric and decorative shapes with interactive style controls.
| Shape | Description | Key Properties |
|---|---|---|
| polygon | Custom polygon with draggable vertices | Vertices in normalised 0–1 space, fill/stroke colours |
| funnel | Funnel chart with stages | Stages with width fractions and colours |
| speech-bubble | Speech bubble with tail | Tail position and width, corner radius |
| cylinder | 3D cylinder | Ellipse depth, fill colour |
| wave | Wavy shape with control points | Top/bottom control point arrays, fill colour |
| bracket | Brace/bracket shape | Direction (left/right/top/bottom), midpoint, curvature |
| chevron | Chevron/arrow shape | Tip angle, direction, fill colour |
| shield | Shield/badge shape | Pointedness, fill colour |
| ribbon | Decorative ribbon | Fold depth, end style (pointed/rounded/flat) |
| callout | Callout annotation box | Pointer and target positions, corner radius, fill colour |
| gear | Gear/cog shape | Number of teeth, inner radius ratio, tooth depth |
| spiral | Spiral path | Number of turns, line width, direction (clockwise/counter) |
| tab | Tab/folder shape | Tab width, height, position (left/center/right), corner radius |
| puzzle-piece | Jigsaw puzzle piece | Tab toggles for top, right, bottom, left edges |
| torus | Ring/donut shape | Inner radius ratio, fill colour |
| cross | Cross/plus shape | Arm thickness, fill colour |
| rounded-arrow | Arrow with rounded corners | Direction, corner radius, shaft/head dimensions |
Infographic / Layout Shapes
Metric display and indicator shapes for infographic designs.
| Shape | Description | Key Properties |
|---|---|---|
| icon-badge | Icon container badge | Badge shape (circle/rounded-square/hexagon), size, fill colour |
| comparison-bar | Side-by-side comparison bar | Left/right values and colours, bar height, corner radius |
| rating-stars | Star rating display | Star count, filled value, filled/empty colours |
| thermometer | Temperature/progress indicator | Value (0–1), fill and track colours |
| battery | Battery charge indicator | Value (0–1), orientation (horizontal/vertical), fill and track colours |
| pie-progress | Pie-style progress indicator | Value (0–1), fill and track colours |
Shape Properties
Common properties for all shapes.
| Property | Type | Description |
|---|---|---|
| x, y | number | Position on canvas |
| width, height | number | Dimensions in pixels |
| fillColor | hex | Background colour |
| borderColor | hex | Border colour |
| borderWidth | number | Border thickness in pixels |
| textColor | hex | Label text colour |
| label | string | Text label displayed in shape |
| opacity | number | Transparency (0 to 1) |