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:&#x5BF9;&#x4E8E;&#x574F;&#x4EBA;&#x6765;&#x8BF4;&#xFF0C;<br>&#x60F3;&#x505A;&#x574F;&#x4E8B;&#x603B;&#x662F;&#x6709;&#x7406;&#x7531;&#x7684;&#x3002;

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/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球