markdown 画图总结

整理了一份 Mermaid 时序图（Sequence Diagram）最全语法详解，涵盖所有常用关键字、箭头类型、控制结构，并附带可直接运行的示例代码。可以将其作为速查手册，在支持 Mermaid 的 Markdown 编辑器中直接渲染。

一、基本骨架

mermaid语法复制代码

sequenceDiagram
    participant A
    participant B
    A->>B: Hello

sequenceDiagram participant A participant B A->>B: Hello

二、参与者声明

关键字：

participant ------ 矩形框（系统组件）
actor ------ 火柴人（用户/外部角色）
别名：as
创建顺序：可手动排序，未声明的参与者按消息出现顺序自动创建（矩形）。

mermaid语法复制代码

sequenceDiagram
    actor U as "用户"
    participant F as "前端"
    participant B as "后端"

sequenceDiagram actor U as "用户" participant F as "前端" participant B as "后端"

说明： 可通过 as 为长名称起短别名，显示时使用引号内的完整名称。

三、消息与箭头

语法	箭头样式	含义
`->>`	实线实心箭头	同步请求
`-->>`	虚线实心箭头	返回/响应
`-)`	实线半开箭头	异步消息
`--)`	虚线半开箭头	异步返回
`->>`	实线无箭头	仅线条（无箭头）
`--`	虚线无箭头	仅虚线
`-x`	实线带 X 箭头	结束消息
`--x`	虚线带 X 箭头	异步结束
`-)>`	实线半开箭头（新）	异步带实心尖
`--)`	虚线半开箭头	异步返回

示例：

mermaid语法复制代码

sequenceDiagram
    A->>B: 同步调用
    A-)B: 异步通知
    B-->>A: 返回数据
    B--x A: 关闭连接

sequenceDiagram A->>B: 同步调用 A-)B: 异步通知 B-->>A: 返回数据 B--x A: 关闭连接

四、激活与销毁（生命线）

表示对象正在处理的时间段。

显式语法： activate / deactivate
简写： + 激活，- 取消激活（也可直接在箭头语法中使用）
栈式激活： 允许多层嵌套

mermaid语法复制代码

sequenceDiagram
    Client->>+Server: 请求 (激活)
    Server->>+DB: 查询数据库
    DB-->>-Server: 返回结果
    Server-->>-Client: 响应 (取消激活)

sequenceDiagram Client->>+Server: 请求 (激活) Server->>+DB: 查询数据库 DB-->>-Server: 返回结果 Server-->>-Client: 响应 (取消激活)

栈式示例：

mermaid语法复制代码

sequenceDiagram
    Client->>+Server: 任务1
    Server->>+Helper: 调用助手
    Helper-->>-Server: 完成
    Server->>+Helper: 再次调用
    Helper-->>-Server: 完成
    Server-->>-Client: 总完成

sequenceDiagram Client->>+Server: 任务1 Server->>+Helper: 调用助手 Helper-->>-Server: 完成 Server->>+Helper: 再次调用 Helper-->>-Server: 完成 Server-->>-Client: 总完成

五、注释（Note）

Note left of / right of：放在参与者生命线左侧/右侧
Note over：覆盖在单/多参与者上方
可跨多个参与者：Note over A,B

mermaid语法复制代码

sequenceDiagram
    participant A
    participant B
    Note left of A: 左侧说明
    Note right of B: 右侧说明
    Note over A: 覆盖A
    Note over A,B: 同时跨越A和B

sequenceDiagram participant A participant B Note left of A: 左侧说明 Note right of B: 右侧说明 Note over A: 覆盖A Note over A,B: 同时跨越A和B

六、控制结构

6.1 循环 `loop`

mermaid语法复制代码

sequenceDiagram
    Client->>Server: 登录
    loop 每5秒重试
        Server-->>Client: 等待确认
    end

sequenceDiagram Client->>Server: 登录 loop 每5秒重试 Server-->>Client: 等待确认 end

6.2 条件分支 `alt` / `else`

mermaid语法复制代码

