markdown mermaid序列图

• 2022 年 1 月 13 日
• 筆記
• Markdown, mermaid

序列图（时序图）

序列图是一种交互图，它显示了进程如何相互操作以及按什么顺序操作。

sequenceDiagram
	participant l as 大灰狼
	participant y as 小羊

	l->>y:小坏蛋，弄脏我喝的水
	y->>l:狼先生，你在上游，我在下游
	l->>y:听说去年你说我的坏话
	y->>l:去年我还没出生呢
	l->>y:不是你也是你爸爸，说着就扑上去
	
	%% left or right
	note left of l:对于坏人来说，<br>想做坏事总是有理由的。

基本语法

sequenceDiagram
	 participant A as Mr Black   		：参与者声明（除非需要定义一个简单的别名否则无需声明）
	
	[Actor][Arrow][Actor]:Message text  

• 参与者:participant

参与者默认为participant，所以一般无需显示声明，但当参与者字符比较长时，可以通过显示声明定义一个简单别名，这样可以减少敲键盘的次数。

sequenceDiagram  
    participant A as Mr Black
    participant B as Tom Cat
    
    A->>B:Hello.How are you!
    B->>A:I am fine ,thank you.

• 参与者:actor（由于版本较高，很多mrkdown编辑器不支持，所以就一笔掠过）

如果你特别想使用actor符号而不是带有文本的矩形，你可以使用actor声明参与者。

sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alic

别名

参与者可以有方便的标识符和描述性标示，也就是别名。参与者名称太长的话，就可以用别名来代替。

sequenceDiagram

    participant T as Tom
    participant C as Cat
    T->C: Hello Cat, how are you?
    C->>T: Great!

连接和箭头类型

sequenceDiagram
	participant A as Tom
	participant B as Cat
	note left of A: 测试线形状和箭头
	
	A->B:吃饭了吗？
	B->>A:吃了。
	A-->B:快过年了，回家不？
	B-->>A:新冠肺炎这么严重，回不了。
	A-xB:是啊，回去还得隔离14天。
	B--xA:我靠，隔离14天，假期都没有那么多。

活动

让一个参与者处于活动状态中．通过激活(activate)和取消激活(deactivate)一个参与者来实现.

sequenceDiagram
	participant t as 数学老师
	participant s as 高斯
	
	t->>s:出一个题目：<br>1+2+3+...+100=?
	activate s
		s-->>s:我想想。小case
		s->>t:1+2+3+...+100=5050	
	deactivate s
	t-->>s:0-0,聪明呀。
	s--xt: *_*	

也可以通过在消息箭头上附加 +/- 后缀的快捷表示法(推荐，这种方式更简练)：

sequenceDiagram
	participant t as 数学老师
	participant s as 高斯
	
	t->>+s:出一个题目：<br>1+2+3+...+100=?
	s-->>s:我想想。小case
	s->>-t:1+2+3+...+100=5050	
	t-->>s:0-0,聪明呀。
	s--xt: *_*	

注释

可以向序列图添加注释。语法如下：

Note [ right of | left of | over ] [Paticipant]: Text in note content

eg:

sequenceDiagram
	participant l as 大灰狼
	participant y as 小羊
	participant d as 小狗大侠
	
	%% left or right
	Note left of l:对于坏人来说，<br>想做坏事总是有理由的。
	Note right of y:对于坏人的对策：干或者躲。
	Note over  d:游侠仗义，路见不平一声吼。

跨越2个参与者的注释(最多2个)

语法：

Note [ right of | left of | over ] [Paticipant,Participant]: Text in note content

eg:

sequenceDiagram
	participant l as 大灰狼
	participant y as 小羊
	participant d as 小狗大侠
	
	%% left or right
	note left of l:对于坏人来说，<br>想做坏事总是有理由的。<br>羊肉鲜美呀。
	note over  d,y:羊妹妹，莫怕。
	Note over  l,d:狗哥我路见不平一声吼，大灰狼你赶快给我走

循环

可以在序列图中表示循环。语法如下：

loop Loop text
	... statements ...
end

eg:

sequenceDiagram
	participant t as 先生
	participant s as 书生
	participant k as 礼部
	
	loop 十年寒窗
        t->>+ s:教
        s-->>s:学习&思考
        s->>-t:问

	end
	
	s->>+k:进京赶考，参加秋闱
	k-->>k:出难题，为国选材
	k->>-s:不负有心人<br>状元及第
	
	loop 巡游一天
    	s-->>s:春风得意马蹄疾，<br>一日看尽长安花。
	end

路线选择

可以在序列图中表示选择路径。 语法如下：

alt Describing text
... statements ...
else  Describing text
... statements ...
end

其他以外的选项

opt Describing text
... statements ...
end

eg：

sequenceDiagram
    participant s as 贡士
    participant d as 殿试
    
     s->> d:参加殿试
     alt 一甲
         d->>s:进士及第
      else 二甲
         d->>s:进士出身
      else 三甲
         d->>s:同进士出身
     end
     opt 不在其中
      d--xs:拿下，你不是贡士。
     end

并行

可以显示并行发生的动作。语法如下：

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

并行也可以嵌套。语法如下：

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
	par [actionNn]
	... statements ...
	end
end

eg

sequenceDiagram
	participant t as Tom
	participant k as Kite
	participant b as Black
	par 通知
		t->>k:一块出去玩了？
	and
		t->> b:一块出去玩？
	end
	k->>t:好哦
	b->>t:ok

背景色

可以通过提供彩色背景来突出显示。 语法

rect rgb(0, 255, 0)
... content ...
end

和可以增加透明色

rect rgba(0, 255, 0,.1)
... content ...
end

0.1可以用.1表示。

eg

代码注解

可以在序列图中输入注释，解析器将忽略这些注释。 注释需要单独一行，并且必须以 %%（双百分号）开头。 注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法。

sequenceDiagram
    Alice->>John: 吃饭了没？
    %% this is a comment
    John-->>Alice: 吃了肉夹馍!

自动编号

可以在序列图中的每个连线上加上一个序列号。 通过代码(autonumber)开启自动编号：

sequenceDiagram
	autonumber
	participant k as 老孔
	participant m as 老孟
    k->>m: 吃饭了没？
    m-->>k: 吃了肉夹馍!

autonumber会导致后面的序列图也会自动编号。比如综合举例中，没有显示声明autonumber连线也自动编号了。

综合举例

以第一次中东战争为例：