【Mermaid 语法详细教程 02】时序图 SequenceDiagram

时序图 sequenceDiagram

时序图中的事件和信息依找上下关系依次发生

一个简单的例子：

sequenceDiagram
    王大爷->>李大婶: 早啊！
    李大婶->>王大爷: 早！

王大爷 李大婶 早啊！ 1 早！ 2 王大爷 李大婶

可以看到，上下关系标志着发生前后的顺序关系

参与者 participants

时序图中的参与者可以单独定义，也可以自动识别，效果是一样的，单独定义一般是要取别名的情况,取别名的方法也在下面例子中提到：

sequenceDiagram
	participant A as 王大爷
	participant B as 李大婶
	
	%% 以下可以直接用别名替代
    A->>B: 早啊！
    B->>A: 早！

王大爷 李大婶 早啊！ 1 早！ 2 王大爷 李大婶

sequenceDiagram
    王大爷->>李大婶: 早啊！
    李大婶->>王大爷: 早！

王大爷 李大婶 早啊！ 1 早！ 2 王大爷 李大婶

沟通线形 types of arrows

There are six types of arrows currently supported:

Type	Description
->	Solid line without arrow
-->	Dotted line without arrow
->>	Solid line with arrowhead
-->>	Dotted line with arrowhead
-x	Solid line with a cross at the end
--x	Dotted line with a cross at the end.
-)	Solid line with an open arrow at the end (async)
--)	Dotted line with a open arrow at the end (async)

Alice Bob -> 是无箭头实线 1 --> 是无箭头虚线 2 ->> 是有箭头实线 3 -->> 是有箭头虚线 4 -x 是带X实线 5 --x 是带X虚线 6 Alice Bob

激活 activate

用activate 和 deactivate 来标记激活区域

sequenceDiagram
	participant A as 老板
	participant B as 员工
	participant C as 老婆
	A ->> B : 把这个事情做一下
	activate B
	B ->> A : 老板，我干完了！
	A ->> B : 再把这个事情做一下
	B ->> A : 老板，我干完了！
	A ->> B : 行，下班吧
	deactivate B
	B ->> C : 媳妇我下班啦

老板 员工 老婆 把这个事情做一下 1 老板，我干完了！ 2 再把这个事情做一下 3 老板，我干完了！ 4 行，下班吧 5 媳妇我下班啦 6 老板 员工 老婆

激活是可以重复的

sequenceDiagram
	participant 测试
	participant 开发
	participant 产品经理
	产品经理 ->> 开发 : 这个功能实现一下
	activate 开发
	开发 ->> 产品经理 : 知道了
	测试 ->> 开发 : 这个BUG改一下
	activate 开发
	开发 ->> 测试 : 恩，我知道了，等着吧
	开发 ->> 测试 : 改完了，你看看
	deactivate 开发
	开发 ->> 产品经理 : 搞完了
	deactivate 开发

测试 开发 产品经理 这个功能实现一下 1 知道了 2 这个BUG改一下 3 恩，我知道了，等着吧 4 改完了，你看看 5 搞完了 6 测试 开发 产品经理

可以用在箭头符号后加上+和-的方法来标志激活状态，但是要注意，+号是使得接收者的状态被激活，-号是指发出者的状态被取消（此时发出者必须有状态可以被取消，不然会发生语法错误），举例如下:

sequenceDiagram
	A -->>+ B : TEXT
	A -->>  B : TEXT	
	B -->>- A : TEXT
	B -->>  A : TEXT

A B TEXT 1 TEXT 2 TEXT 3 TEXT 4 A B

标签 Notes

可以在参加者旁边附上标签，语法为 Note + right of / left of + participant

sequenceDiagram
    participant 柯南
    Note right of 柯南: 永远长不大
    Note left of 柯南: 走哪哪有事
    Note right of 柯南: 神力足球

柯南 永远长不大 走哪哪有事 神力足球 柯南

也可以创建横跨两个参加者的Notes，语法为

Note over participant1,participanrt2 : 内容

如果想横跨多个参加者，选取最外侧的两个参加者即可

sequenceDiagram
	participant A
	participant B
    participant C
    Note over A,C : this is a note
    A ->> C : where is the note?

A B C this is a note where is the note? 1 A B C

循环 LOOP

语法为

1. loop + 提示语
2. 循环内容
3. end

sequenceDiagram
    loop 每一个小时问一次
        黄牛->>顾客: 票子要不啦
    end

黄牛 顾客 票子要不啦 1 loop [每一个小时问一次] 黄牛 顾客

