Mermaid序列图(Sequence Diagram)完全指南

Mermaid序列图(Sequence Diagram)完全指南

mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器，支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程图的开发者。 项目地址: https://gitcode.com/gh_mirrors/me/mermaid

什么是序列图？

序列图(Sequence Diagram)是UML中最常用的交互图之一，它通过描述对象之间发送消息的时间顺序来展示多个对象之间的动态协作关系。Mermaid作为一款强大的图表生成工具，提供了简洁的语法来绘制专业的序列图。

基础语法

最简单的序列图

sequenceDiagram
    Alice->>John: 你好John，最近怎么样？
    John-->>Alice: 非常好！
    Alice-)John: 待会见！

这个例子展示了：

• ->> 表示带箭头的实线消息
• -->> 表示带箭头的虚线消息
• -) 表示异步消息（带开放箭头）

参与者定义

参与者可以隐式定义（按出现顺序），也可以显式定义并控制顺序：

sequenceDiagram
    participant 张三
    participant 李四
    李四->>张三: 嗨，张三
    张三->>李四: 你好，李四

使用角色图标

如果想使用人形图标而非矩形框表示参与者：

sequenceDiagram
    actor 张三
    actor 李四
    张三->>李四: 你好
    李四->>张三: 你也好

参与者别名

可以为参与者定义简短的别名：

sequenceDiagram
    participant Z as 张三
    participant L as 李四
    Z->>L: 最近好吗？
    L->>Z: 还不错！

高级功能

参与者生命周期管理

可以动态创建和销毁参与者：

sequenceDiagram
    张三->>李四: 你好吗？
    create participant 王五
    张三->>王五: 嗨，王五！
    destroy 王五
    张三-x王五: 人太多了

分组功能

将相关参与者分组显示：

sequenceDiagram
    box 开发团队
    participant 前端
    participant 后端
    end
    box 测试团队
    participant QA
    end
    前端->>后端: API请求
    后端-->>前端: 返回数据
    QA->>前端: 测试用例

消息类型

Mermaid支持多种消息箭头：

| 类型 | 说明 | |------------|--------------------------| | -> | 实线无箭头 | | --> | 虚线无箭头 | | ->> | 实线带箭头 | | -->> | 虚线带箭头 | | -x | 实线带叉(表示失败) | | --) | 虚线异步箭头 |

激活条

表示对象的活动期：

sequenceDiagram
    客户端->>+服务端: 请求数据
    服务端-->>-客户端: 返回数据

注释

添加说明性文字：

sequenceDiagram
    用户->>系统: 登录
    Note right of 系统: 验证用户凭证
    系统-->>用户: 欢迎页面

流程控制

循环结构

sequenceDiagram
    客户端->>服务端: 请求数据
    loop 每5秒重试
        服务端-->>客户端: 数据加载中...
    end

条件分支

sequenceDiagram
    用户->>系统: 提交订单
    alt 库存充足
        系统->>仓库: 准备发货
    else 库存不足
        系统->>用户: 库存不足通知
    end

并行处理

sequenceDiagram
    par 并行任务
        客户端->>服务A: 请求A
    and
        客户端->>服务B: 请求B
    end

背景高亮

突出显示重要流程：

sequenceDiagram
    rect rgb(200, 150, 255)
    用户->>系统: 关键操作
    系统-->>用户: 操作结果
    end

实用技巧

1. 换行处理：在消息文本中使用<br/>实现换行
2. 特殊字符：使用HTML实体编码显示特殊符号
3. 自动编号：使用autonumber为消息添加序号
4. 弹出菜单：为参与者添加可点击的链接菜单

sequenceDiagram
    autonumber
    participant U as 用户
    participant S as 系统
    link U: 用户手册 @ /docs/user
    U->>S: 请求操作
    S-->>U: 返回结果

总结

Mermaid的序列图语法简洁而强大，能够满足从简单到复杂的各种交互场景建模需求。通过合理运用参与者管理、消息类型、流程控制和可视化增强等功能，可以创建出专业级别的序列图，有效描述系统各组件间的交互行为。

掌握这些语法后，无论是文档编写、系统设计还是架构评审，Mermaid序列图都能成为你表达复杂交互关系的得力工具。

mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器，支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程图的开发者。 项目地址: https://gitcode.com/gh_mirrors/me/mermaid