Data Visualisation Shapes
14 chart and data display shapes bring your architecture infographics to life with pie charts, gauges, bar charts, radar charts, heatmaps, sankey diagrams, and more.
Architecture documentation often needs to convey quantitative information: system load, service distribution, migration progress, or performance metrics. The data visualisation shapes let you embed charts and data displays directly on the diagram canvas alongside your architecture content.
Pie and Donut Charts
Display proportional data with configurable segments. The donut variant adds an inner radius to create a ring shape, which is useful for placing a label or icon in the centre.
| Property | Range | Description |
|---|---|---|
| Segments | 1+ | Each segment has a start angle, end angle, and fill colour |
| Inner Radius | 0 (pie) to 0.9 (thin ring) | Controls the hole size for donut charts |
| Stroke Colour | Any colour | Border colour between segments |
| Stroke Width | 0+ | Border thickness |
Gauge and Progress Ring
Display a single metric value against defined zones or a track.
Bar Chart and Stacked Bar
Compare discrete values with vertical bars or show composition with horizontally stacked segments.
Radar Chart
Display multi-dimensional data on a spider-web grid. Each axis represents a metric with its own value. Configure axis labels, values, fill opacity, fill colour, and the number of concentric grid levels.
Treemap and Heatmap Grid
Sparkline and Bubble Chart
Sankey Diagram
Visualise flow and transformation between two sets of nodes. Left nodes connect to right nodes via coloured flows whose width represents volume. Configure node values and colours on each side, then define flows specifying source index, target index, value, and colour.
Timeline
Display items on a horizontal timeline with rows. Each item has a start position, end position, row assignment, and colour. Timelines are useful for migration roadmaps, release schedules, or project phases shown alongside the architecture they describe.
Ring Segment
An individual arc segment that can be combined with other shapes to build custom circular visualisations. Configure start angle, end angle, inner radius, and fill colour. Unlike pie charts (which manage segments automatically), ring segments give you full manual control over positioning.
| Shape | Best For | Key Controls |
|---|---|---|
| Pie Chart | Proportional distribution | Segments, inner radius, stroke |
| Donut Chart | Distribution with central content | Same as pie with inner radius > 0 |
| Ring Segment | Custom circular layouts | Start/end angle, inner radius |
| Gauge | Single metric with zones | Value, zones, needle, arc width |
| Progress Ring | Completion percentage | Value, track/fill colours, ring width |
| Bar Chart | Category comparison | Bar values and colours, spacing |
| Radar Chart | Multi-dimensional assessment | Axes with labels/values, grid levels |
| Treemap | Hierarchical proportions | Cell values and colours, gap |
| Heatmap Grid | Matrix intensity | Rows, columns, values, colour range |
| Sparkline | Trend indicators | Values, line/fill colours, dots |
| Bubble Chart | Three-variable comparison | Bubble position, size, colour |
| Stacked Bar | Composition breakdown | Stack segments with values/colours |
| Sankey | Flow and allocation | Left/right nodes, flows |
| Timeline | Schedules and roadmaps | Items with start/end/row/colour |