sequenceDiagram
    Client->>Server: 提交订单
    alt 库存充足
        Server-->>Client: 下单成功
    else 库存不足
        Server-->>Client: 下单失败
    end

sequenceDiagram Client->>Server: 提交订单 alt 库存充足 Server-->>Client: 下单成功 else 库存不足 Server-->>Client: 下单失败 end

6.3 可选分支 `opt`

mermaid语法复制代码

sequenceDiagram
    Client->>Server: 获取数据
    opt 已登录
        Server->>Cache: 读取缓存
    end

sequenceDiagram Client->>Server: 获取数据 opt 已登录 Server->>Cache: 读取缓存 end

6.4 并行 `par` / `and`

mermaid语法复制代码

sequenceDiagram
    Client->>Server: 批量处理
    par 任务A
        Server->>DB: 写日志
    and 任务B
        Server->>Queue: 发消息
    end

sequenceDiagram Client->>Server: 批量处理 par 任务A Server->>DB: 写日志 and 任务B Server->>Queue: 发消息 end

6.5 关键区域 `critical` / `option`

mermaid语法复制代码

sequenceDiagram
    Client->>Server: 转账
    critical 必须成功
        Server->>Bank: 扣款
        Bank-->>Server: 扣款成功
    option 超时
        Server-->>Client: 超时错误
    end

sequenceDiagram Client->>Server: 转账 critical 必须成功 Server->>Bank: 扣款 Bank-->>Server: 扣款成功 option 超时 Server-->>Client: 超时错误 end

6.6 中断 `break`

mermaid语法复制代码

sequenceDiagram
    Client->>Server: 发起请求
    break 权限不足
        Server-->>Client: 拒绝访问
    end
    Server->>DB: 正常处理

sequenceDiagram Client->>Server: 发起请求 break 权限不足 Server-->>Client: 拒绝访问 end Server->>DB: 正常处理

七、参与者分组 `box`

将多个参与者用矩形框分组，支持背景透明或纯色。

mermaid语法复制代码

sequenceDiagram
    box 前端团队 #lightblue
        participant Alice
        participant Bob
    end
    box 后端团队
        participant Charlie
    end
    Alice->>Charlie: 跨组通信

sequenceDiagram box 前端团队 #lightblue participant Alice participant Bob end box 后端团队 participant Charlie end Alice->>Charlie: 跨组通信

八、背景高亮 `rect`

为一段交互区域添加背景色，支持 rgb/hex 及透明度。

mermaid语法复制代码

sequenceDiagram
    participant U as User
    rect rgb(200, 220, 255)
        U->>+Server: 登录流程
        Server-->>-U: 成功
    end
    rect rgba(255, 200, 200, 0.3)
        U->>Server: 后续操作
    end

sequenceDiagram participant U as User rect rgb(200, 220, 255) U->>+Server: 登录流程 Server-->>-U: 成功 end rect rgba(255, 200, 200, 0.3) U->>Server: 后续操作 end

九、参与者创建与销毁

动态显示对象的生灭。

mermaid语法复制代码

sequenceDiagram
    Client->>+Server: 新建用户
    Note over Client,Server: 创建参与者 User
    Server->>+User: 初始化
    User-->>-Server: 就绪
    Note over Client,Server: 销毁参与者 User
    Server-->>-Client: 用户已删除

sequenceDiagram Client->>+Server: 新建用户 Note over Client,Server: 创建参与者 User Server->>+User: 初始化 User-->>-Server: 就绪 Note over Client,Server: 销毁参与者 User Server-->>-Client: 用户已删除

十、自动编号 `autonumber`

开启：autonumber
关闭：autonumber off
恢复：autonumber
可设置起始值：autonumber 10

mermaid语法复制代码

sequenceDiagram
    autonumber
    Alice->>Bob: 第一步
    Bob->>Charlie: 第二步
    autonumber off
    Charlie-->>Alice: 无编号返回
    autonumber 100
    Alice->>Charlie: 新编号开始

sequenceDiagram autonumber Alice->>Bob: 第一步 Bob->>Charlie: 第二步 autonumber off Charlie-->>Alice: 无编号返回 autonumber 100 Alice->>Charlie: 新编号开始

