Flowchart
The Flowchart component renders directed graphs for decision trees and process flows. Nodes are typed (start, end, process, decision) with distinct shapes, and edges support labels for branch conditions.
Basic example
Left-to-right layout
Use direction: left-right for horizontal flows like CI/CD pipelines.
Complex branching
Multiple decision nodes create rich branching logic.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional title displayed above the chart |
nodes | FlowchartNode[] | (required) | Array of nodes (min 2) |
edges | FlowchartEdge[] | (required) | Array of directed edges (min 1) |
direction | 'top-down' | 'left-right' | 'top-down' | Layout direction |
interactionMode | 'modifier-key' | 'click-to-activate' | 'always' | 'modifier-key' | Controls zoom/pan behavior |
FlowchartNode
| Property | Type | Default | Description |
|---|---|---|---|
id | string | (required) | Unique identifier |
type | 'start' | 'end' | 'process' | 'decision' | 'process' | Node shape type |
label | string | (required) | Display label |
FlowchartEdge
| Property | Type | Default | Description |
|---|---|---|---|
from | string | (required) | Source node ID |
to | string | (required) | Target node ID |
label | string | — | Optional label (e.g. Yes/No) |
Node shapes
- start / end — Rounded rectangle (stadium shape) with accent coloring
- process — Standard rectangle with surface coloring
- decision — Diamond shape with accent border
Interaction Modes
The flowchart supports three interaction modes for zooming and panning:
modifier-key(default): Hold Ctrl/Cmd while scrolling to zoom. Best for scrollable content.click-to-activate: Click once to activate zoom/pan, Escape to deactivate. Best for explicit opt-in.always: Scroll immediately zooms with no modifier required. Legacy behavior.
See the Graph component documentation for detailed examples and use cases.
Accessibility
- SVG has
role="img"with anaria-labeldescribing the flowchart title and node/edge counts. - A hidden data table lists all nodes, their types, and connections for screen reader users.
- Edge labels are included in the accessible table as relationship descriptions.