mermaid流程图工具_mermaid制图工具
设置
在NexT主题下，需要进入NexT主题配置_config.yml搜索mermaid并且打开功能开关
相关mermaid文件位于\themes\next\layout\_third-party\tags
mermaid theme位于
在Markdown的Fontmatter中加入mermaid: true
入门
最简单的流程图
1
2
3
4
5graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
最简单顺序图
1
2
3
4
5
6
7
8
9
10
11sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello Jogn, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail...
John-->>Alice: Great!
John->>Bob:How about you?
Bob-->>John: Jolly good!
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello Jogn, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail...
John-->>Alice: Great!
John->>Bob:How about you?
Bob-->>John: Jolly good!
最简单的甘特图
1
2
3
4
5
6
7
8
9
10gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2020-08-24
section A section
Completed task:done,des1, 2020-08-18,2020-08-22
Active task:active,des2, 2020-08-23,3d
Future task:des3, after des2,5d
Future task2:des4, after des3,10d
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2020-08-24
section A section
Completed task:done,des1, 2020-08-18,2020-08-22
Active task:active,des2, 2020-08-23,3d
Future task:des3, after des2,5d
Future task2:des4, after des3,10d
最简单的类图
|>和表示小头三角
1
2
3
4
5
6
7
8
9
10
11
12
13
14classDiagram
Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 C2 : Cool label
classDiagram
Class01 C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 C2 : Cool label-->|-->
最简单的Git图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
最简单的实体关系图
1
2
3
4erDiagram
CUSTOMER || --O{ ORDER : places
ORDER || --|{ LINE-ITEM : containts
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
erDiagram
CUSTOMER || --O{ ORDER : places
ORDER || --|{ LINE-ITEM : containts
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
最简单的行程图
journey
title My Working Day
section Go to work
Make tea: 5:Me
Go upstairs: 3: Cat
Do Work: 1: Me,Cat
section Go home
Go downstairs: 5:me
Sit Down: 5:me
饼状图
1
2
3
4pie title Pets adopted by volunteers
"Dogs": 386
"Cats": 85
"Rats": 15
pie title Pets adopted by volunteers
"Dogs": 386
"Cats": 85
"Rats": 15
流程图
图形
声明方向
TB-从上到下
TD-自顶向下
BT-从下到上
RL-从右到左
LR-从左到右
1
2graph TD
Start --> Stop
graph TD
start--> stop
1
2graph LR
Start --> Stop
graph LR
Start --> Stop
节点和形状
1
2
3
4
5
6
7
8graph TD
默认节点
id1[与默认节点相同]
id2(圆角方块节点)
id3([体育场形状])
id4[[子例程节点]]
id5[(圆柱状节点)]
id6((圆形节点))
graph TD
默认节点
id1[与默认节点相同]
id2(圆角方块节点)
id3([体育场形状])
id4[[子例程节点]]
id5[(圆柱状节点)]
id6((圆形节点))
1
2
3
4
5
6
7
8graph TD
id1>非对称节点]
id2{菱形节点}
id3{{六角形节点}}
id4[/平行四边形节点/]
id5[\平行四边形节点\]
id6[/梯形节点\]
id7[\梯形节点/]
graph TD
id1>非对称节点]
id2{菱形节点}
id3
id4[/平行四边形节点/]
id5[\平行四边形节点\]
id6[/梯形节点\]
id7[\梯形节点/]
节点之间的连接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15graph LR
箭头 --> id1[连接]
开放 --- id2[连接]
A -- 带有文字 ---B
id3[A] ---|或者|id4[B]
虚线-.->id5[连接]
id10[开放]-.-虚线连接
id6[A] -.或者带有文字..--id7[B]
id8[A] -.或者..->id9[B]
粗线==>id11[连接]
id12[粗线]==文字==>id13[连接]
多--段1-->段==段2==>连-.段3..-接
a-->b & c-->d
e & f --> g & h
id14["/使用'双引号'取消(转义字符)\"]
graph LR
箭头 --> id1[连接]
开放 --- id2[连接]
A -- 带有文字 ---B
id3[A] ---|或者|id4[B]
虚线-.->id5[连接]
id10[开放]-.-虚线连接
id6[A] -.或者带有文字..--id7[B]
id8[A] -.或者..->id9[B]
粗线==>id11[连接]
id12[粗线]==文字==>id13[连接]
多--段1-->段==段2==>连-.段3..-接
a-->b & c-->d
e & f --> g & h
id14["/使用'双引号'取消(转义字符)\"]
子图
graph TB
d-->b2
c1-->a2
subgraph idel[one]
a1-->a2
end
subgraph a[two]
b1-->b2
end
subgraph tree
c1-->c2
end
注释
以双百分号开头的一行%%
样式和类别
graph LR
id1(start)-->id2(stop)
%% style 图表id 填充(fill:#fff),描边(stroke:#fff),表边粗细(stroke-width:2px),字色(color:#fff),虚线描边(stroke-dasharray:5 5)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
基本支持fontawesome
通过fa:#icon类名#来进行图表访问
1
2
3
4
5graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);