Canvas Overview

Rekhic is built on an infinite XYFlow vector canvas. You are never constrained by page limits, margins, or canvas borders. As your technical architectures expand from simple monolithic services into multi-region cloud topologies, the canvas scales with you.

---

Workspace Layout

The Rekhic workspace is structured into four functional areas:

1. Top Application Bar:

   • Project title and live rename input.
   • Diagram Switcher modal for instant workspace switching.
   • Markdown Export and Image Export buttons (PNG, SVG, JSON).
   • Theme toggle (Light/Dark mode) and User Profile menu.

2. Infinite Canvas Viewport:

   • Boundless coordinate plane featuring an alignment dot grid.
   • Interactive nodes, smart connectors, and boundary groupings.

3. Floating Creation Toolbar:

   • Quick tools to drop architecture nodes, basic shapes (rectangles, ellipses), text notes, and directional connectors.
   • Keyboard shortcut helpers and generation shortcuts.

4. Lower Navigation & Viewport Controls:

   • Zoom level indicator (100%, 50%, etc.).
   • Zoom in (+) and Zoom out (-) controls.
   • Fit View button (Shift + 1) to re-center all diagram elements into view.
   • Minimap toggle for large systems.

---

Basic Navigation Controls

Panning (Moving Around)

• Trackpad: Swipe in any direction with two fingers.
• Mouse: Click and drag using the middle mouse button (scroll wheel).
• Keyboard: Hold the Spacebar, left-click, and drag.

Zooming

• Trackpad: Pinch to zoom in or out smoothly.
• Mouse: Hold Cmd/Ctrl while scrolling the mouse wheel.
• Toolbar: Click the + or - buttons in the bottom viewport bar.

---

Canvas Performance

Rekhic's canvas rendering is accelerated by hardware canvas layers. Even with dozens of services, data stores, and orthogonal connectors, dragging and panning maintains 60 FPS performance on modern browsers.

Next: Learn about the components you can place in Canvas Nodes.