起因
在 MarkDown 中 使用 Mermaid 画流程图很方便,但是需要有一定规则, 做个记录
配置环境
- Node v12.18
- Hexo v4.2.1
- Mermaid(hexo-filter-mermaid-diagrams) v1.0.5
安装
1
| npm install hexo-filter-mermaid-diagrams
|
修改配置 site/themes/next/_config.yml
1 2 3 4 5
| # Mermaid tag mermaid: enable: true # Available themes: default | dark | forest | neutral theme: forest
|
使用声明
在markdown中使用 需要将代码声明在 mermaid 代码块中
请忽略括号,这里是为了防止转义
流程图
基础Graph
graph 需要有声明
流程图方向
代码 |
方向 |
说明 |
TB/TD |
top to bottom |
|
BT |
bottom to top |
|
LR |
left to right |
|
RL |
right to left |
1. 示例 TD
1 2
| graph TD; Start --> Stop
|
graph TD;
Start --> Stop
2. 示例 LR
1 2
| graph LR; Start --> Stop
|
graph LR;
Start --> Stop
节点/图形
默认
graph LR;
id;
带文本的Node
1 2
| graph LR; id1[This is the text in the box];
|
graph LR;
id1[This is the text in the box];
圆角Node
1 2
| graph LR; id1(This is the text in the box);
|
graph LR;
id1(This is the text in the box);
体育场式圆角Node
1 2
| graph LR; id1([This is the text in the box]);
|
graph LR;
id1([This is the text in the box]);
子程序Node
1 2
| graph LR; id1[[This is the text in the box]];
|
graph LR;
id1[[This is the text in the box]];
圆柱Node
1 2
| graph LR; id1[(This is the text in the box)];
|
graph LR;
id1[(This is the text in the box)];
圆Node
1 2
| graph LR; id1((This is the text in the box));
|
graph LR;
id1((This is the text in the box));
不对称Node (现在只有这一种形式)
1 2
| graph LR; id1>This is the text in the box];
|
graph LR;
id1>This is the text in the box];
菱形Node
1 2
| graph LR; id1{This is the text in the box};
|
graph LR;
id1{This is the text in the box};
六角形Node
1 2
| graph LR; id1{{This is the text in the box}};
|
我的博客不容许我显示这个效果!
平行四边形Node
1 2
| graph LR; id1[/This is the text in the box/];
|
graph LR;
id1[/This is the text in the box/];
梯形Node
1 2 3
| graph LR; id1[/This is the text in the box\]; id2[\This is the text in the box/];
|
graph LR;
id1[/This is the text in the box\];
id2[\This is the text in the box/];
节点关系(连线)
线的长度
Length |
1 |
2 |
3 |
Normal |
—- |
—— |
——- |
Normal with arrow |
—> |
—-> |
——> |
Thick |
=== |
==== |
===== |
Thick with arrow |
==> |
===> |
====> |
Dotted |
-.- |
-..- |
-…- |
Dotted with arrow |
-.-> |
-..-> |
-…-> |
线的类型
代码 |
名称 |
说明 |
—- |
普通线段 |
|
—> |
带箭头 |
|
=== |
粗线 |
|
==> |
粗线带箭头 |
|
-.- |
虚线 |
|
-.-> |
虚线带箭头 |
普通箭头
graph LR
A-->B
直接连线
graph LR
A --- B
带文字的连线
1 2 3
| graph LR A-- This is the text! ---B C---|This is the text|D
|
graph LR
A-- This is the text! ---B
C---|This is the text|D
带文字带箭头的连线
1 2 3
| graph LR A -- text --> B C -->| text |D
|
graph LR
A -- text --> B
C -->| text |D
虚线
1 2 3 4 5
| graph LR; A-.-B; C-.->D; E-. text .-> F H-.->|text|G
|
graph LR;
A-.-B;
C-.->D;
E-.text.-> F
H-.->|text|G
厚线
1 2 3 4 5
| graph LR; A===B; C==>D; E==text==> F H==>|text|G
|
graph LR;
A===B;
C==>D;
E==text==> F
H==>|text|G
串联
1 2 3
| graph LR A -- text --> B -- text2 --> C a --> b & c--> d
|
graph LR
A -- text --> B -- text2 --> C
a --> b & c--> d
1 2
| graph TB A & B--> C & D
|
graph TB
A & B--> C & D
1 2 3 4 5
| graph TB A --> C A --> D B --> C B --> D
|
graph TB
A --> C
A --> D
B --> C
B --> D
特殊字符
1 2
| graph LR id1["This is the (text) in the box"]
|
graph LR
id1["This is the (text) in the box"]
子图
定义
1 2 3
| subgraph title graph definition end
|
示例
1 2 3 4 5 6 7 8 9 10 11
| graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
|
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
也可以这样
1 2 3 4 5
| graph TB c1-->a2 subgraph ide1 [one] a1-->a2 end
|
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
注释
注释以%% 开头
1 2 3
| graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C
|
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
最后给个例子
1 2 3 4 5
| graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
|
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
换个写法
1 2 3 4 5 6 7 8 9 10 11
| graph TD A[Hard edge]; B(Round edge); C{Decision}; D[Result one]; E[Result two];
A-->|Link text|B; B-->C; C-->|One|D; C-->|Two|E;
|
graph TD
A[Hard edge];
B(Round edge);
C{Decision};
D[Result one];
E[Result two];
A-->|Link text|B;
B-->C;
C-->|One|D;
C-->|Two|E;
参考网站
Hexo博客系列