序列图(时序图)
序列图是一种交互图,它显示了进程如何相互操作以及按什么顺序操作。
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
,所以一般无需显示声明,但当参与者字符比较长时,可以通过显示声明定义一个简单别名,这样可以减少敲键盘的次数。
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