Canvas

When you open a Workflow at /my-maps/<id>, EzFlow loads the canvas — a React Flow–powered infinite surface where you drag, connect, and arrange nodes to build your automation graph.

Navigating the canvas

Click and drag the background to pan. Scroll to zoom in or out; on a trackpad, use the pinch gesture. When you first open a Workflow, EzFlow fits all existing nodes into view automatically.

Controls

Two buttons sit at the bottom-left of the canvas:

• Undo — reverts the last change (keyboard shortcut: Ctrl+Z / Cmd+Z)
• Redo — reapplies a reverted change (Ctrl+Y / Cmd+Y)

Every node and edge change is tracked in a 50-step history, so you can step back through your edits freely.

Selecting nodes

• Single select — click a node. Click the canvas background to deselect everything.
• Multi-select — hold Ctrl (Cmd on macOS) and click additional nodes to add them to the selection, or hold Shift and drag a box around an area to marquee-select everything inside it.
• Select all — press Ctrl+A (Cmd+A).

Moving and deleting nodes

Drag any selected node to reposition it. When multiple nodes are selected, dragging one moves the whole group.

Press Delete or Backspace to remove all selected nodes and any edges connected to them.

Copying and pasting

Press Ctrl+C (Cmd+C) to copy the selected nodes and their interconnecting edges to the clipboard. Press Ctrl+V (Cmd+V) to paste; the pasted nodes appear offset 50 px from the originals and become the new selection.

Adding nodes

There are three ways to place a new node on the canvas:

1. Drag from the node palette on the left — see Node palette.
2. Right-click any empty area of the canvas to open the quick-add menu, then click a node type.
3. Drag from an output handle into empty space — the quick-add menu opens pre-filtered to only the node types whose input type matches the handle you pulled from.

Working with edges

Nodes are connected by variable edges — curved lines that carry typed data between output and input handles. The edge colour indicates the data type flowing through it.

• Remove an edge — hover the edge to reveal a delete button at its midpoint, then click it; or double-click the edge directly.
• Rewire an edge — drag either endpoint of an existing edge to a different handle. The connection is updated when you release.

Next steps