时序图（Sequence Diagram）是描述对象之间消息传递顺序的交互图，广泛应用于系统架构设计、API 文档编写和业务流程梳理。与流程图侧重"步骤顺序"不同，时序图强调"参与者之间的交互时序"，特别适合展示分布式系统、微服务架构和前后端通信场景。
本文将从基础语法到高级特性，系统讲解如何用 Mermaid 绘制专业的时序图。
时序图的核心概念
时序图由四个基本要素构成：
- 参与者（Participant）：交互的实体，可以是用户、服务、模块或数据库
- 生命线（Lifeline）：参与者下方的虚线，表示对象存在的时间范围
- 消息（Message）：参与者之间传递的信息，用带箭头的连线表示
- 激活条（Activation）：生命线上的矩形条，表示对象正在执行操作的时段
理解这些概念后，你就可以用 Mermaid 的简洁语法来表达复杂的交互逻辑。
基础语法入门
声明参与者
每个时序图以 sequenceDiagram 关键字开头，然后用 participant 声明参与者：
sequenceDiagram
participant A as 用户
participant B as 前端应用
participant C as 后端 API
participant D as 数据库
as 关键字用于给参与者设置别名，让图表更易读。你也可以使用简写形式：
sequenceDiagram
actor 用户
participant 前端应用
participant 后端 API
participant 数据库
使用 actor 声明的参与者会显示为小人图标，适合表示人类用户。
发送消息
消息语法非常简单：参与者A ->> 参与者B: 消息内容
sequenceDiagram
participant 用户
participant 系统
用户 ->> 系统: 提交登录请求
系统 ->> 用户: 返回登录结果
消息箭头类型
Mermaid 提供了多种箭头样式来表达不同类型的消息：
| 语法 | 样式 | 含义 |
|---|---|---|
->> | 实心箭头 | 同步调用 |
-->> | 虚线箭头 | 返回消息 |
-> | 细实线箭头 | 异步消息 |
--x | 虚线叉号 | 删除/销毁消息 |
-x | 实线叉号 | 同步删除 |
->>+ | 实心箭头 + 激活 | 开始激活目标对象 |
->>- | 实心箭头 + 结束激活 | 结束激活目标对象 |
sequenceDiagram
participant A
participant B
A ->>+ B: 调用服务
B -->>- A: 返回结果
A ->> B: 异步通知
进阶特性
激活条管理
激活条表示对象正在处理请求的时间段，可以通过 + 和 - 符号自动管理，也可以使用 activate 和 deactivate 关键字显式控制：
sequenceDiagram
participant 客户端
participant 服务器
participant 缓存
客户端 ->>+ 服务器: GET /api/data
服务器 ->>+ 缓存: 查询缓存
缓存 -->>- 服务器: 返回数据
服务器 -->>- 客户端: 响应结果
自调用消息
对象向自己发送消息的场景非常常见，例如方法内部调用：
sequenceDiagram
participant 订单服务
订单服务 ->> 订单服务: 验证订单参数
订单服务 ->> 订单服务: 计算订单金额
创建与销毁参与者
动态创建和销毁对象可以让时序图更精确地表达对象生命周期：
sequenceDiagram
participant 主线程
participant 工作线程
主线程 ->>+ 工作线程: createThread()
Note over 工作线程: 线程开始运行
工作线程 -->>- 主线程: 任务完成
destroy 工作线程
循环与条件分支
对于包含重复操作或条件判断的流程，可以使用 loop、alt、opt 等关键字：
sequenceDiagram
participant 客户端
participant 服务器
loop 重试 3 次
客户端 ->> 服务器: 发送请求
alt 请求成功
服务器 -->> 客户端: 200 OK
else 请求失败
服务器 -->> 客户端: 500 Error
end
end
| 关键字 | 用途 | 说明 |
|---|---|---|
loop | 循环 | 包裹重复执行的交互 |
alt / else / end | 条件分支 | 多分支条件判断，类似 if-else |
opt / end | 可选操作 | 可能执行也可能不执行的交互 |
par / and / end | 并行操作 | 同时发生的多个交互 |
注释与说明
使用 Note 关键字为时序图添加注释，增强可读性：
sequenceDiagram
participant A
participant B
Note left of A: 客户端发起请求
A ->> B: 调用接口
Note right of B: 服务端处理中
B -->> A: 返回数据
Note over A, B: 单次请求完成
实战案例：用户下单流程
让我们综合运用以上知识，绘制一个完整的电商下单时序图：
sequenceDiagram
actor 用户
participant 前端
participant 订单服务
participant 库存服务
participant 支付网关
participant 数据库
用户 ->> 前端: 提交订单
前端 ->> 订单服务: 创建订单请求
订单服务 ->> 库存服务: 检查库存
alt 库存充足
库存服务 -->> 订单服务: 库存锁定成功
订单服务 ->> 支付网关: 发起支付
alt 支付成功
支付网关 -->> 订单服务: 支付确认
订单服务 ->> 数据库: 保存订单状态
数据库 -->> 订单服务: 写入成功
订单服务 -->> 前端: 订单创建成功
前端 ->> 用户: 显示成功页面
else 支付失败
支付网关 -->> 订单服务: 支付失败
订单服务 ->> 库存服务: 释放库存
订单服务 -->> 前端: 订单创建失败
前端 ->> 用户: 提示支付失败
end
else 库存不足
库存服务 -->> 订单服务: 库存不足
订单服务 -->> 前端: 创建失败
前端 ->> 用户: 提示库存不足
end
这个案例展示了真实业务场景中常见的多服务协作、条件分支和异常处理，是学习时序图的最佳实践。
最佳实践与常见问题
命名规范
- 参与者名称应简洁明了，优先使用业务术语而非技术术语
- 消息描述使用动词开头，明确表达动作含义
- 对于复杂的系统，可以添加前缀区分服务层级，如
OrderService或订单服务
控制图表复杂度
- 单张时序图的参与者数量建议控制在 6 个以内
- 超过 8 个参与者时，考虑拆分为多张图或使用子流程抽象
- 嵌套的
alt分支不宜超过 2 层，避免可读性下降
常见渲染问题
- 中文显示异常：确保文件编码为 UTF-8，某些渲染器需要指定中文字体
- 长消息截断：适当缩短消息文本，或使用
break换行 - 图表过宽：减少参与者数量，或将横向布局改为纵向分组
总结
时序图是技术文档中不可或缺的表达工具，Mermaid 让创建时序图变得像写代码一样简单高效。掌握本文介绍的基础语法（参与者声明、消息传递）和高级特性（激活条、条件分支、循环、注释）后，你就能够绘制出清晰、专业的系统交互图。
无论是编写 API 文档、设计系统架构，还是梳理业务流程，时序图都能帮助你以更直观的方式传达信息。记住，好的时序图不在于包含多少细节，而在于能否让阅读者快速理解交互逻辑。
需要把 Mermaid 时序图导出为高清图片插入文档？使用 Mermaid2Img，支持实时预览和一键导出 PNG、SVG、PDF，完全在浏览器端处理，保护你的图表代码隐私。