Canvas Overview
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 Four Regions
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:
Nodes: The Atoms of Orchestration
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):
Edges and the DAG
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 Three Modes
The canvas renders differently in each mode:
- Build mode: edit the workflow — drag, wire, configure. See Build Mode.
- Monitor mode: the canvas is read-only; observe a run in real time (node states stream over WebSocket). See Monitor Mode.
- HITL approvals: the workflow pauses at a human-review node awaiting approve / edit / reject. See HITL Approvals.
Node Semantics
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.