Mermaid绘图工具

hexo next 渲染 markdown mermaid 流程图

1. 打开主题的配置文件 _config.next.yml
2. 搜索关键字 mermaid，可看到如下配置，如果是 false，就把它改成 true，如果是，就可以不用修改了

mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

方向

方向	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右
TD	与 TB 相同

节点

流程图的节点形状有矩形、圆角、圆柱、圆形、菱形、梯形、六边形、平行四边形等等，通过<>[]{}()等符号进行控制

语法结构如下：A[名称] --> B(名称)
其中，A、B 均代表形状名称，–>表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：

括号形式	形状样式
[ ]	矩形框
( )	圆角矩形框
{ }	菱形
(( ))	圆形

graph TD
A[矩形] --> B(圆角) --> C{菱形}
D([This is the text in the box]) --> E[[带边框的矩形]] --> F[\平行四边形\]
G --> H((圆形)) --> I[/平行四边形/]
J>非对称图形] --> K[/梯形\] --> L[\梯形/]
M[(圆柱形)]

{% mermaid graph TD %}
A[矩形] --> B(圆角) --> C{菱形}
D([This is the text in the box]) --> E[[带边框的矩形]] --> F[\平行四边形\]
G{{六边形}} --> H((圆形)) --> I[/平行四边形/]
J>非对称图形] --> K[/梯形\] --> L[\梯形/]
M[(圆柱形)]
{% endmermaid %}

连接线

符号	箭头
–>	箭头
—	没有箭头
–文字—/—|文字|	带文字的连接线
-–>|文字|/-–文字–>	带箭头和文字的连接
-.->	虚线
-.文字.->	带文字的虚线连接
==>	粗连接线
==文本==>	带文本的粗连接
–o	o 箭头类型（需 flowchart 支持）
–x	x 箭头类型（需 flowchart 支持）
<–>	多向箭头（需 flowchart 支持）

Mermaid 用法

mermaid.js
{% mermaid type %}
{% endmermaid %}
# type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.

Mermaid 案例

流程图

1. graph

graph LR
A --> B
B ---|text| C
D -.- E
E -.text.-F
G ==> H

{% mermaid graph LR %}
A --> B
B ---|text| C
D -.- E
E -.text.-F
G ==> H
{% endmermaid %}

2. flowchart

flowchart LR
A <--> B
C o--o D
E x--x F

{% mermaid flowchart LR %}
A <--> B
C o--o D
E x--x F
{% endmermaid %}

饼图

pie
title 电影
"喜剧" : 38
"恐怖片" : 85
"动作片" : 100
"音乐剧" : 150

{% mermaid pie %}
title 电影
"喜剧" : 38
"恐怖片" : 85
"动作片" : 100
"音乐剧" : 150
{% endmermaid %}