Diagram State Management

The diagram state is the central data model of Workflow Builder. It holds all nodes, edges, layout direction, and the diagram name. Everything the user does on the canvas (placing nodes, drawing edges, moving elements) updates this state.

State structure

The diagram is serialized as a flat JSON object:

{
  "name": "My Workflow",
  "layoutDirection": "DOWN",
  "nodes": [...],
  "edges": [...]
}

This is the same format used when saving to local storage, sending to an API, or passing in via props.

Canvas interactions

The canvas is an infinite whiteboard built on React Flow:

Drag and drop nodes from the palette onto the canvas
Pan by clicking and dragging the canvas background
Zoom with scroll wheel or the zoom controls in the toolbar
Select nodes and edges by clicking; multi-select with Shift or a drag selection box
Move nodes by dragging them
Connect nodes by dragging from a node’s handle to another node
Delete selected elements with the Delete or Backspace key

Undo / Redo

The undo/redo history tracks node-related actions. Users can undo and redo using:

Ctrl+Z / Cmd+Z - undo
Ctrl+Shift+Z / Cmd+Shift+Z - redo

The undo/redo stack is powered by the Undo/Redo plugin.

Auto-save

Workflow Builder automatically persists workflow changes in the background without interrupting the user experience. The system saves data before the user exits the application, preventing accidental data loss. The save destination depends on the integration strategy:

Local storage - saves to localStorage under the key workflowBuilderDiagram, making it suitable for prototypes and single-user setups
External API - POSTs the diagram JSON to your endpoint, supporting production-grade, multi-user environments

See Integration for details on how to configure the save strategy.

Keyboard shortcuts

Action	Windows / Linux	macOS
Copy	`Ctrl+C`	`Cmd+C`
Paste	`Ctrl+V`	`Cmd+V`
Cut	`Ctrl+X`	`Cmd+X`
Select all	`Ctrl+A`	`Cmd+A`
Undo	`Ctrl+Z`	`Cmd+Z`
Redo	`Ctrl+Shift+Z`	`Cmd+Shift+Z`