教程 •

Mermaid 序列图教程

学习如何使用 Mermaid 创建序列图，展示对象之间的交互和消息传递。

什么是序列图？

序列图（Sequence Diagram）是一种交互图，展示了对象之间发送消息的时间顺序。它非常适合记录系统流程、API 交互和业务逻辑。

基础语法

序列图以 sequenceDiagram 关键字开始。

参与者（Participants）

你可以直接使用名称，也可以使用 participant 显式定义以控制顺序或添加别名。

代码示例：

sequenceDiagram
    participant U as 用户
    participant S as 服务器
    U->>S: 发起请求
    S-->>U: 返回响应

渲染结果：

sequenceDiagram
    participant U as 用户
    participant S as 服务器
    U->>S: 发起请求
    S-->>U: 返回响应

消息类型

Mermaid 支持多种消息线条样式：

  • ->: 无箭头的实线
  • ->>: 带箭头的实线
  • -->>: 带箭头的虚线
  • -x: 带叉的实线（表示消息丢失）

代码示例：

sequenceDiagram
    Alice->John: 实线
    Alice-->>John: 虚线
    Alice->>John: 带箭头实线
    Alice--xJohn: 丢失的消息

渲染结果：

sequenceDiagram
    Alice->John: 实线
    Alice-->>John: 虚线
    Alice->>John: 带箭头实线
    Alice--xJohn: 丢失的消息

逻辑控制（Alt, Opt, Loop）

你可以像编程语言一样使用逻辑块：

  • alt/else: 条件分支
  • opt: 可选步骤
  • loop: 循环

代码示例：

sequenceDiagram
    用户->>系统: 支付
    alt 余额充足
        系统-->>用户: 支付成功
    else 余额不足
        系统-->>用户: 支付失败
    end

渲染结果：

sequenceDiagram
    用户->>系统: 支付
    alt 余额充足
        系统-->>用户: 支付成功
    else 余额不足
        系统-->>用户: 支付失败
    end

注释（Notes）

你可以在图中添加注释：

代码示例：

sequenceDiagram
    Note over 用户,服务器: 建立安全连接
    用户->>服务器: Hello

渲染结果：

sequenceDiagram
    Note over 用户,服务器: 建立安全连接
    用户->>服务器: Hello

立即练习

在我们的 Mermaid 在线编辑器 中，你可以尝试以上所有语法，并快速生成你自己的序列图。

相关文章