Loading…
Loading…
Connected nodes that explain processes, pipelines, and how systems work. No design tools needed.
The Flow Diagram displays connected nodes in a left-to-right or top-to-bottom layout. Each node has a label, optional icon, and colour. Connections between nodes are drawn automatically. Nodes can branch and merge.
Best used for: explaining how a product works, showing a data pipeline, illustrating a publishing workflow, system architecture overviews, and any content where the relationships between steps matter.
From your prompt to a published result — what happens in between.
| Setting | What it does |
|---|---|
| Direction | Flow horizontally (left to right) or vertically (top to bottom). |
| Nodes | Each node has a label, optional icon, colour, and a list of connections to other nodes. |
| Connector style | Lines between nodes: straight, curved, or with arrowheads. |
| Node colours | Each node can have its own background colour for visual grouping. |
Connected nodes that show how things work, flow, or relate. Explain a process, a pipeline, or a system without needing a design tool.
The Flow Diagram widget renders connected nodes with labels, icons, and directional arrows. Nodes can branch into multiple paths or merge back to a single thread. Connections animate in as the page loads.
Best used for: how-it-works sections, AI workflows, publishing pipelines, system architecture overviews, and any content where sequence or connection matters.