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 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.

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 T as Tom
participant C as Cat
T->C: Hello Cat, how are you?
C->>T: Great!

连接和箭头类型

类型	描述
->	实线无箭头
-->	虚线无箭头
->>	实线有箭头
-->>	虚线有箭头
-x	实线交叉箭头
--x	虚线交叉箭头
-)	Solid line with an open arrow at the end (async) 版本太高多数markdown编辑器不支持。
--)	Dotted line with a open arrow at the end (async) 版本太高多数markdown编辑器不支持

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天，假期都没有那么多。

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天，假期都没有那么多。
%%A-) B:hello
%%B--)A:ok

活动

让一个参与者处于活动状态中．通过激活(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=?
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: *_*

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:游侠仗义，路见不平一声吼。

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:狗哥我路见不平一声吼，大灰狼你赶快给我走

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

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

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

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
participant s as 贡士
participant d as 殿试

rect rgb(1,150,200)
s->> d:参加殿试
alt 一甲
d->>s:进士及第
else 二甲
d->>s:进士出身
else 三甲
d->>s:同进士出身
end
end

rect rgba(200,100,50,.2)
opt 不在其中
d--xs:拿下，你不是贡士。
end
end

代码注解

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

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

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

自动编号

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

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

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

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

综合举例

以第一次中东战争为例：

sequenceDiagram
participant a as 阿拉伯联军
participant y as 以色列
participant m as 美国
participant l as 联合国
%% 第一阶段
rect rgb(200,250,150)
a->>+y:滚,离开阿拉伯人的地盘.<br>直接开干.
par
loop
y-->>-a:搞偷袭啊.我顶.
end
and
y--x m:大哥,拉兄弟一把.需要立即停火.
end
m-->l:建议双方停火
l-->>l:听美老大的。
par 停火三天
l ->>a:stop
and
l->>y:stop
end
par
loop
y->>y:扩充兵员，军事改组
end
and
y->>m:购买武器
m->>y:飞机、大炮要啥给啥
and
loop 阿拉伯
a-->>a:做些调整就行了。小小以色列不堪一击。
end
end
end

%% 第二阶段
rect rgb(90,200,255)
loop 10天进攻
y->>+a:万事俱备。开干!
a->>-y:我顶。
end
par 停火
l ->>a:stop
a-->>l:ok
and
l->>y:stop
y->>l:ok
end
end
%% 第三阶段
rect rgb(100,100,200)
loop
y->>+a:有美老大撑腰，停火协议算个球。我打!
a->>-y:我只好顶，顶。。。
a-->>a:好惨啊。
y->>a:占了不少地盘了，收兵。丫的，以后老实点。
end
end