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-->>用户: 下单成功

1
2
3
4
5
6
7
8
9
10
11
12

participant 别名 as 显示名称    显式声明
participant 别名                仅别名（名称=别名）

1
2

# 2.2 六种消息箭头

语法	含义	说明
`->>`	实线实心箭头	同步请求/调用
`-->>`	虚线实心箭头	响应/返回
`->`	实线无箭头	数据传递
`-->`	虚线无箭头	异步消息
`-x`	实线叉箭头	失败/异常
`-)`	实线半圆箭头	异步消息（另一种）

sequenceDiagram
    A->>B: 同步调用
    B-->>A: 返回结果
    C-->D: 异步消息
    E-xF: 调用失败

1
2
3
4
5

# 2.3 激活（Activations）

+ 和 - 控制参与者的生命线激活：

sequenceDiagram
    Client->>+Server: 请求数据
    Server->>+DB: 查询
    DB-->>-Server: 返回结果
    Server-->>-Client: 响应

1
2
3
4
5

语法	效果
`->>+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右侧的注释

1
2
3
4
5

Note over A,B: 覆盖A和B
Note left of A: A左侧
Note right of B: B右侧

1
2
3

# 四、循环（Loop）

sequenceDiagram
    爬虫->>+网站: 请求第1页
    网站-->>-爬虫: 返回数据
    
    loop 翻页爬取
        爬虫->>+网站: 请求下一页
        网站-->>-爬虫: 返回数据
    end

1
2
3
4
5
6
7
8

loop 循环说明
    消息体
end

1
2
3

# 五、条件分支（Alt / Else / Opt）

# 5.1 Alt：二选一

sequenceDiagram
    用户->>系统: 上传头像
    alt 文件小于 5MB
        系统-->>用户: 上传成功
    else 文件超过限制
        系统-->>用户: 提示文件过大
    end

1
2
3
4
5
6
7

# 5.2 Opt：可选分支

sequenceDiagram
    用户->>系统: 提交订单
    opt 使用了优惠券
        系统->>优惠券服务: 核销优惠券
        优惠券服务-->>系统: 核销成功
    end
    系统-->>用户: 下单成功

1
2
3
4
5
6
7

# 六、并发（Par / And / Critical）

sequenceDiagram
    应用->>+服务: 初始化首页
    
    par 并发加载
        服务->>+商品服务: 获取商品列表
        商品服务-->>-服务: 商品数据
    and
        服务->>+用户服务: 获取用户信息
        用户服务-->>-服务: 用户数据
    and
        服务->>+广告服务: 获取广告
        广告服务-->>-服务: 广告数据
    end
    
    服务-->>-应用: 首页数据聚合完成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

par [说明]
    并发操作1
and
    并发操作2
end

1
2
3
4
5

# 七、实战：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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 八、自动编号

sequenceDiagram
    autonumber
    用户->>系统: 提交订单
    系统->>系统: 校验库存
    系统->>支付: 发起支付
    支付-->>用户: 支付结果
    系统->>物流: 创建运单

1
2
3
4
5
6
7

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: 🎉 下单成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 十、速查卡片

┌──────────────────────────────────────────────┐
│              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                            │
└──────────────────────────────────────────────┘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

🏃 下一篇：类图与ER图——类定义、继承、组合、聚合、泛型、实体关系。

#Mermaid #时序图 #架构图

上次更新: 2026/06/07, 09:20:35

← Mermaid 流程图完全指南 Mermaid 类图与 ER 图→