Mermaid时序图之完全指南
# Mermaid时序图之完全指南
# 一、时序图解决什么问题
当你需要描述多个对象之间按时间顺序的交互时，时序图是最佳选择。
典型场景：
- API 请求的完整链路（客户端 → 网关 → 服务 → 数据库）
- OAuth 登录流程（用户 → 浏览器 → 授权服务器 → 资源服务器）
- 微服务之间的 RPC 调用链
- 消息队列的发布/消费
# 二、基本语法
# 2.1 参与者（Participant）
sequenceDiagram
participant 用户
participant APP as 手机App
participant Server as 后端服务
participant DB as 数据库
用户->>APP: 点击下单
APP->>Server: POST /orders
Server->>DB: INSERT INTO orders
DB-->>Server: OK
Server-->>APP: 200 Created
APP-->>用户: 下单成功
participant 别名 as 显示名称 显式声明
participant 别名 仅别名（名称=别名）
# 2.2 六种消息箭头
| 语法 | 含义 | 说明 |
|---|---|---|
->> | 实线实心箭头 | 同步请求/调用 |
-->> | 虚线实心箭头 | 响应/返回 |
-> | 实线无箭头 | 数据传递 |
--> | 虚线无箭头 | 异步消息 |
-x | 实线叉箭头 | 失败/异常 |
-) | 实线半圆箭头 | 异步消息（另一种） |
sequenceDiagram
A->>B: 同步调用
B-->>A: 返回结果
C-->D: 异步消息
E-xF: 调用失败
# 2.3 激活（Activations）
+ 和 - 控制参与者的生命线激活：
sequenceDiagram
Client->>+Server: 请求数据
Server->>+DB: 查询
DB-->>-Server: 返回结果
Server-->>-Client: 响应
| 语法 | 效果 |
|---|---|
->>+B | 调用 B，激活 B |
-->>-B | 返回结果，同时关闭 B 的激活 |
activate B | 仅激活 B |
deactivate B | 仅关闭 B |
# 三、注释（Notes）
sequenceDiagram
A->>B: 调用服务
Note over A,B: A和B之间的注释
Note left of A: 这是A左侧的注释
Note right of B: 这是B右侧的注释
Note over A,B: 覆盖A和B
Note left of A: A左侧
Note right of B: B右侧
# 四、循环（Loop）
sequenceDiagram
爬虫->>+网站: 请求第1页
网站-->>-爬虫: 返回数据
loop 翻页爬取
爬虫->>+网站: 请求下一页
网站-->>-爬虫: 返回数据
end
loop 循环说明
消息体
end
# 五、条件分支（Alt / Else / Opt）
# 5.1 Alt：二选一
sequenceDiagram
用户->>系统: 上传头像
alt 文件小于 5MB
系统-->>用户: 上传成功
else 文件超过限制
系统-->>用户: 提示文件过大
end
# 5.2 Opt：可选分支
sequenceDiagram
用户->>系统: 提交订单
opt 使用了优惠券
系统->>优惠券服务: 核销优惠券
优惠券服务-->>系统: 核销成功
end
系统-->>用户: 下单成功
# 六、并发（Par / And / Critical）
sequenceDiagram
应用->>+服务: 初始化首页
par 并发加载
服务->>+商品服务: 获取商品列表
商品服务-->>-服务: 商品数据
and
服务->>+用户服务: 获取用户信息
用户服务-->>-服务: 用户数据
and
服务->>+广告服务: 获取广告
广告服务-->>-服务: 广告数据
end
服务-->>-应用: 首页数据聚合完成
par [说明]
并发操作1
and
并发操作2
end
# 七、实战：OAuth 2.0 授权码流程
sequenceDiagram
participant U as 用户
participant C as 客户端App
participant A as 授权服务器
participant R as 资源服务器
U->>C: 点击"GitHub登录"
C->>A: 重定向到授权页面
A-->>U: 显示授权确认页面
U->>A: 确认授权
A-->>C: 返回授权码(code)
C->>+A: 用code换取token
Note over C,A: POST /token<br/>grant_type=authorization_code
A-->>-C: 返回access_token + refresh_token
C->>+R: 请求用户数据<br/>Authorization: Bearer token
R-->>-C: 返回用户信息
C-->>U: 登录成功，显示首页
Note over C,A: 后续token过期时
C->>A: 用refresh_token刷新
A-->>C: 新的access_token
# 八、自动编号
sequenceDiagram
autonumber
用户->>系统: 提交订单
系统->>系统: 校验库存
系统->>支付: 发起支付
支付-->>用户: 支付结果
系统->>物流: 创建运单
autonumber 从1开始自动编号
# 九、实战：微服务下单全链路
sequenceDiagram
autonumber
actor U as 用户
participant GW as API网关
participant OS as 订单服务
participant PS as 商品服务
participant IS as 库存服务
participant PY as 支付服务
participant DB as 订单数据库
U->>GW: POST /api/orders
GW->>OS: 创建订单请求
activate OS
OS->>+PS: 查询商品信息
PS-->>-OS: 商品详情 + 价格
OS->>+IS: 锁定库存
IS-->>-OS: 锁定成功
OS->>DB: 写入订单(待支付)
OS-->>GW: 返回订单ID + 总价
deactivate OS
GW-->>U: 展示支付页面
U->>GW: 确认支付
GW->>PY: 发起支付
activate PY
PY->>PY: 风控校验
PY-->>GW: 支付成功
deactivate PY
GW->>OS: 更新订单状态
activate OS
OS->>+IS: 扣减库存
IS-->>-OS: 扣减成功
OS->>DB: 更新订单(已支付)
OS-->>GW: 状态更新成功
deactivate OS
GW-->>U: 🎉 下单成功
# 十、速查卡片
┌──────────────────────────────────────────────┐
│ Mermaid 时序图速查 │
├──────────────────────────────────────────────┤
│ 参与者：participant 别名 as 显示名 │
│ actor 别名 as 显示名（人物图标） │
│ │
│ 消息： ->> 同步调用 │
│ -->> 返回/响应 │
│ -> 无箭头 │
│ -x 异常 │
│ │
│ 激活： ->>+B 激活B │
│ -->>-B 返回并关闭激活 │
│ │
│ 注释： Note over A,B: 文字 │
│ Note left of A: 文字 │
│ │
│ 控制： loop ... end 循环 │
│ alt ... else ... end 条件 │
│ opt ... end 可选 │
│ par ... and ... end 并发 │
│ critical ... end 临界区 │
│ break ... end 中断 │
│ │
│ 编号： autonumber │
└──────────────────────────────────────────────┘
🏃 下一篇：类图与ER图 (opens new window)——类定义、继承、组合、聚合、泛型、实体关系。
上次更新: 2026/07/14, 11:06:55
