Create Your First Architecture Diagram

What you'll build

In this tutorial, you will create a complete three-tier architecture diagram consisting of:

• A client-side web application (Next.js).
• An API gateway handling incoming HTTP traffic.
• Two backend microservices (User Service and Billing Service).
• A PostgreSQL primary database and a Redis session cache.
• Smart orthogonal connectors labeled with communication protocols.

Before you start

• Open Rekhic in your browser.
• No account or credit card is required. You can complete this tutorial entirely in Guest mode.

Step 1: Initialize a New Workspace

1. From the Dashboard, click the "+ New Diagram" button.
2. In the top-left header bar, click on Untitled Diagram and rename it to Three-Tier Web Architecture.
3. Press Enter to confirm.

Step 2: Add the Frontend and Gateway Nodes

1. Press A on your keyboard (or click the Architecture Node tool in the creation toolbar).
2. Click near the top-center of the canvas to place a node. Label it Web Frontend.
3. In the floating context toolbar above the node, open the Icon Picker, search for Next.js, and select it.
4. Press A again and place a node below the frontend. Label it API Gateway.
5. Select the API Gateway node, click the Icon Picker, and choose Kong or NGINX.

Step 3: Add Backend Services and Data Stores

1. Place two nodes side-by-side beneath the API Gateway:
   • Left node: Label User Service, icon Node.js.
   • Right node: Label Billing Service, icon Go.
2. Beneath the services, place two data store nodes using the Ellipse tool (O) or Architecture Node tool (A):
   • Under User Service: Label Users DB, icon PostgreSQL.
   • Under Billing Service: Label Payments Cache, icon Redis.

Step 4: Connect the Components

1. Hover over the Web Frontend node to reveal its blue connection handles.
2. Drag a connector from the bottom handle of Web Frontend to the top handle of API Gateway.
3. Double-click the connector edge and type HTTPS /api.
4. Connect the bottom handle of API Gateway to User Service (labeled gRPC :50051).
5. Connect API Gateway to Billing Service (labeled gRPC :50052).
6. Connect User Service to Users DB (labeled SQL read/write).
7. Connect Billing Service to Payments Cache (labeled TCP :6379).

Review the generated architecture

Step back and review your diagram:

• Are the connections orthogonal and clean?
• Are the service tiers visually distinct?
• Does each node clearly indicate its component role and underlying technology?

Customize the diagram

1. Add a Network Boundary: Select the Rectangle tool (R), draw a bounding box enclosing API Gateway, the microservices, and databases.
2. In the context toolbar, set the stroke to Dashed, the fill to transparent, and send it to the back (Cmd/Ctrl + Shift + [).
3. Label the boundary Internal VPC (10.0.0.0/16).

Export your result

1. Click Export in the top navigation bar.
2. Select PNG with 2x resolution to download a high-resolution graphic for documentation or slides.
3. Click Export Markdown in the top navigation bar to generate an architectural markdown specification for your repository's ARCHITECTURE.md.

Tips

• Use shortcut Shift + 1 (Fit View) to quickly center your diagram on the screen.
• Hold Alt/Option and drag any node to instantly clone it.

Limitations

• The canvas currently stores diagrams locally in IndexedDB when in guest mode. If you clear your browser cookies and site storage while not signed in, local diagrams will be cleared. Sign in to sync across devices.