Visual canvas

The canvas is a drag-and-drop view of your workflow's execution graph: steps as nodes, pointers as connector lines. It's an alternative to the list editor; both save to the same underlying workflow, so you can switch between them at will.

URL: /automation/{id}/canvas
Required permission: automation.edit

When to use the canvas vs the list editor

Switch between them with the Switch to list / Switch to canvas buttons in the header. Nothing saves differently between views; positions persist in either direction.

Reading the graph

• Nodes are step cards, colour-tinted by category:

  • Blue (accent): actions (send email, send webhook, create ticket, assign to, update record).

  • Amber (warning): conditions (field equals, field contains, field greater than, field in list, etc.).

  • Teal (info): delays and waits.

• Connector lines show the graph pointers:

  • Solid grey arrow: linear next pointer (normal flow).

  • Dashed green arrow: condition's if true branch.

  • Dashed amber arrow: condition's if false branch.

• The Entry chip marks the step runs start at. You can move it (see below).

Panning and zooming

• Pan: click and drag on empty canvas (anywhere between nodes).

• Zoom: hold Ctrl (or Cmd on Mac) and scroll. Zoom level shows in the top-left toolbar.

• Reset view: header button snaps pan back to (0, 0) and zoom to 100%.

Moving nodes

Drag a node by its card body (not the label input or pointer dropdowns inside the side panel, which are interactive). On release, the new position saves automatically. You'll see Saving… flash in the header while the layout commits.

Auto-layout

If a workflow has no saved positions (freshly imported, or built in the list editor before the canvas ever opened), the canvas auto-lays it out left-to-right from the entry step using a breadth-first walk. Each level of depth becomes a column; steps at the same depth stack vertically. The layout saves immediately so the next visit preserves it.

Workflows that are partly positioned keep their placed nodes and drop the unplaced ones in a stack below. You can reposition them manually from there.

Adding a step

Click Add step in the top-left to open the palette. Pick a type; the new step drops at the current viewport centre and opens automatically in the side panel. If it's the first step on a blank workflow it's set as the entry step.

Selecting a step

Click a node to open the side panel on the right. The panel shows:

• Label: a descriptive name (optional; defaults to the type name if empty). Click-away or tab-out saves.

• Set as entry step: becomes the step that runs first. Only shown on non-entry nodes; the current entry shows a confirmation chip instead.

• Pointer selects: the dropdowns that wire this step to the next one(s).

  • Linear steps (actions / delays) have one Next step select.

  • Condition steps have If true and If false selects.

  • Selecting — end run — clears the pointer so the workflow ends at this step.

• Config: the same schema-driven editor the list editor uses, with type-aware pickers for each step type's fields. Edit inline; the Save changes button below the editor commits your edits. (If you click away to another node first, your edits save automatically on deselect.) Step types that haven't migrated to the schema framework still show a read-only JSON preview here; open the list editor to edit those.

• Open in list editor: opens the list editor for this workflow. Useful when you want the full-width form layout or the test-run panel. The list editor opens at its default selection (the entry step); navigate to the specific step you want once it loads.

• Delete step: soft-deletes this step and clears any inbound pointer on other steps (so the graph doesn't end up with dangling wires).

Connector editing

To change what a step points at, select the step and use the pointer dropdowns in the side panel. Each change saves immediately, with no separate save button.

Saving

Canvas changes save automatically in most cases:

• Drag-release: saves any node's new position.

• Label change: saves on blur (click-away).

• Pointer change: saves on select.

• Config change: saves when you click Save changes in the side panel, or automatically when you click away to another node (deselect-save). If you navigate away with unsaved edits the page flushes them on unload.

• Add / delete step: saves through the standard step endpoints.

The Save changes button gives you explicit confirmation that a config edit has landed. It's enabled only while there are unsaved edits.

Limits and rough edges

• The canvas is designed for workflows up to ~30 steps. Beyond that, the list editor's vertical scroll is easier to navigate.

• Self-pointing edges (a step's pointer set to itself) are blocked, since those are guaranteed infinite loops.

• The canvas doesn't show run-history overlays yet (which step was the last to fire, success/failure heatmap). Use the run-history page for that.

• Multi-select and bulk-move aren't in the MVP. Move nodes one at a time.

Keyboard shortcuts

Not yet; coming in a follow-up. For now, everything is mouse-driven.