Navigating the Canvas
The C4 Designer canvas is an infinite workspace. Understanding how to move around it and control what you see is the foundation for everything else you do in the Designer.
This page covers the navigation mechanics: how to pan, how to zoom, what the viewport controls widget does, and how the toolbar is organised.
Panning the Canvas
Pan means moving the canvas left, right, up, or down to reveal different parts of your diagram.
To pan:
- Click and hold the left mouse button on an empty area of the canvas (not on a shape, boundary, or inspector panel)
- Drag in any direction
- Release the mouse button to stop panning
While panning, the cursor changes to a grab hand . If the cursor does not change to a grab hand, you may have clicked on a shape — click on an empty canvas area instead.
Panning does not start if you click on a node, boundary header, inspector, or the viewport controls widget. This prevents accidental moves when interacting with diagram elements.
Zooming
Nodinite supports two zoom methods, both anchored to your current cursor position so the point under your cursor stays fixed as you zoom.
Mouse Wheel Zoom
- Scroll up (or trackpad pinch-out): zoom in by 10 % per step
- Scroll down (or trackpad pinch-in): zoom out by 10 % per step
The zoom range is 10 % to 400 %.
Toolbar Zoom Buttons
The viewport controls widget (see below) provides – and + buttons for zooming in 10 % steps centred on the canvas, regardless of cursor position.
The Viewport Controls Widget
A small floating control strip is always visible at the bottom-left corner of the canvas area. It gives you one-click access to the most common viewport operations:
| Control | Action |
|---|---|
| – | Zoom out 10 %, centred on the canvas |
| Zoom % | Displays the current zoom level (e.g. 75%) |
| + | Zoom in 10 %, centred on the canvas |
| Fit — zoom and pan to show all diagram content with a comfortable margin |
The Fit button is the fastest way to re-orient yourself if you have panned or zoomed far away from your diagram. On first load, the canvas automatically fits all content to the screen.
Viewport State Preservation
When you move or resize an element, the Designer triggers a re-render of the canvas. Your zoom level and pan position are saved before the re-render and restored immediately afterwards, so the canvas never jumps or resets while you work.
The Toolbar
The toolbar appears at the top of the Designer page and contains diagram-level actions. Its exact contents depend on the diagram's current state:
When the Diagram is a Draft
| Button | Purpose |
|---|---|
| Scope (dropdown) | Select the active Diagram Set scope |
| Promote to Active | Publish the Draft — see Diagram Lifecycle |
| Export (dropdown) | Export as PNG, SVG, JSON, PlantUML, or Mermaid |
| View | Switch to the read-only View page |
| Edit Properties | Edit diagram name, type, description, and tags |
| Add Diagram | Create a new diagram in the same Diagram Set |
| Clone | Clone the diagram as an Active copy |
| Clone as Draft | Clone the diagram as a new Draft |
| Auto-arrange | Automatically arrange nodes on the canvas |
| Back | Return to the previous page |
When the Diagram is Active (Read-Only)
| Button | Purpose |
|---|---|
| Create Draft | Create a Draft copy to begin editing |
| Export (dropdown) | Export the diagram |
| View | Switch to the View page |
| Edit Properties | Edit diagram metadata |
| Back | Return to the previous page |
The Auto-arrange button is only available when the Mapify feature flag is active. It runs a server-side layout algorithm. A confirmation prompt appears first — see Building a Diagram for details.
Frequently Asked Questions
The canvas seems blank after opening — what happened?
The canvas calls Fit automatically on first load. If you see nothing, the diagram may have no elements yet. Use the Toolbox to add your first shape.
I zoomed out too far and can't find my diagram
Click the Fit button in the viewport controls widget to snap back to a view that shows all diagram content.
Can I zoom with keyboard shortcuts?
Keyboard shortcuts control element movement, not viewport zoom. Use the mouse wheel or the viewport controls widget for zooming. See the full Keyboard Shortcuts reference.