序列图(时序图)
序列图是一种交互图,它显示了进程如何相互操作以及按什么顺序操作。
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 :参与者声明(除非需要定义一个简单的别名否则无需声明)</p>
<pre><code>[Actor][Arrow][Actor]:Message text
</code></pre>
<pre><code>
* **参与者:participant*
参与者默认为
, **所以一般无需显示声明**,但当参与者字符比较长时,可以通过显示声明定义一个简单别名,这样可以减少敲键盘的次数。
</code></pre>
<p>sequenceDiagram
participant A as Mr Black
participant B as Tom Cat</p>
<pre><code>A->>B:Hello.How are you!
B->>A:I am fine ,thank you.
</code></pre>
<pre><code>
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声明参与者。
</code></pre>
<p>sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alic</p>
<pre><code>
参与者可以有方便的标识符和描述性标示,也就是别名。参与者名称太长的话,就可以用别名来代替。
</code></pre>
<p>sequenceDiagram</p>
<pre><code>participant T as Tom
participant C as Cat
T->C: Hello Cat, how are you?
C->>T: Great!
</code></pre>
<pre><code>
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编辑器不支持
</code></pre>
<p>sequenceDiagram
participant A as Tom
participant B as Cat
note left of A: 测试线形状和箭头</p>
<pre><code>A->B:吃饭了吗?
B->>A:吃了。
A-->B:快过年了,回家不?
B-->>A:新冠肺炎这么严重,回不了。
A-xB:是啊,回去还得隔离14天。
B--xA:我靠,隔离14天,假期都没有那么多。
</code></pre>
<pre><code>
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
让一个参与者处于活动状态中.通过激活(
)和取消激活(
)一个参与者来实现.
</code></pre>
<p>sequenceDiagram
participant t as 数学老师
participant s as 高斯</p>
<pre><code>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: *_*
</code></pre>
<pre><code>
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: *_*
也可以通过在消息箭头上附加
+/- 后缀的快捷表示法(推荐,这种方式更简练):
</code></pre>
<p>sequenceDiagram
participant t as 数学老师
participant s as 高斯</p>
<pre><code>t->>+s:出一个题目:<br>1+2+3+...+100=?
s-->>s:我想想。小case
s->>-t:1+2+3+...+100=5050
t-->>s:0-0,聪明呀。
s--xt: *_*
</code></pre>
<pre><code>
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: *_*
可以向序列图添加注释。语法如下:
</code></pre>
<p>Note [ right of | left of | over ] [Paticipant]: Text in note content</p>
<pre><code>
eg:
</code></pre>
<p>sequenceDiagram
participant l as 大灰狼
participant y as 小羊
participant d as 小狗大侠</p>
<pre><code>%% left or right
Note left of l:对于坏人来说,<br>想做坏事总是有理由的。
Note right of y:对于坏人的对策:干或者躲。
Note over d:游侠仗义,路见不平一声吼。
</code></pre>
<pre><code>
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个)
语法:
</code></pre>
<p>Note [ right of | left of | over ] [Paticipant,Participant]: Text in note content</p>
<pre><code>
eg:
</code></pre>
<p>sequenceDiagram
participant l as 大灰狼
participant y as 小羊
participant d as 小狗大侠</p>
<pre><code>%% left or right
note left of l:对于坏人来说,<br>想做坏事总是有理由的。<br>羊肉鲜美呀。
note over d,y:羊妹妹,莫怕。
Note over l,d:狗哥我路见不平一声吼,大灰狼你赶快给我走
</code></pre>
<pre><code>
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:狗哥我路见不平一声吼,大灰狼你赶快给我走。
可以在序列图中表示循环。语法如下:
</code></pre>
<p>loop Loop text
... statements ...</p>
<p>end</p>
<pre><code>
eg:
</code></pre>
<p>sequenceDiagram
participant t as 先生
participant s as 书生
participant k as 礼部</p>
<pre><code>loop 十年寒窗
t->>+ s:教
s-->>s:学习&思考
s->>-t:问
end
s->>+k:进京赶考,参加秋闱
k-->>k:出难题,为国选材
k->>-s:不负有心人<br>状元及第
loop 巡游一天
s-->>s:春风得意马蹄疾,<br>一日看尽长安花。
end
</code></pre>
<pre><code>
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
可以在序列图中表示选择路径。 语法如下:
</code></pre>
<p>alt Describing text
... statements ...</p>
<p>else Describing text
... statements ...</p>
<p>end</p>
<pre><code>
其他以外的选项
</code></pre>
<p>opt Describing text
... statements ...</p>
<p>end</p>
<pre><code>
eg:
</code></pre>
<p>sequenceDiagram
participant s as 贡士
participant d as 殿试</p>
<pre><code> s->> d:参加殿试
alt 一甲
d->>s:进士及第
else 二甲
d->>s:进士出身
else 三甲
d->>s:同进士出身
end
opt 不在其中
d--xs:拿下,你不是贡士。
end
</code></pre>
<pre><code>
sequenceDiagram participant s as 贡士 participant d as 殿试 s->> d:参加殿试 alt 一甲 d->>s:进士及第 else 二甲 d->>s:进士出身 else 三甲 d->>s:同进士出身 end opt 不在其中 d--xs:拿下,你不是贡士。 end
可以显示并行发生的动作。语法如下:
</code></pre>
<p>par [Action 1]
... statements ...</p>
<p>and [Action 2]
... statements ...</p>
<p>and [Action N]
... statements ...</p>
<p>end</p>
<pre><code>
并行也可以嵌套。语法如下:
</code></pre>
<p>par [Action 1]
... statements ...</p>
<p>and [Action 2]
... statements ...</p>
<p>and [Action N]
... statements ...
par [actionNn]
... statements ...
end
end</p>
<pre><code>
</code></pre>
<p>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</p>
<pre><code>
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
可以通过提供彩色背景来突出显示。 语法
</code></pre>
<p>rect rgb(0, 255, 0)
... content ...</p>
<p>end</p>
<pre><code>
和可以增加透明色
</code></pre>
<p>rect rgba(0, 255, 0,.1)
... content ...</p>
<p>end</p>
<pre><code>
>
0.1可以用
.1表示。
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
可以在序列图中输入注释,解析器将忽略这些注释。 注释需要单独一行,并且必须以
%%(双百分号)开头。 注释开始后到下一个换行符的任何文本都将被视为注释,包括任何图表语法。
</code></pre>
<p>sequenceDiagram
Alice->>John: 吃饭了没?
%% this is a comment
John-->>Alice: 吃了肉夹馍!</p>
<pre><code>
sequenceDiagram %%autonumber participant k as 老孔 participant m as 老孟 k->>m: 吃饭了没? %% this is a comment m-->>k: 吃了肉夹馍!
可以在序列图中的每个连线上加上一个序列号。 通过代码(
)开启自动编号:
</code></pre>
<p>sequenceDiagram
autonumber
participant k as 老孔
participant m as 老孟
k->>m: 吃饭了没?
m-->>k: 吃了肉夹馍!</p>
<p>
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
Original: https://www.cnblogs.com/sdsxblpjava/p/15798281.html
Author: 同学Zou
Title: markdown mermaid序列图
原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/572388/
转载文章受原作者版权保护。转载请注明原作者出处!