Mermaid时序图

本篇继 [[Mermaid思维导图]]、[[Mermaid状态图]],学习 Mermaid 时序图

核心语法:谁跟谁说话

时序图的代码就像写剧本。基本句式: A->>B: 你好啊

  • participant:定义演员。
  • ->>:实线箭头(发指令)。
  • -->>:虚线箭头(回消息)。
1
2
3
4
5
6
sequenceDiagram
    participant DAS as 🖥️工控机
    participant CEMS as ⚙️分析仪

    DAS->>CEMS: 1. 现在的浓度是多少?(Modbus请求)
    CEMS-->>DAS: 2. 是 35.5 mg/m3 (返回数据)

进阶语法:加个背景色 (Loop / Alt)

只有对话太单调,有时候需要表示“循环”或者“特殊情况”。

  • loop … end:表示一直做某事。
  • alt … else … end:表示“如果…否则…” (Alternative)。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
sequenceDiagram
    participant P as 采样泵
    participant S as 传感器

    loop 每秒一次
        P->>S: 抽气
        S-->>S: 读取光强
    end
    
    alt 光强太低
        S->>P: 报警!停止抽气!
    else 光强正常
        S->>P: 继续工作
    end
sequenceDiagram participant P as 采样泵 participant S as 传感器 loop 每秒一次 P->>S: 抽气 S-->>S: 读取光强 end alt 光强太低 S->>P: 报警!停止抽气! else 光强正常 S->>P: 继续工作 end

避坑指南

  • 箭头方向:
    • ->> 是发出去(实线),-->> 是回话(虚线)。
    • 千万别写成 -->(这是流程图的写法),虽然有时候能混过去,但在时序图里不规范。
  • 别名 (as) 很重要:
    • 如果名字太长(比如“脱硝出口 CEMS 分析仪主控板”),一定要用 participant A as … 这种写法,否则后面的代码会写得你想哭。
  • 顺序决定站位:
    • 代码里谁先出现(participant 定义的顺序),图上谁就站在左边。通常我们把“发起者”(比如电脑)放在最左边。

小结

遇到什么问题? 用什么图? 核心思考 代码关键词
我要拆解结构
(如:这台机器由什么组成?)
Mindmap
(思维导图)
分类
(包含关系)
mindmap
我要理清状态
(如:故障了怎么恢复?)
StateDiagram
(状态图)
变化
(从 A 变 B)
stateDiagram-v2
我要搞懂通讯
(如:软件怎么控制硬件?)
Sequence
(时序图)
时间
(谁先谁后)
sequenceDiagram
Licensed under CC BY-NC-SA 4.0