Selection Area

Description

This guide shows how to add a selection area to the canvas. Use the Shift key and the mouse to select multiple nodes with a rectangle, which is a baseline interaction for larger node editors and workflow tools.

Selection area becomes important as soon as users need to move, delete, group, or inspect several nodes at once. Without it, a graph interface quickly becomes frustrating on dense canvases.

Example

When to use it

• Multi-select nodes before moving or deleting them.
• Prepare groups or batch operations.
• Improve keyboard-and-mouse workflows in larger diagrams.

Once your canvas holds more than a handful of nodes, box selection usually becomes a core interaction instead of an optional enhancement.

It also pairs naturally with grouping, alignment helpers, and undo/redo workflows.

Related docs

• Selection Area Docs
• Drag and Drop
• Undo/Redo Example