markdown mermaid序列图
阅读原文时间:2022年01月13日阅读:1

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

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:对于坏人来说,
想做坏事总是有理由的。

基本语法

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:出一个题目:
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:出一个题目:
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:对于坏人来说,
想做坏事总是有理由的。
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:对于坏人来说,
想做坏事总是有理由的。
羊肉鲜美呀。
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:不负有心人
状元及第

loop 巡游一天
s-->>s:春风得意马蹄疾,
一日看尽长安花。
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:滚,离开阿拉伯人的地盘.
直接开干.
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