Moving Nodes

Drag to Move

Click and drag any node to reposition it. All edges connected to the node (both input and output) redraw in real time as you drag. When you release, the new position is recorded in workflowStore and marks the workflow as dirty.

Moving Multiple Nodes Together

Select multiple nodes (Shift+Click or box select), then drag any node in the selection. All selected nodes move together, preserving their relative positions. Edges between nodes in the selection remain intact; edges to nodes outside the selection stretch to follow.

Arrow Key Movement

With one or more nodes selected, use the arrow keys to nudge them:

• Arrow Keys — move by 10px per key press
• Shift+Arrow Keys — move by 1px for precise alignment

Snap to Grid

By default, nodes snap to a 20px grid when dragged. This keeps workflows visually aligned. You can temporarily disable snapping by holding Alt while dragging — the node moves freely without grid snapping.

Align and Distribute

With multiple nodes selected, right-click to access the alignment submenu:

• Align Left — Align left edges of all selected nodes
• Align Right — Align right edges
• Align Top — Align top edges
• Align Bottom — Align bottom edges
• Centre Horizontally — Centre all nodes on a horizontal axis
• Centre Vertically — Centre all nodes on a vertical axis
• Distribute Horizontally — Space nodes evenly along the X axis
• Distribute Vertically — Space nodes evenly along the Y axis

Smart Edge Routing

Flow Studio uses smart edge routing by default. When you move a node, the edges connecting it to neighbours automatically re-route to avoid overlapping other nodes. Edge paths are recalculated using a simplified A* pathfinding algorithm implemented via the SmartEdge component. If automatic routing produces a suboptimal path, you can right-click an edge and choose Convert to Straight to use a direct line instead.