首页 / 技术分享 / Markdown 流程图 /
Markdown 时序图语法详解

Markdown 时序图语法详解

码不停提

2026-02-05
17 次浏览
0 条评论

通过本文档，您可以掌握 Markdown 中绘制时序图的完整语法。时序图是描述系统交互的强有力工具，结合 Mermaid 的简洁语法，可以在 Markdown 文档中轻松创建专业的技术图表。

Markdown 流程图
Markdown
时序图
分享:

时序图简介

时序图（Sequence Diagram）是 UML 中用于展示对象间交互的图表，特别适合描述系统中各组件按时间顺序的消息传递。在 Markdown 中，我们使用 Mermaid 语法来绘制时序图，它能清晰展示：

  • 参与交互的对象
  • 对象间的消息传递顺序
  • 消息的类型（同步/异步）
  • 对象的激活时段

基础语法结构

在 Markdown 中创建时序图，需要使用 ```mermaid 代码块包裹时序图语法：

```mermaid
sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 请求数据
    系统-->>用户: 返回数据
```

参与者定义

1. 显式定义参与者

按显示顺序定义参与者：

sequenceDiagram
    participant A as 客户端
    participant B as 服务器
    participant C as 数据库
    A->>B: HTTP请求
    B->>C: 查询数据
    C-->>B: 返回结果
    B-->>A: HTTP响应

语法说明：

participant 别名 as 显示名称

2. 隐式定义参与者

直接使用参与者名称，Mermaid 会自动按出现顺序排列：

sequenceDiagram
    用户->>登录模块: 提交凭证
    登录模块->>数据库: 验证用户
    数据库-->>登录模块: 验证结果
    登录模块-->>用户: 登录结果

3. 参与者类型

除了默认的矩形参与者，还可以使用其他类型：

sequenceDiagram
    actor 用户
    participant 前端
    participant 后端
    participant 数据库

    用户->>前端: 点击按钮
    前端->>后端: API调用
    后端->>数据库: SQL查询
    数据库-->>后端: 查询结果
    后端-->>前端: JSON响应
    前端-->>用户: 更新界面

消息类型

1. 同步消息（请求）

sequenceDiagram
    客户端->>服务器: 同步请求
    Note right of 服务器: 处理中...
    服务器-->>客户端: 响应
语法 线型 箭头 说明
->> 实线 实心箭头 同步消息
->> 实线 实心箭头 请求消息

2. 异步消息

sequenceDiagram
    客户端->)服务器: 异步请求
    服务器--)客户端: 异步响应
语法 线型 箭头 说明
->) 实线 空心箭头 异步消息
--) 虚线 空心箭头 异步响应

3. 返回消息

sequenceDiagram
    客户端->>服务器: 请求数据
    activate 服务器
    服务器-->>客户端: 返回数据
    deactivate 服务器

4. 自调用消息

sequenceDiagram
    客户端->>客户端: 验证输入
    Note right of 客户端: 内部处理
    客户端->>服务器: 发送数据

激活与失活

1. 基本激活

sequenceDiagram
    客户端->>服务器: 请求处理
    activate 服务器
    服务器->>数据库: 查询
    activate 数据库
    数据库-->>服务器: 返回结果
    deactivate 数据库
    服务器-->>客户端: 返回响应
    deactivate 服务器

2. 简写语法

使用 + 和 - 符号：

sequenceDiagram
    用户->>+API网关: 调用API
    API网关->>+微服务A: 转发请求
    微服务A-->>-API网关: 返回结果
    API网关-->>-用户: 返回响应

循环与条件判断

1. 循环（Loop）

sequenceDiagram
    用户->>系统: 上传多个文件
    loop 每个文件
        系统->>系统: 验证文件格式
        系统->>存储服务: 保存文件
        存储服务-->>系统: 返回URL
    end
    系统-->>用户: 上传完成

2. 条件判断（Alt）

sequenceDiagram
    用户->>系统: 登录请求
    alt 凭证正确
        系统->>数据库: 更新登录状态
        系统-->>用户: 登录成功
    else 凭证错误
        系统-->>用户: 登录失败
    end

3. 可选路径（Opt）

sequenceDiagram
    用户->>购物车: 结算
    opt 使用优惠券
        购物车->>优惠系统: 验证优惠券
        优惠系统-->>购物车: 应用优惠
    end
    购物车->>支付系统: 发起支付

4. 并行处理（Par）

sequenceDiagram
    用户->>系统: 请求页面
    par 并行加载
        系统->>API服务: 获取数据
        and
        系统->>CDN: 加载静态资源
    end
    系统-->>用户: 渲染页面

注释与标注

1. 参与者注释

sequenceDiagram
    Note left of 用户: 系统使用者
    Note right of 服务器: 处理核心业务
    用户->>服务器: 发送请求

2. 消息注释

sequenceDiagram
    客户端->>服务器: POST /api/data
    Note over 客户端,服务器: 发送JSON数据
    服务器-->>客户端: 200 OK
    Note over 服务器,客户端: 返回处理结果

3. 标注区域

sequenceDiagram
    rect rgb(200, 220, 255)
        Note over 客户端,服务器: 认证流程
        客户端->>服务器: 发送Token
        服务器-->>客户端: 验证结果
    end

    rect rgb(220, 255, 220)
        Note over 客户端,服务器: 业务处理
        客户端->>服务器: 业务请求
        服务器-->>客户端: 业务响应
    end

分组操作

1. 逻辑分组

sequenceDiagram
    box "前端" 客户端
        participant Web as 网页
        participant App as 移动端
    end
    box "后端" 服务端
        participant API as API网关
        participant DB as 数据库
    end

    Web->>API: HTTP请求
    App->>API: REST调用
    API->>DB: SQL查询
    DB-->>API: 查询结果
    API-->>Web: HTML响应
    API-->>App: JSON响应

2. 时序分组

sequenceDiagram
    用户->>系统: 开始订单流程

    alt 订单创建
        系统->>库存服务: 检查库存
        库存服务-->>系统: 库存充足
        系统->>订单服务: 创建订单
    else 支付处理
        系统->>支付网关: 发起支付
        支付网关-->>系统: 支付成功
    end

    系统-->>用户: 订单完成

高级功能

1. 自动序号

sequenceDiagram
    autonumber
    用户->>认证服务: 登录
    认证服务->>数据库: 验证用户
    数据库-->>认证服务: 用户信息
    认证服务-->>用户: 返回Token

2. 背景高亮

sequenceDiagram
    participant A as 服务A
    participant B as 服务B
    participant C as 服务C

    A->>B: 请求1
    Note over A,B: 重要交互

    rect rgb(255, 255, 0, 0.1)
        A->>C: 请求2
        C->>B: 请求3
        Note over A,B: 关键路径
    end

    B-->>A: 响应

3. 自定义样式

sequenceDiagram
    participant Client
    participant Server

    Note over Client: 这是客户端
    Note over Server: 这是服务器

    Client->>Server: 同步消息
    Server-->>Client: 返回消息

    %% 自定义样式
    rect rgba(100, 200, 255, 0.1)
        Client->>Server: 另一个消息
    end

完整示例

电商下单流程

```mermaid
sequenceDiagram
    title 电商平台下单时序图
    autonumber

    box "用户端" Client
        participant User as 用户
        participant Browser as 浏览器
    end

    box "服务平台" Services
        participant Gateway as API网关
        participant Order as 订单服务
        participant Payment as 支付服务
        participant Inventory as 库存服务
        participant Notification as 通知服务
    end

    box "外部服务" External
        participant PaymentGateway as 支付网关
        participant SMS as 短信服务
    end

    %% 下单流程
    User->>+Browser: 点击下单
    Browser->>+Gateway: POST /api/orders
    Gateway->>+Inventory: 检查库存
    Inventory-->>-Gateway: 库存充足

    alt 库存不足
        Inventory-->>Gateway: 库存不足
        Gateway-->>Browser: 返回错误
        Browser-->>User: 显示错误提示
    else 库存充足
        Gateway->>+Order: 创建订单
        Order-->>-Gateway: 订单创建成功

        Gateway->>+Payment: 发起支付
        Payment->>+PaymentGateway: 支付请求
        PaymentGateway-->>-Payment: 支付成功
        Payment-->>-Gateway: 支付结果

        par 并行处理
            Gateway->>Inventory: 扣减库存
            and
            Gateway->>Notification: 发送通知
            Notification->>SMS: 发送短信
            SMS-->>Notification: 发送成功
        end

        Gateway-->>Browser: 下单成功
        Browser-->>User: 显示成功页面
    end
```

常见问题

1. 语法错误排查

  • 参与者未定义：确保所有参与者都已定义
  • 语法格式：检查箭头语法是否正确（->>、--)等）
  • 缩进问题：循环、条件等块结构需要正确结束

2. 显示问题

  • 平台兼容性：确保平台支持 Mermaid（GitHub、GitLab、Gitee 等已支持）
  • 版本差异：不同平台可能使用不同版本的 Mermaid

3. 最佳实践

  1. 合理命名：使用有意义的参与者名称
  2. 适度分组：避免过于复杂的时序图
  3. 添加注释：关键步骤添加说明
  4. 保持简洁：一个时序图描述一个主要流程

4. 工具推荐

  • 在线编辑器：Mermaid Live Editor
  • VS Code 插件：Markdown Preview Mermaid Support
  • 文档工具：Typora、Obsidian、Notion

上一篇

Markdown 流程图语法指南

下一篇

Markdown 看板图语法

评论区 (0)

你需要先 登录 后才能发表评论。
还没有人评论，赶快成为第一个吧。