Understanding the Canvas
Rekhic is powered by an infinite coordinate system. Unlike traditional diagram editors with fixed paper sizes (A4 or US Letter), your architecture can expand organically in any direction.
The Coordinate Space
Every node placed on the canvas possesses an (x, y) coordinate, along with a width and height.
(0, 0)is the center anchor point when initializing a blank workspace.- The canvas has no artificial borders or boundaries.
- Coordinates scale cleanly under vector transformations, meaning whether you are zoomed in to inspect an individual database schema or zoomed out to view an enterprise topology, rendering stays sharp.
Navigating the Viewport
| Action | Trackpad Gesture | Mouse Interaction | Keyboard Shortcut |
|---|---|---|---|
| Pan / Move | Two-finger scroll | Middle-mouse drag | Hold Space + Left-click drag |
| Zoom In / Out | Pinch gesture | Cmd/Ctrl + Mouse wheel | Use + and - viewport buttons |
| Fit View | — | Click "Fit View" button | Shift + 1 |
| Reset View (100%) | — | Click "100%" indicator | Shift + 0 |
Lost in the Void? Use "Fit View"
If you pan far into empty space, click the Fit View icon in the bottom-left viewport controls (or press Shift + 1). Rekhic instantly recalculates the bounding box of all placed nodes and frames them in the center of your screen.
The Selection Model
Rekhic uses a standard, intuitive multi-selection model:
- Single Select: Click directly on any node, shape, or connector.
- Toggle Select: Hold
Shift(orCmd/Ctrl) and click to add or remove individual elements from your active selection. - Marquee Drag Selection: Click and drag across empty canvas space to draw a selection rectangle over multiple components.
- Select All: Press
Cmd/Ctrl + Ato select every component on the active canvas.
When multiple items are selected, a Multi-Select Action Toolbar appears, allowing you to move, align, duplicate, or delete the group in a single action.
Layering Order (Z-Index)
Elements on the canvas are rendered in order:
- Background Canvas: The dot alignment grid.
- Boundaries & Group Boxes: Low-elevation grouping cards.
- Connectors & Arrows: Relationship lines routed between nodes.
- Architecture Nodes & Text: Top-level interactive cards and badges.
To adjust the layering of overlapping shapes:
- Bring Forward: Press
Cmd/Ctrl + ] - Send Backward: Press
Cmd/Ctrl + [ - Bring to Front: Press
Cmd/Ctrl + Shift + ] - Send to Back: Press
Cmd/Ctrl + Shift + [
Grid and Snapping
The canvas features a subtle 12px dot grid:
- Moving nodes will snap gently to clean grid intervals to keep your diagrams aligned.
- Handles on nodes ensure that connectors snap exactly to cardinal compass points (North, East, South, West).
Next: Learn about how diagrams are stored and synchronized in Saving and Managing Drawings.