Canvas Navigation Overview
The Flow Studio canvas is built on React Flow v11. It is an infinite, pannable, zoomable workspace. This guide covers every navigation and selection technique you need to work efficiently with large and complex workflow graphs.
What the Canvas Is
The canvas is the central workspace where you build workflow graphs. It is rendered by the WorkflowCanvas component, which wraps React Flow with custom node types, edge types, handles, and context menus.
Infinite Zoom
Zoom from a bird's-eye overview of 500+ nodes down to pixel-level port alignment. Min zoom 5%, max 150%.
Infinite Pan
The canvas extends in all directions. Pan with Space+drag or middle-click. No hard boundaries.
Minimap
Bottom-right minimap gives a full-workflow overview. Click anywhere on the minimap to jump to that region.
Smart Edges
Auto-routing edges avoid overlapping nodes. Edges redraw smoothly as you drag nodes.
Canvas Architecture
Understanding what lives in the canvas helps you navigate efficiently:
| Element | Type | Stored In |
|---|---|---|
| Nodes | WorkflowNode[] | workflowStore.nodes |
| Edges (connections) | WorkflowConnection[] | workflowStore.edges |
| Groups / Swimlanes | ProcessGroup[] | workflowStore.groups |
| Viewport (pan/zoom) | { x, y, zoom } | React Flow internal state + saved with graph |
Navigation Quick Reference
| Action | Mouse | Keyboard |
|---|---|---|
| Zoom in | Scroll up | Ctrl++ |
| Zoom out | Scroll down | Ctrl+- |
| Zoom to fit all | Toolbar Fit button | Ctrl+Shift+H |
| Pan | Space+drag or middle-click drag | Arrow keys (moves selection) |
| Select one node | Click node | Tab to cycle |
| Select multiple | Shift+click or drag box | Ctrl+A for all |
| Context menu | Right-click node or canvas | — |