Mermaid时序图

Fri, 19 Dec 2025 00:00:00 +0000

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

核心语法：谁跟谁说话

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

participant：定义演员。
->>：实线箭头（发指令）。
-->>：虚线箭头（回消息）。

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)。

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`

Mermaid on Coffity's Blog

Mermaid时序图

核心语法：谁跟谁说话

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

避坑指南

小结