十一、链接 `link`

给参与者添加可点击的超链接，支持 @ 分隔，可定义工具提示。

mermaid语法复制代码

---
config:
  sequence:
    showSequenceNumbers: false
---
sequenceDiagram
    participant A as Alice
    link A: Dashboard @ https://alice.example.com
    link A: GitHub @ https://github.com/alice {tooltip: "点击查看源码"}
    A->>B: 你好

--- config: sequence: showSequenceNumbers: false --- sequenceDiagram participant A as Alice link A: Dashboard @ https://alice.example.com link A: GitHub @ https://github.com/alice {tooltip: "点击查看源码"} A->>B: 你好

十二、多行消息与换行

消息内容中可以使用 <br> 进行换行，部分渲染器支持。

mermaid语法复制代码

sequenceDiagram
    A->>B: 第一行<br>第二行

sequenceDiagram A->>B: 第一行
第二行

十三、注释隐藏（不会被渲染）

使用 %% 开头的行作为注释。

mermaid语法复制代码

sequenceDiagram
    %% 这是一行注释，不会被渲染
    A->>B: Hello

sequenceDiagram %% 这是一行注释，不会被渲染 A->>B: Hello

十四、综合示例

结合以上大部分特性，模拟一个完整的用户注册登录时序：

mermaid语法复制代码

sequenceDiagram
    autonumber
    actor U as 用户
    participant W as Web前端
    participant S as 后端服务
    participant DB as 数据库

    Note over U,DB: 注册流程
    U->>W: 填写注册信息
    W->>+S: POST /register
    S->>S: 密码加密
    S->>+DB: INSERT 用户
    DB-->>-S: 成功
    S-->>-W: 注册成功
    W-->>U: 跳转登录页

    Note over U,DB: 登录与初始化
    U->>W: 输入账号密码
    W->>+S: POST /login
    S->>DB: 查询用户
    DB-->>S: 返回记录
    S-->>W: 返回 JWT
    W->>+S: GET /profile (Token)
    S->>DB: 查询资料
    DB-->>S: 资料数据
    S-->>-W: 用户JSON
    W-->>U: 展示首页

sequenceDiagram autonumber actor U as 用户 participant W as Web前端 participant S as 后端服务 participant DB as 数据库 Note over U,DB: 注册流程 U->>W: 填写注册信息 W->>+S: POST /register S->>S: 密码加密 S->>+DB: INSERT 用户 DB-->>-S: 成功 S-->>-W: 注册成功 W-->>U: 跳转登录页 Note over U,DB: 登录与初始化 U->>W: 输入账号密码 W->>+S: POST /login S->>DB: 查询用户 DB-->>S: 返回记录 S-->>W: 返回 JWT W->>+S: GET /profile (Token) S->>DB: 查询资料 DB-->>S: 资料数据 S-->>-W: 用户JSON W-->>U: 展示首页

这份总结覆盖了 Mermaid 时序图中当下几乎所有可用的语法。如果在特定编辑器（如 VS Code、Notion、Obsidian）中无法渲染某项语法，可能是版本差异，可尝试升级 Mermaid 版本或查看该平台的支持情况。

markdown 画图总结

一、基本骨架

二、参与者声明

三、消息与箭头

四、激活与销毁（生命线）

五、注释（Note）

六、控制结构

6.1 循环 loop

6.2 条件分支 alt / else

6.3 可选分支 opt

6.4 并行 par / and

6.5 关键区域 critical / option

6.6 中断 break

七、参与者分组 box

八、背景高亮 rect

九、参与者创建与销毁

十、自动编号 autonumber

十一、链接 link

十二、多行消息与换行

十三、注释隐藏（不会被渲染）

十四、综合示例

6.1 循环 `loop`

6.2 条件分支 `alt` / `else`

6.3 可选分支 `opt`

6.4 并行 `par` / `and`

6.5 关键区域 `critical` / `option`

6.6 中断 `break`

七、参与者分组 `box`

八、背景高亮 `rect`

十、自动编号 `autonumber`

十一、链接 `link`