Creating Your First Diagram

This guide walks through every step of building a multi-tier technical architecture on Rekhic's infinite canvas.

---

1. Initializing the Canvas

From the Rekhic Dashboard, click the "+ New Diagram" button.

Alternatively, you can initialize an architecture workspace from the top navigation bar at any time or select a pre-built blueprint from the Templates Catalog.

When the workspace loads, you are presented with:

• An infinite coordinate canvas with subtle alignment dots.
• A Top Navigation Bar with diagram renaming, export options, and theme controls.
• A Floating Creation Toolbar for placing architecture nodes, shapes, text, and freehand markup.
• Viewport Navigation Controls (zoom in, zoom out, fit view) in the lower corner.

---

2. Naming Your Diagram

By default, fresh workspaces are titled Untitled Diagram.

To rename your diagram:

1. Click the title field in the top left header bar.
2. Type your project name (e.g. Order Processing Microservices).
3. Press Enter or click outside to save. The title updates immediately in local storage and will appear in your Recent Workspaces list.

---

3. Placing Architecture Components

Architecture nodes are Rekhic's primary modeling primitive. They combine an icon badge, component title, category tag, and technology metadata.

1. Click the Architecture Node tool in the toolbar (or press A).
2. Click anywhere on the canvas to place your first component.
3. Label it Client Web App.
4. Drop a second node below or to the right, labeling it API Gateway.
5. Drop two additional nodes for backend services: Order Service and Payment Service.
6. Drop data store nodes: Orders DB (PostgreSQL) and Payment Cache (Redis).

---

4. Selecting Technology Icons

Rekhic comes with built-in vector technology icons spanning AWS, GCP, databases, and frameworks:

1. Select the Orders DB node.
2. In the floating context toolbar above the node, click the Icon picker.
3. Type PostgreSQL in the search box.
4. Click the PostgreSQL logo to bind it to the node.
5. Repeat for Redis, Node.js, Spring Boot, React, or Docker.

---

5. Connecting and Routing Relationships

System architecture diagrams are defined by how components communicate:

1. Hover over the source component (API Gateway).
2. Hover circles (handles) appear on the top, right, bottom, and left sides.
3. Drag a line from the bottom handle of API Gateway to the top handle of Order Service.
4. Rekhic automatically creates an orthogonal routed connector that navigates cleanly around intervening nodes.
5. Double-click the connector edge to add protocol or payload details (e.g., gRPC or HTTPS /orders).

---

6. Organizing with Layers and Boundaries

To indicate network zones, Kubernetes namespaces, or VPC subnets:

1. Select the Rectangle / Boundary shape tool from the toolbar (shortcut R).
2. Drag a boundary rectangle around the Order Service, Payment Service, and databases.
3. Set the background fill to subtle dashed styling or low opacity.
4. In the context toolbar, click Send to Back (Cmd/Ctrl + [) so your architecture nodes sit cleanly on top of the boundary.
5. Label the boundary Private VPC Subnet (us-east-1).

---

7. Saving and Next Steps

Your diagram is automatically persisted locally as you edit.

• Learn more about viewport controls in Understanding the Canvas.
• Learn how to convert your diagram into a Markdown specification in Diagram to Documentation.