经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » Markdown » 查看文章
markdown mermaid序列图
来源:cnblogs  作者:同学Zou  时间:2022/1/17 10:57:24  对本文有异议

序列图(时序图)

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

  1. sequenceDiagram
  2. participant l as 大灰狼
  3. participant y as 小羊
  4. l->>y:小坏蛋,弄脏我喝的水
  5. y->>l:狼先生,你在上游,我在下游
  6. l->>y:听说去年你说我的坏话
  7. y->>l:去年我还没出生呢
  8. l->>y:不是你也是你爸爸,说着就扑上去
  9. %% left or right
  10. 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>想做坏事总是有理由的。

基本语法

  1. sequenceDiagram
  2. participant A as Mr Black :参与者声明(除非需要定义一个简单的别名否则无需声明)
  3. [Actor][Arrow][Actor]:Message text
  • 参与者:participant

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

  1. sequenceDiagram
  2. participant A as Mr Black
  3. participant B as Tom Cat
  4. A->>B:Hello.How are you!
  5. 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声明参与者。

  1. sequenceDiagram
  2. actor Alice
  3. actor Bob
  4. Alice->>Bob: Hi Bob
  5. Bob->>Alice: Hi Alic

别名

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

  1. sequenceDiagram
  2. participant T as Tom
  3. participant C as Cat
  4. T->C: Hello Cat, how are you?
  5. 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编辑器不支持
  1. sequenceDiagram
  2. participant A as Tom
  3. participant B as Cat
  4. note left of A: 测试线形状和箭头
  5. A->B:吃饭了吗?
  6. B->>A:吃了。
  7. A-->B:快过年了,回家不?
  8. B-->>A:新冠肺炎这么严重,回不了。
  9. A-xB:是啊,回去还得隔离14天。
  10. 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)一个参与者来实现.

  1. sequenceDiagram
  2. participant t as 数学老师
  3. participant s as 高斯
  4. t->>s:出一个题目:<br>1+2+3+...+100=?
  5. activate s
  6. s-->>s:我想想。小case
  7. s->>t:1+2+3+...+100=5050
  8. deactivate s
  9. t-->>s:0-0,聪明呀。
  10. 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: *_*

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

  1. sequenceDiagram
  2. participant t as 数学老师
  3. participant s as 高斯
  4. t->>+s:出一个题目:<br>1+2+3+...+100=?
  5. s-->>s:我想想。小case
  6. s->>-t:1+2+3+...+100=5050
  7. t-->>s:0-0,聪明呀。
  8. 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: *_*

注释

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

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

eg:

  1. sequenceDiagram
  2. participant l as 大灰狼
  3. participant y as 小羊
  4. participant d as 小狗大侠
  5. %% left or right
  6. Note left of l:对于坏人来说,<br>想做坏事总是有理由的。
  7. Note right of y:对于坏人的对策:干或者躲。
  8. 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个)

语法:

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

eg:

  1. sequenceDiagram
  2. participant l as 大灰狼
  3. participant y as 小羊
  4. participant d as 小狗大侠
  5. %% left or right
  6. note left of l:对于坏人来说,<br>想做坏事总是有理由的。<br>羊肉鲜美呀。
  7. note over d,y:羊妹妹,莫怕。
  8. 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:狗哥我路见不平一声吼,大灰狼你赶快给我走。

循环

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

  1. loop Loop text
  2. ... statements ...
  3. end

eg:

  1. sequenceDiagram
  2. participant t as 先生
  3. participant s as 书生
  4. participant k as 礼部
  5. loop 十年寒窗
  6. t->>+ s:教
  7. s-->>s:学习&思考
  8. s->>-t:问
  9. end
  10. s->>+k:进京赶考,参加秋闱
  11. k-->>k:出难题,为国选材
  12. k->>-s:不负有心人<br>状元及第
  13. loop 巡游一天
  14. s-->>s:春风得意马蹄疾,<br>一日看尽长安花。
  15. 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

路线选择

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

  1. alt Describing text
  2. ... statements ...
  3. else Describing text
  4. ... statements ...
  5. end

其他以外的选项

  1. opt Describing text
  2. ... statements ...
  3. end

eg:

  1. sequenceDiagram
  2. participant s as 贡士
  3. participant d as 殿试
  4. s->> d:参加殿试
  5. alt 一甲
  6. d->>s:进士及第
  7. else 二甲
  8. d->>s:进士出身
  9. else 三甲
  10. d->>s:同进士出身
  11. end
  12. opt 不在其中
  13. d--xs:拿下,你不是贡士。
  14. end
sequenceDiagram participant s as 贡士 participant d as 殿试 s->> d:参加殿试 alt 一甲 d->>s:进士及第 else 二甲 d->>s:进士出身 else 三甲 d->>s:同进士出身 end opt 不在其中 d--xs:拿下,你不是贡士。 end

并行

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

  1. par [Action 1]
  2. ... statements ...
  3. and [Action 2]
  4. ... statements ...
  5. and [Action N]
  6. ... statements ...
  7. end

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

  1. par [Action 1]
  2. ... statements ...
  3. and [Action 2]
  4. ... statements ...
  5. and [Action N]
  6. ... statements ...
  7. par [actionNn]
  8. ... statements ...
  9. end
  10. end

eg

  1. sequenceDiagram
  2. participant t as Tom
  3. participant k as Kite
  4. participant b as Black
  5. par 通知
  6. t->>k:一块出去玩了?
  7. and
  8. t->> b:一块出去玩?
  9. end
  10. k->>t:好哦
  11. 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

背景色

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

  1. rect rgb(0, 255, 0)
  2. ... content ...
  3. end

和可以增加透明色

  1. rect rgba(0, 255, 0,.1)
  2. ... content ...
  3. 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

代码注解

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

  1. sequenceDiagram
  2. Alice->>John: 吃饭了没?
  3. %% this is a comment
  4. John-->>Alice: 吃了肉夹馍!
sequenceDiagram %%autonumber participant k as 老孔 participant m as 老孟 k->>m: 吃饭了没? %% this is a comment m-->>k: 吃了肉夹馍!

自动编号

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

  1. sequenceDiagram
  2. autonumber
  3. participant k as 老孔
  4. participant m as 老孟
  5. k->>m: 吃饭了没?
  6. 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

原文链接:http://www.cnblogs.com/sdsxblpjava/p/15798281.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号