Canvas & Navigation

The flow builder canvas is an infinite workspace where you visually arrange your conversation flow. It supports standard interactions like drag-and-drop, zoom, pan, and multi-select.

Panning

Move around the canvas using any of these methods:

• Space + Drag: Hold the spacebar and click-drag to pan.
• Middle Mouse Button: Click and drag with the middle mouse button.
• Touch: On touch devices, use two-finger drag.
• Minimap: Click and drag inside the minimap (bottom-right corner) to jump to a specific area.

Zooming

Method	Action
Scroll wheel	Zoom in/out centered on cursor
Ctrl + +	Zoom in
Ctrl + -	Zoom out
Ctrl + 0	Reset zoom to 100%
Toolbar buttons	Click the + / - buttons in the bottom toolbar
Fit View	Click the fit-view button to auto-zoom so all nodes are visible

The zoom range is 25% to 400%. The current zoom level is displayed in the bottom toolbar.

Selecting Nodes

• Single click: Select one node. Deselects all others.
• Ctrl + Click: Add or remove a node from the selection.
• Drag select: Click on empty canvas space and drag to create a selection rectangle. All nodes within the rectangle are selected.
• Ctrl + A: Select all nodes on the canvas.

Moving Nodes

• Drag: Click and drag a selected node to reposition it.
• Multi-move: Select multiple nodes, then drag any one of them to move the entire group.
• Arrow keys: Nudge selected nodes by 1 pixel (or 10 pixels with Shift held).

Grid Snapping

Grid snapping helps you align nodes precisely. When enabled, nodes will snap to the nearest grid point as you drag them.

• Toggle grid snap in the toolbar or press G.
• Default grid size is 20px.
• Grid lines are visible at zoom levels above 50%.

TIP

Hold Alt while dragging to temporarily disable grid snapping for fine-grained placement.

Minimap

The minimap provides a bird's-eye view of your entire flow in the bottom-right corner of the canvas. It shows:

• All nodes as colored rectangles (color-coded by node type)
• The current viewport as a highlighted rectangle
• Click anywhere on the minimap to jump to that area

Toggle the minimap with the toolbar button or press M.

imageFlow builder canvas showing the minimap in the bottom-right corner with viewport indicator, and zoom controls in the bottom toolbar

Minimap and zoom controls

Alignment Tools

When multiple nodes are selected, alignment options appear in the toolbar:

Option	Description
Align Left	Align left edges of selected nodes
Align Center	Align horizontal centers
Align Right	Align right edges
Align Top	Align top edges
Align Middle	Align vertical centers
Align Bottom	Align bottom edges
Distribute Horizontally	Space nodes evenly left to right
Distribute Vertically	Space nodes evenly top to bottom

imageMultiple nodes selected on canvas with alignment toolbar visible showing align left, center, right, distribute horizontally, and distribute vertically buttons

Multi-select and alignment tools

Canvas Context Menu

Right-click on empty canvas space to open the context menu:

• Add Node: Opens a searchable node picker
• Paste: Paste previously copied nodes
• Select All: Select all nodes
• Fit View: Zoom to fit all nodes
• Toggle Grid: Enable/disable grid snap

WARNING

Deleting a node also removes all edges connected to it. If you accidentally delete a node, use Ctrl+Z to undo.