Flow Tree Block
Branching timeline and fork visualisation showing sequential processes that branch into parallel paths. Useful for deployment pipelines, release trains, or migration sequences.
The Flow Tree block renders a top-down or left-to-right branching tree where a single starting node can fork into parallel branches, which can themselves fork or converge. Each node represents a step, stage, or milestone, and edges between nodes show the flow of execution with optional conditions or labels.
The layout engine automatically arranges branches to avoid overlaps and draws smooth curved connectors between nodes. Nodes can be styled by status (pending, active, complete, failed) to show the current state of a pipeline or process.
When to Use
Configuration
The following properties control the flow tree layout and appearance.
| Property | Type | Description |
|---|---|---|
| Title | Text | Optional heading displayed above the visualisation. |
| Subtitle | Text | Optional secondary text below the title. |
| Direction | Select | Layout direction: Top to Bottom or Left to Right. Defaults to Top to Bottom. |
| Accent Colour | Colour | Colour used for active nodes, edge highlights, and connector lines. |
| Background | Colour | Background colour of the visualisation area. Defaults to transparent. |
| Node Shape | Select | Shape for step nodes: Rounded Rectangle, Circle, or Pill. Defaults to Rounded Rectangle. |
| Show Edge Labels | Toggle | Whether to display condition or transition labels on edges. Defaults to true. |
| Connector Style | Select | Edge drawing style: Curved, Straight, or Step. Defaults to Curved. |
| Branch Spacing | Number | Horizontal (or vertical) gap between parallel branches in pixels. Defaults to 80. |
| Level Spacing | Number | Gap between sequential levels in pixels. Defaults to 100. |
Per-Node Fields
Each node in the flow tree has these configurable fields.