Loading
The canvas is the visual orchestration core of Hanflow. You drag nodes from the left palette, wire them into a directed acyclic graph (DAG) on the canvas, and configure each node in the right inspector. Here is the full canvas at a glance:
The canvas is composed of four fixed regions:
| Region | Responsibility |
|---|---|
| TopBar | Workflow naming, save, dry-run, run, theme toggle |
| NodePalette | Lists the 13 node types, color-coded by group, drag onto canvas |
| WorkflowCanvas | The editing surface for nodes and edges; positions are persisted |
| InspectorPanel | Typed form generated from the selected node's config schema |
The top bar carries the global actions — naming, save (with a dirty guard), dry-run (observe execution shape without real model calls), and run:
The 13 node types are color-coded by five groups; color is semantics: control nodes are gray, leaf nodes are tinted by type, and dynamic / state / retrieval nodes each get a dedicated hue. The palette lists them grouped:
Each node is a fixed-structure card: a 4px type color bar on top, the type name, a config summary, and two connection handles (left/right):
Drag from a node's right handle to another's left handle to create an edge. All edges form a directed acyclic graph (DAG) — the canvas prevents cycles. Below is a sample workflow spanning dynamic routing, branching, leaves, retrieval, and approval:
The canvas renders differently in each mode:
The canvas only shows what nodes look like. For the config fields, JSON Schema validation, and DSL semantics of the 13 node types, see 13 Primitive Nodes.