Hexo中插入mermaid图表
1. mermaid简介
mermaid(美人鱼)是一种基于文本的格式生成图表和流程图的工具，是markdown文本很好的补充。
可以生成各种图表，其中包括流程图, 时序图, 甘特图等等．
2. vscode安装mermaid插件 (可选)
由于我使用的是vscode来编辑markdown文档，所以需要安装Markdown Preview Mermaid Support
插件才能看到mermaid预览图.
3. 安装mermaid插件
hexo中要使用mermaid图表
1 | npm install hexo-filter-mermaid-diagrams --save |
4. 修改配置
修改主题文件_config.yml
这里很多教程说修改根目录下的，而不是主题，但是我发现我需要修改主题的，我用的是 next，所以修改themes/next下的_config.yml，之前改成用根目录下不管用，后面发现原来 next 的配置中也有mermaid配置，如下所示
1 | # Mermaid tag |
很多博客说需要手动修改foot模板引入mermaid，实际测试在我当前使用的next 版本中不需要任何手动修改．
5. 测试一段mermaid图表
在markdown文档中插入一段mermaid图标
下面是三个mermaid图表实例，很明显文字已经转换成了漂亮的图表．
流程图(FLOWCHART)
文本:
1
2
3
4
5graph TD;
A-->B;
A-->C;
B-->D;
C-->D;图表
graph TD; A-->B; A-->C; B-->D; C-->D;时序图(SEQUENCE DIAGRAM)
文本:1
2
3
4
5
6
7
8
9
10
11sequenceDiagram
participant Alice
participant Bob
Alice->John:Hello John, how are you?
loop Healthcheck
John->John:Fight against hypochondria
end
Note right of John:Rational thoughts <br/>prevail...
John-->Alice:Great!
John->Bob: How about you?
Bob-->John: Jolly good!图表
sequenceDiagram participant Alice participant Bob Alice->John:Hello John, 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
10
11
12
13
14
15gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d图表
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d饼图
文本：1
2
3
4
5
6pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5图表：
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5状态图
文本：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16stateDiagram
[*]-->Active
state Active {
[*]-->NumLockOff
NumLockOff-->NumLockOn : EvNumLockPressed
NumLockOn-->NumLockOff : EvNumLockPressed
--
[*]-->CapsLockOff
CapsLockOff-->CapsLockOn : EvCapsLockPressed
CapsLockOn-->CapsLockOff : EvCapsLockPressed
--
[*]-->ScrollLockOff
ScrollLockOff-->ScrollLockOn : EvCapsLockPressed
ScrollLockOn-->ScrollLockOff : EvCapsLockPressed
}图表：
stateDiagram [*]-->Active state Active { [*]-->NumLockOff NumLockOff-->NumLockOn : EvNumLockPressed NumLockOn-->NumLockOff : EvNumLockPressed -- [*]-->CapsLockOff CapsLockOff-->CapsLockOn : EvCapsLockPressed CapsLockOn-->CapsLockOff : EvCapsLockPressed -- [*]-->ScrollLockOff ScrollLockOff-->ScrollLockOn : EvCapsLockPressed ScrollLockOn-->ScrollLockOff : EvCapsLockPressed }