架构图
概述
使用基于代码的绘图工具如Mermaid和PlantUML创建清晰、可维护的架构图，用于系统设计、数据流和技术文档。
使用场景
- 系统架构文档
- C4模型图
- 数据流图
- 序列图
- 组件关系
- 部署图
- 基础设施架构
- 微服务架构
- 数据库模式（可视化）
- 集成模式
Mermaid 示例
1. 系统架构图
graph TB
subgraph "客户端层"
Web[Web应用]
Mobile[移动应用]
CLI[CLI工具]
end
subgraph "API网关层"
Gateway[API网关<br/>速率限制<br/>认证]
end
subgraph "服务层"
Auth[认证服务]
User[用户服务]
Order[订单服务]
Payment[支付服务]
Notification[通知服务]
end
subgraph "数据层"
UserDB[（用户数据库<br/>PostgreSQL）]
OrderDB[（订单数据库<br/>PostgreSQL）]
Cache[（Redis缓存）]
Queue[消息队列<br/>RabbitMQ]
end
subgraph "外部服务"
Stripe[Stripe API]
SendGrid[SendGrid]
S3[AWS S3]
end
Web --> Gateway
Mobile --> Gateway
CLI --> Gateway
Gateway --> Auth
Gateway --> User
Gateway --> Order
Gateway --> Payment
Auth --> UserDB
User --> UserDB
User --> Cache
Order --> OrderDB
Order --> Queue
Payment --> Stripe
Queue --> Notification
Notification --> SendGrid
Order --> S3
User --> S3
style Gateway fill:#ff6b6b
style Auth fill:#4ecdc4
style User fill:#4ecdc4
style Order fill:#4ecdc4
style Payment fill:#4ecdc4
style Notification fill:#4ecdc4
2. 序列图
sequenceDiagram
actor 用户
participant Web as Web应用
participant Gateway as API网关
participant Auth as 认证服务
participant Order as 订单服务
participant Payment as 支付服务
participant DB as 数据库
participant Queue as 消息队列
participant Email as 邮件服务
用户->>Web: 下订单
Web->>Gateway: POST /orders
Gateway->>Auth: 验证令牌
Auth-->>Gateway: 令牌有效
Gateway->>Order: 创建订单
Order->>DB: 保存订单
DB-->>Order: 订单已保存
Order->>Payment: 处理支付
Payment->>Payment: 扣款
Payment-->>Order: 支付成功
Order->>Queue: 发布订单事件
Queue->>Email: 发送确认
Email->>用户: 订单确认
Order-->>Gateway: 订单已创建
Gateway-->>Web: 201已创建
Web->>用户: 订单成功
注解 over 用户,Email: 通过队列异步发送邮件
3. C4上下文图
graph TB
subgraph "电子商务系统"
System[电子商务平台<br/>管理产品、订单和客户账户]
end
客户[客户<br/>浏览和购买产品]
管理员[管理员<br/>管理产品和订单]
邮件[邮件系统<br/>SendGrid]
支付[支付提供商<br/>Stripe]
分析[分析平台<br/>Google Analytics]
客户 -->|浏览，下单| System
管理员 -->|管理| System
System -->|发送邮件| 邮件
System -->|处理支付| 支付
System -->|跟踪事件| 分析
style System fill:#1168bd
style 客户 fill:#08427b
style 管理员 fill:#08427b
style 邮件 fill:#999
style 支付 fill:#999
style 分析 fill:#999
4. 组件图
graph LR
subgraph "前端"
UI[React UI]
Store[Redux Store]
Router[React Router]
end
subgraph "API层"
REST[REST API]
WS[WebSocket]
GQL[GraphQL]
end
subgraph "业务逻辑"
ProductSvc[产品服务]
OrderSvc[订单服务]
AuthSvc[认证服务]
end
subgraph "数据访问"
ProductRepo[产品仓库]
OrderRepo[订单仓库]
UserRepo[用户仓库]
Cache[缓存层]
end
subgraph "基础设施"
DB[（PostgreSQL）]
Redis[（Redis）]
S3[AWS S3]
end
UI --> Store
Store --> Router
UI --> REST
UI --> WS
UI --> GQL
REST --> ProductSvc
REST --> OrderSvc
REST --> AuthSvc
WS --> OrderSvc
GQL --> ProductSvc
ProductSvc --> ProductRepo
OrderSvc --> OrderRepo
AuthSvc --> UserRepo
ProductRepo --> DB
OrderRepo --> DB
UserRepo --> DB
ProductRepo --> Cache
Cache --> Redis
ProductSvc --> S3
5. 部署图
graph TB
subgraph "AWS云"
subgraph "VPC"
subgraph "公共子网"
ALB[应用<br/>负载均衡器]
NAT[NAT网关]
end
subgraph "私有子网1"
ECS1[ECS容器<br/>服务实例1]
ECS2[ECS容器<br/>服务实例2]
end
subgraph "私有子网2"
RDS1[（RDS主）]
RDS2[（RDS副本）]
end
subgraph "私有子网3"
ElastiCache[（ElastiCache<br/>Redis集群）]
end
end
Route53[Route 53<br/>DNS]
CloudFront[CloudFront CDN]
S3[S3桶<br/>静态资产]
ECR[ECR<br/>容器注册表]
end
用户[用户] --> Route53
Route53 --> CloudFront
CloudFront --> ALB
CloudFront --> S3
ALB --> ECS1
ALB --> ECS2
ECS1 --> RDS1
ECS2 --> RDS1
RDS1 --> RDS2
ECS1 --> ElastiCache
ECS2 --> ElastiCache
ECS1 --> S3
ECS2 --> S3
ECS1 -.pulls images.-> ECR
ECS2 -.pulls images.-> ECR
style ALB fill:#ff6b6b
style ECS1 fill:#4ecdc4
style ECS2 fill:#4ecdc4
style RDS1 fill:#95e1d3
style RDS2 fill:#95e1d3
6. 数据流图
graph LR
用户[用户操作] --> 前端[前端应用]
前端 --> 验证{验证}
验证 -->|无效| 错误[显示错误]
验证 -->|有效| API[API请求]
API --> 认证{已认证？}
认证 -->|否| 未授权[401响应]
认证 -->|是| 服务[业务服务]
服务 --> 数据库[（数据库）]
服务 --> 缓存[（缓存）]
缓存 -->|命中| 返回[返回缓存]
缓存 -->|未命中| 数据库
数据库 --> 转换[转换数据]
转换 --> 响应[API响应]
响应 --> 前端
前端 --> 渲染[渲染UI]
PlantUML 示例
1. 类图
@startuml
class 订单 {
-id: UUID
-customerId: UUID
-条目: 订单项[]
-状态: 订单状态
-总金额: 数字
-创建于: 日期
+计算总额(): 数字
+添加条目(item: 订单项): 空
+移除条目(itemId: UUID): 空
+更新状态(status: 订单状态): 空
}
class 订单项 {
-id: UUID
-productId: UUID
-数量: 数字
-价格: 数字
+计算小计(): 数字
}
class 客户 {
-id: UUID
-名称: 字符串
-电子邮件: 字符串
-订单: 订单[]
+下订单(order: 订单): 空
+获取订单历史(): 订单[]
}
枚举 订单状态 {
待处理
处理中
已发货
已送达
已取消
}
客户 "1" -- "*" 订单: 下单
订单 "1" *-- "*" 订单项: 包含
订单 -- 订单状态: 拥有
@enduml
2. 组件图
@startuml
package "前端" {
[Web应用]
[移动应用]
}
package "API网关" {
[负载均衡器]
[API网关]
}
package "微服务" {
[用户服务]
[产品服务]
[订单服务]
[支付服务]
}
package "数据存储" {
数据库 "PostgreSQL" {
[用户数据库]
[产品数据库]
[订单数据库]
}
数据库 "Redis" {
[缓存]
[会话存储]
}
}
[Web应用] --> [负载均衡器]
[移动应用] --> [负载均衡器]
[负载均衡器] --> [API网关]
[API网关] --> [用户服务]
[API网关] --> [产品服务]
[API网关] --> [订单服务]
[API网关] --> [支付服务]
[用户服务] --> [用户数据库]
[产品服务] --> [产品数据库]
[订单服务] --> [订单数据库]
[用户服务] --> [缓存]
[产品服务] --> [缓存]
[API网关] --> [会话存储]
@enduml
3. 部署图
@startuml
节点 "CDN (CloudFront)" {
[静态资产]
}
节点 "负载均衡器" {
[ALB]
}
节点 "应用服务器" {
节点 "服务器1" {
[应用实例1]
}
节点 "服务器2" {
[应用实例2]
}
}
节点 "数据库集群" {
数据库 "主" {
[PostgreSQL主]
}
数据库 "副本" {
[PostgreSQL副本]
}
}
节点 "缓存集群" {
[Redis主]
[Redis从]
}
[浏览器] --> [静态资产]
[浏览器] --> [ALB]
[ALB] --> [应用实例1]
[ALB] --> [应用实例2]
[应用实例1] --> [PostgreSQL主]
[应用实例2] --> [PostgreSQL主]
[PostgreSQL主] ..> [PostgreSQL副本]: 复制
[应用实例1] --> [Redis主]
[应用实例2] --> [Redis主]
[Redis主] ..> [Redis从]: 复制
@enduml
最佳实践
✅ 做
- 使用一致的符号和标记
- 为复杂图表包含图例
- 保持图表聚焦于一个方面
- 有意义地使用颜色编码
- 包含标题和描述
- 对图表进行版本控制
- 使用基于文本的格式（Mermaid, PlantUML）
- 清晰显示数据流向
- 包含部署细节
- 文档图表约定
- 保持图表与代码同步
- 使用子图进行逻辑分组
❌ 不做
- 用细节挤满图表
- 使用不一致的风格
- 跳过图表图例
- 仅创建二进制图像文件
- 忘记记录关系
- 在一个图表中混合抽象级别
- 使用专有格式