替换项和可选项 alt opt

替换项alt表示在框内选择一种可能发生的情况

可选项opt表示一种可能发生的情况

基本类似上述loop的语法，所以只做示范

sequenceDiagram
	participant A as 医生
	Note left of A : 某些部分庸医
	participant B as 患者
	A ->> B : 请问你有什么状况？
	
	%% alt 的用法
	alt 咳嗽
	B ->> A : 我觉得嗓子不太舒服
	A ->> B: 那你去拍个片子吧
	else 腹泻
	B ->> A : 我觉得肚子不太舒服、
	A ->> B: 那你去拍个片子吧
	else 耳鸣
	B ->> A : 我觉得耳朵不太舒服
	A ->> B: 那你去拍个片子吧
	end
	
	%% opt 的用法
	opt 反正就是拍片子
	A ->> B: 那你去拍个片子吧
	end

医生 患者 某些部分庸医 请问你有什么状况？ 1 我觉得嗓子不太舒服 2 那你去拍个片子吧 3 我觉得肚子不太舒服、 4 那你去拍个片子吧 5 我觉得耳朵不太舒服 6 那你去拍个片子吧 7 alt [咳嗽] [腹泻] [耳鸣] 那你去拍个片子吧 8 opt [反正就是拍片子] 医生 患者

并行项 Parallel

表示同时发生的事情，框内事件同时发生，不存在先后关系

1. par + 提示语
   1. 事件1
   2. 事件2
   3. ……
2. and + 提示语
   1. 事件1
   2. 事件2
   3. ……
3. end

sequenceDiagram

    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

Alice Bob John Hello guys! 1 Hello guys! 2 par [Alice to Bob] [Alice to John] Hi Alice! 3 Hi Alice! 4 Alice Bob John

并行项可以嵌套

sequenceDiagram
    par 主管 吩咐 副主管
        主管->>副主管: 我的助理来帮你，今天给我做完
    and 主管 吩咐 助理
        主管->>助理: 你去帮副主管处理一下
        par 副主管 吩咐 开发
            副主管->>开发: 今天把这个需求实现一下
        and 副主管 吩咐 测试
            副主管->>测试: 准备测试一下原型
        end
        
    end
    开发 -->> 测试 : 第一版原型写好了，你测一下
    par 测试 怒骂 开发
    	测试 -->> 开发 : 你搁着写BUG呢？
    and 测试 报告 副主管
    	测试 -->> 副主管 : 这开发真不行，早点开了, 我来干
    and 测试 报告 主管
     	测试 -->> 主管 : 这开发真不行，早点开了，我来干
    end

主管 副主管 助理 开发 测试 我的助理来帮你，今天给我做完 1 你去帮副主管处理一下 2 今天把这个需求实现一下 3 准备测试一下原型 4 par [副主管 吩咐 开发] [副主管 吩咐 测试] par [主管 吩咐 副主管] [主管 吩咐 助理] 第一版原型写好了，你测一下 5 你搁着写BUG呢？ 6 这开发真不行，早点开了, 我来干 7 这开发真不行，早点开了，我来干 8 par [测试 怒骂 开发] [测试 报告 副主管] [测试 报告 主管] 主管 副主管 助理 开发 测试

背景高亮 Background Highlighting

改变某些区域的颜色，语法如下

1. rect rgb(XXX,XXX,XXX)
2. 内容
3. end

举例如下

sequenceDiagram
	participant A as 老板
	participant B as 员工
	rect rgb(191, 223, 255)
	note right of A : 老板对员工的问询
	A -->> B : 任务完成了吗
	B -->> A : 还没完成
	rect rgb(200, 150, 255)
	note left of B : 员工对老板的解释
	B -->> A : 主要是需求太复杂
	end
	end

老板 员工 老板对员工的问询 任务完成了吗 1 还没完成 2 员工对老板的解释 主要是需求太复杂 3 老板 员工

注释 comments

和流程图的注释一样，可以参考，用%%开头

流程图序号 SequenceDiagramNumbers

用autonumber命令给流程图中的对话自动编号

sequenceDiagram

    autonumber
    
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Alice John Bob Hello John, how are you? 1 Fight against hypochondria 2 loop [Healthcheck] Rational thoughts! Great! 3 How about you? 4 Jolly good! 5 Alice John Bob

相关资料

其他教程链接：
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）_NoEatMe的博客-CSDN博客

主要参考Mermaid官方文档：
Sequence diagrams | Mermaid