Overview
The FlowChart block is a general-purpose directed-graph renderer. You define nodes and edges via bindable arrays, and the block handles rendering, layout, zoom, pan, and interaction. Unlike static image diagrams, flow chart data can be bound to a data source — enabling data-driven diagrams that update as underlying records change.
Note: Bind nodes and edges to data source query results to render live diagrams — approval workflow states from a database, microservice dependencies from a config API, or user journey steps from an analytics table.
Node Properties
The nodes property accepts an array of node objects. Each node defines its identity, label, visual type, position (in manual layout), and style overrides.
| Field | Type | Required | Description |
| id | string | Required (required) | Unique identifier for the node. Referenced by edges via source and target fields. |
| label | string | Required (required) | Display text rendered inside the node. |
| type | enum | Optional (optional) | Node shape: default (rounded rectangle), input (no incoming edges, circle), output (no outgoing edges, circle), diamond (decision), custom (slot for a nested block). |
| position | { x: number, y: number } | Optional (optional) | Absolute canvas position in pixels. Required when layout = manual. Ignored when using auto-layout. |
| style | object | Optional (optional) | Per-node style overrides: { background: string, color: string, border: string, borderRadius: string, fontSize: string, width: number, padding: string }. Merges with the global node style. |
| data | object | Optional (optional) | Arbitrary metadata attached to the node. Available in the onNodeClick event payload and in custom node slot binding expressions. |
| hidden | boolean | Optional (optional) | When true, the node is excluded from rendering and layout. Use with bindings to conditionally show/hide diagram sections. |
Edge Properties
The edges property accepts an array of edge objects. Each edge connects two nodes and optionally carries a label and visual style.
| Field | Type | Required | Description |
| id | string | Required (required) | Unique identifier for the edge. |
| source | string (node id) | Required (required) | The ID of the node this edge originates from. |
| target | string (node id) | Required (required) | The ID of the node this edge points to. |
| label | string | Optional (optional) | Text shown along the middle of the edge. Use for decision branches (e.g. "Yes" / "No") or transition conditions. |
| type | enum | Optional (optional) | Edge path style: straight (direct line), bezier (default — smooth curve), step (right-angle elbow connectors), smoothstep (rounded elbows). |
| animated | boolean | Optional (optional) | When true, the edge stroke animates with a moving dash pattern — useful for showing active data flows or current process paths. |
| style | object | Optional (optional) | Per-edge style: { stroke: string, strokeWidth: number, strokeDasharray: string }. |
| markerEnd | enum: arrow | arrowClosed | none | Optional (optional) | Arrowhead at the target end. Default arrowClosed. Set to none for undirected edges. |
Layout Algorithms
| Layout | Description | Best For |
| manual | Node positions come from the position field on each node. You control exact placement. | Carefully designed diagrams with specific spatial meaning (e.g., system topology maps) |
| auto-dagre | Dagre hierarchical layout — arranges nodes in left-to-right or top-to-bottom levels based on edge direction. Fast, deterministic. | Process flows, approval pipelines, dependency trees |
| auto-elk | Eclipse Layout Kernel — higher-quality layout with better edge routing, supports more layout strategies (layered, orthogonal, force-directed). Slower than Dagre for large graphs. | Complex diagrams with many crossing edges, architectural maps |
Block-Level Properties
| Property | Type | Default | Description |
| nodes | array (bindable) | Sample nodes | The node definitions. Bind to a data source, variable, or static array. |
| edges | array (bindable) | Sample edges | The edge definitions. Must reference valid node IDs in the nodes array. |
| layout | enum | auto-dagre | How node positions are determined. See Layout Algorithms above. |
| zoomable | boolean | true | Allow the viewer to pinch-to-zoom or scroll-to-zoom the diagram canvas. |
| pannable | boolean | true | Allow the viewer to drag the canvas to pan. |
| minimap | boolean | false | Show a minimap thumbnail in the corner for navigating large diagrams. Enable for diagrams with more than ~20 nodes. |
| fitView | boolean | true | Automatically zoom and pan to fit all nodes into the visible canvas on initial load and when nodes/edges change. |
| defaultZoom | number | 1 | Initial zoom level when fitView = false. 1 = 100%, 0.5 = 50%, 2 = 200%. |
| nodeStyle | object | theme defaults | Global default style applied to all nodes. Per-node style fields override this. |
Events & Methods
| Event / Method | Payload / Description |
| onNodeClick | Fires when user clicks a node. Payload: { id, label, type, data }. Use to open a detail drawer, navigate to a record, or highlight connected nodes. |
| onEdgeClick | Fires when user clicks an edge. Payload: { id, source, target, label }. |
| onNodeHover | Fires when mouse enters/leaves a node. Payload: { id, isHovering }. Use to highlight related nodes by updating node styles via a variable. |
| {{ id.selectedNode }} | The last clicked node object, or null. |
| {{ id.selectedEdge }} | The last clicked edge object, or null. |
Setting Up an Approval Workflow Diagram
Define static nodes and edges: In the Content inspector, open the Nodes editor. Add nodes for each workflow state:
{ id: "draft", label: "Draft", type: "input" },{ id: "review", label: "Under Review" },{ id: "approved", label: "Approved", type: "output", style: { background: "#D1FAE5" } },{ id: "rejected", label: "Rejected", type: "output", style: { background: "#FEE2E2" } }.Add edges: Add edges:
{ id: "e1", source: "draft", target: "review", label: "Submit" },{ id: "e2", source: "review", target: "approved", label: "Approve" },{ id: "e3", source: "review", target: "rejected", label: "Reject" }.Set layout and interaction: Set Layout = auto-dagre, Zoomable = true, Pannable = false (this diagram is small enough to see fully). Enable Fit View = true.
Highlight the current state: Bind
nodesto an expression that sets the active node's style to a highlighted background:{{ workflowNodes.map(n => ({ ...n, style: n.id === currentStatus ? { background: "#DBEAFE", border: "2px solid #2563EB" } : {} })) }}. The active step glows blue as the record moves through the workflow.
Examples
Example: System architecture map
Use Layout = manual to place services at deliberate positions reflecting their architectural tier (frontend top, API middle, database bottom). Use animated: true on data-flow edges and type: "step" for clean right-angle connectors. Bind node colors to a health-status data source so degraded services show in amber or red in real time.
Example: Decision tree for pricing logic
Render a pricing decision tree with type: "diamond" nodes for decision points and type: "output" nodes for final price tiers. Use edge labels "Yes" / "No" on condition branches. Bind node highlighting to the currently selected customer tier so sales reps can visually trace which path applies to a prospect.
Related Pages
| Page | Relationship |
| Organization Chart | Tree-structured hierarchy charts — simpler, single-root directed tree |
| Stepper V2 | Linear step-by-step progression — use when the flow is strictly sequential |
| Timeline & Stepper | Chronological timeline — use when time ordering is the primary axis |