Step-by-Step Guide to Creating Your First Architecture Diagram

Introduction

Many first‑time diagram creators open a drawing tool, stare at a blank canvas, place a few boxes, connect them, and end up with a doodle that feels wrong.

Preparation

Define purpose

Ask who will read the diagram (developers, product, leadership) and what it should convey (system structure, business flow, technology stack).

Gather system information

Modules/services and their relationships

Data flow

Technical components such as database, middleware, framework

Deployment details (servers, load‑balancing)

Basic elements

Common shapes

┌─────────┐        ┌─────────┐        ┌─────────┐
│  矩形   │        │ 菱形   │        │ 圆柱   │
│ (服务)  │───────→│(判断)   │───────→│ (存储) │
└─────────┘        └─────────┘        └─────────┘

┌────────┐        ┌────────┐        ┌────────┐
│  虚线框 │        │  箭头  │        │ 云朵   │
│(子系统) │        │(数据流)│        │(云服务)│
└────────┘        └────────┘        └────────┘

Common connectors

Solid arrow – synchronous call (e.g., User→Gateway)

Dashed arrow – asynchronous message (e.g., Service→MQ)

Solid line without arrow – data sync (DB1↔DB2)

Wavy line – dependency (A - - B)

Step‑by‑step e‑commerce diagram

Scenario

System consists of User, Product, Order, Inventory services and uses Vue.js, Spring Boot, MySQL, Redis, Kafka.

Step 1 – Layout

┌─────────────────────────────────────────────────────┐
│                                               │
│  互联网层 (用户直接接触的部分)               │
│                                               │
├─────────────────────────────────────────────────────┤
│                                               │
│  应用层 (业务逻辑处理)                       │
│                                               │
├─────────────────────────────────────────────────────┤
│                                               │
│  数据层 (数据存储)                           │
│                                               │
└─────────────────────────────────────────────────────┘

Step 2 – Main components

┌─────────────────────────────────────────────────────┐
│  ┌──────┐   ┌──────┐   ┌──────┐   ┌──────┐   │
│  │ APP  │   │ PC站 │   │ 小程序 │   │ H5页面 │   │
│  └──────┘   └──────┘   └──────┘   └──────┘   │
│                                               │
│                ↓                              │
├─────────────────────────────────────────────────────┤
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   │
│  │ 用户服务 │   │ 商品服务 │   │ 订单服务 │   │
│  └──────────┘   └──────────┘   └──────────┘   │
│                                               │
│                ↓                              │
├─────────────────────────────────────────────────────┤
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   │
│  │  MySQL   │   │  Redis   │   │  Kafka   │   │
│  └──────────┘   └──────────┘   └──────────┘   │
└─────────────────────────────────────────────────────┘

Step 3 – Add details

┌────────────┐
               │   用户      │
               │(APP/PC/小程序)│
               └─────┬──────┘
                     │
               ┌─────▼──────┐
               │   负载均衡  │
               │   (Nginx)   │
               └─────┬──────┘
                     │
               ┌─────▼──────┐
               │   API网关  │
               └─────┬──────┘
                     │
   ┌──────────┐   ┌─────┴──────┐   ┌──────────┐
   │ 用户服务 │←──→│  SpringBoot │←──→│ 商品服务 │
   └──────────┘   │   集群   │   └──────────┘
                  └─────┬──────┘
                        │
        ┌────────────┼────────────┐
        │            │            │
   ┌────▼────┐  ┌────▼────┐  ┌────▼────┐
   │  MySQL  │  │  Redis   │  │  Kafka   │
   └─────────┘  └──────────┘  └─────────┘

Step 4 – Labels

┌─────────────────────────────────────────────────────┐
│           电商系统架构图 v1.0                     │
├─────────────────────────────────────────────────────┤
│                                               │
│  接入层                                      │
│  ┌─────────────────────────────────────┐   │
│  │  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │   │
│  │  │ APP  │ │ PC站 │ │小程序│ │ H5   │ │   │
│  │  └──────┘ └──────┘ └──────┘ └──────┘ │   │
│  └─────────────────────────────────────┘   │
│                ↓                              │
│  网关层                                      │
│  ┌─────────────────────────────────────┐   │
│  │         Nginx (负载均衡)            │   │
│  │               ↓                     │   │
│  │      Spring Cloud Gateway            │   │
│  └─────────────────────────────────────┘   │
│                ↓                              │
│  服务层                                      │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌────────┐ │
│  │用户服务 │ │商品服务 │ │订单服务 │ │库存服务│ │
│  └─────────┘ └─────────┘ └─────────┘ └────────┘ │
│                ↓                              │
│  数据层                                      │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐          │
│  │ MySQL   │ │  Redis  │ │ Kafka   │          │
│  │ (主从)  │ │ (集群) │ │          │          │
│  └─────────┘ └─────────┘ └─────────┘          │
│                                               │
├─────────────────────────────────────────────────────┤
│  图例说明: → : 同步调用   - - > : 异步消息          │
└─────────────────────────────────────────────────────┘

Using Draw.io

Basic operations

Drag shapes from the left panel onto the canvas

Double‑click a shape to edit its text

Resize by dragging the shape’s edges

Move a shape by dragging it

Connecting lines

Select the connector tool, click the source shape, drag to the target shape

Adjust arrow style as needed

Styling

Change fill color in the style panel

Modify stroke color and width

Save & export

File → Save (Ctrl+S) or auto‑save to local/GitHub

File → Export as PNG, SVG, or PDF

Common mistakes and principles

❌ Overloading the diagram with every detail – keep only key information and supplement with documentation.

✅ Keep the diagram simple and clear; use one box when possible.

❌ Mixing layers leads to a tangled view – organise components by logical layers (top‑down or left‑right).

✅ Add titles, legends, and explanatory text for clarity.

❌ Missing annotations make the diagram unreadable – always label components and flows.

✅ Use consistent colors, shapes, and line styles; highlight important elements.

Advanced tips

Use built‑in templates and modify them for faster creation.

Create a personal shape library, save frequently used components, and drag them for reuse.

Keyboard shortcuts: Ctrl+C/V/D, Ctrl+Z, Delete, Ctrl+A for copy, paste, duplicate‑offset, undo, delete, and select all.

Conclusion

Clear, well‑structured architecture diagrams require a defined purpose, collected system information, logical layout, proper labeling, and regular practice.