- 2 minutes to read
Keyboard Shortcuts
All keyboard shortcuts are active only in edit mode — that is, when the diagram is in Draft state and you are working in the Designer. Shortcuts are disabled when focus is inside a form field (text input, textarea, select, or any editable element).
Element Movement
| Shortcut | Action |
|---|---|
Arrow Up |
Move the selected node or boundary 1 px upward |
Arrow Down |
Move the selected node or boundary 1 px downward |
Arrow Left |
Move the selected node or boundary 1 px to the left |
Arrow Right |
Move the selected node or boundary 1 px to the right |
Shift + Arrow Up |
Move the selected element 10 px upward |
Shift + Arrow Down |
Move the selected element 10 px downward |
Shift + Arrow Left |
Move the selected element 10 px to the left |
Shift + Arrow Right |
Move the selected element 10 px to the right |
Position changes from keyboard movement are saved automatically after a short pause (approximately 400 ms after the last key press).
Selection and Inspection
| Shortcut | Action |
|---|---|
Enter |
Open the properties panel for the currently selected node or boundary |
Escape |
Clear the current selection and dismiss all open Inspector panels |
Deletion
| Shortcut | Action |
|---|---|
Delete |
Delete the currently selected node (triggers onDeleteNode) or boundary (triggers onDeleteBoundary) |
A confirmation prompt appears before deletion. Deletion cannot be undone.
Notes
- Keyboard shortcuts do not control viewport zoom or pan — use the mouse wheel and viewport controls for those
- If arrow keys are scrolling the page rather than moving elements, click once on the canvas first to ensure it has focus
- Keyboard movement requires a node or boundary to be selected — click an element to select it, then use the keys