Quick Start Guide

In this guide, you will create, organize, and export a complete system architecture diagram in under 5 minutes.

The Standard Rekhic Workflow

text Copy
1. Open Rekhic  ──▶  2. Create Diagram  ──▶  3. Add Nodes  ──▶  4. Connect Components
                                                                        │
7. Export (Image & Docs) ◀── 6. Save Work ◀── 5. Organize Architecture ◀┘

You can start from a blank canvas or jumpstart your diagram using one of the three local-first import engines:

• README (README to Diagram)
• Source Code (Code to Diagram)
• Public GitHub Repository (GitHub Repository to Diagram)

Step 1: Open Rekhic

Navigate to rekhic.in or open the Dashboard at /dashboard.

You can immediately start sketching as a Guest without an account—all guest data is stored securely in your browser's local IndexedDB. Alternatively, sign in to sync your diagrams across devices.

Step 2: Create a Diagram

Click "+ New Diagram" on the Dashboard toolbar or top navigation bar. A fresh, infinite canvas opens with an alignment grid.

Step 3: Add Architecture Nodes

1. Click the Architecture Node tool in the toolbar (or press shortcut A).
2. Click anywhere on the canvas to place a node representing your web service or backend.
3. Double-click to set its label (e.g. API Gateway).
4. In the node context toolbar, open the Icon Library and search for Node.js, FastAPI, Go, or AWS to apply a technology icon.
5. Place a second node representing a database (e.g. PostgreSQL or Redis).

Step 4: Connect Components

1. Hover over your API Gateway node to reveal its connection handles (blue dots on the perimeter).
2. Click and drag an edge to the PostgreSQL node.
3. An orthogonal smart-routing connector will snap cleanly between the two elements.
4. Optional: Add a label to the connector (e.g., queries or writes: JSON).

Step 5: Organize the Architecture

• Auto Layout: Press the Auto Layout button in the canvas controls to automatically arrange nodes into a clean hierarchical DAG using the Dagre layout engine.
• Grouping: Hold Shift and drag a marquee selection over related nodes, then press Cmd/Ctrl + G to group them into a bounding boundary (e.g., VPC or Private Subnet).

Step 6: Save Your Work

Rekhic uses a local-first autosave architecture:

• Guest users: Diagrams are autosaved to local browser storage (IndexedDB) after every change. No network requests are made.
• Signed-in users: Changes autosave locally and asynchronously sync to Firebase Firestore for cross-device access.

Step 7: Export Diagram & Documentation

1. Export as Images: Click Export in the top bar to download high-resolution PNG, SVG, or JSON files.
2. Export as Markdown Documentation: Click Export Markdown to generate a complete GitHub-Flavored Markdown architecture specification detailing applications, data stores, external dependencies, and relationship flows.

Next Steps

• Explore Creating Your First Diagram for deep-dive editing techniques.
• Learn how Code to Diagram extracts architecture from your existing project codebases.
• Learn how to convert any canvas diagram into an ADR using Diagram to Documentation.