markdown 做图 : Mermaid语法

Mermaid语法

使用Markdown 流程图制作: Mermaid

引自:

https://mermaid-js.github.io/mermaid/#/

sequenceDiagram

使用 sequenceDiagram 进行渲染,标识使用语法 如:json, java,js等

语法

注释

可以使用 %% 添加注释,解析时不会显示

---

participant 定义参与者

使用 participant 定义参与者:

​ ps :

​ participant zw as zhenwei

​ participant ww as wangwu

​ 指定参与者有 zhenwei, wangwu 并使用别名 zw, ww代指

zhenwei wangwu hello hi morning zhenwei wangwu

类型	描述
->	实线无箭头
->	虚线无箭头
->>	带箭头的实线
->>	带箭头的虚线
-X	实线，末端带有叉号（异步）

---

Note: 备注

使用 Note 添加备注

​ 可以使用 over, left, right等位置词指定当前注释的相对位置

sequenceDiagram
participant zw as zhenwei    
participant ww as wangwu
note over zw,ww: say
zw ->> +ww: hello
ww -->> -zw: hi
note right of ww: kk
zw --X ww: morning

zhenwei wangwu say hello hi kk morning zhenwei wangwu

---

loop: 循环

使用 loop 表达循环

sequenceDiagram
participant zw as zhenwei    
participant ww as wangwu
zw ->> +ww: hello
ww -->> -zw: hi

loop 我是备注:聊鬼话
zw --X ww: 吃饭了么
end

zhenwei wangwu hello hi 吃饭了么 loop [ 我是备注:聊鬼话 ] zhenwei wangwu

---

alt: 条件

条件语句

sequenceDiagram
zhenwei->>wangwu: hello,wangwu
alt 反应5秒
wangwu -->> zhenwei: hi,daye
else what fk
zhenwei -->> wangwu: have you eaten
end

zhenwei wangwu hello,wangwu hi,daye have you eaten alt [ 反应5秒 ] [ what fk ] zhenwei wangwu

---

par: 并发

par 表示并行发生

sequenceDiagram
participant zw as zhenwei    
participant ww as wangwu
participant zs as zhangsan

par 打招呼
zw ->> +ww: hello
ww -->> -zw: hi
and 同时
zw ->> +zs: hello
zs -->> -zw: daye
end

zhenwei wangwu zhangsan hello hi hello daye par [ 打招呼 ] [ 同时 ] zhenwei wangwu zhangsan

---

rect: 背景色

背景色
不知为何不识别

sequenceDiagram
rect rgb(1111, 255, 0)
zhenwei ->> zhangsan: 吃饭了么?
rect rgb(0, 0, 255, .11)
zhangsan -->> zhenwei: 你呢?
end
end

sequenceDiagram
rect rgb(1111, 255, 0)
zhenwei ->> zhangsan: 吃饭了么?
rect rgb(0, 0, 255, .11)
zhangsan -->> zhenwei: 你呢?
end
end

---

sequenceNumbers

使用 sequenceNumbers 或 autonumber 为箭头添加自动序号
使用autonumber 无效, 望解答

sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

---