这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
hexo默认不支持流程图，flowchart是一种简便好用的解决方案，但由于其语法过于简单，导致其在应付稍复杂一些的流程图时捉襟见肘，本文记录在hexo中添加Mermaid流程图的方法。
简介
-
Mermaid是一个基于Javascript的图表工具，它使用Markdown启发的文本定义和一个渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档工作跟上发展。
-
图解和文档花费了开发人员宝贵的时间，而且很快就会过时。但是，没有图表或文档会破坏生产力，难以直观表达信息。Mermaid通过减少创建可修改的图表所需的时间、精力和工具来解决这个问题，使内容更智能、更可重复使用。Mermaid图表的文本定义允许它很容易被更新，它也可以成为生产脚本（和其他代码）的一部分。
-
官方github：github.com/mermaid-js/…
添加支持
安装插件
npm install --save hexo-filter-mermaid-diagrams
fluid 可以不需要安装插件
Hexo 配置
- 在Hexo配置文件中修改
主题配置
Next
- 在主题配置文件中找到
mermaid选项，将enable设置为true。
Fluid
- 在主题配置文件中找到
mermaid选项，将enable设置为true。
其他主题根据具体情况配置。
加入mermaid代码块
官网有最全的说明文档 mermaidjs.github.io/ ，此处记录常用使用方法。
graph TD
B((开始)) -->C{判断}
C -- a=1 -->D[执行语句1]
C -- a=2 -->E[执行语句2]
C -- a=3 -->F[执行语句3]
C -- a=4 -->G[执行语句4]
D--> AA((结束))
E--> AA
F--> AA
G--> AA
graph TD
B((开始)) -->C{判断}
C -- a=1 -->D[执行语句1]
C -- a=2 -->E[执行语句2]
C -- a=3 -->F[执行语句3]
C -- a=4 -->G[执行语句4]
D--> AA((结束))
E--> AA
F--> AA
G--> AA
- 另一种写法
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
流程图语法
方向
| 方向 | 含义 |
|---|---|
| TB | 从上到下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
| TD | 与TB相同 |
节点
语法结构如下：A[名称] --> B(名称)
其中，A、B均代表形状名称， -->表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：
| 括号形式 | 形状样式 |
|---|---|
| [ ] | 矩形框 |
| ( ) | 圆角矩形框 |
| { } | 菱形 |
| (( )) | 圆形 |
连接线
| 符号 | 箭头 |
|---|---|
| --> | 箭头 |
| --- | 没有箭头 |
| -- 文字 --- / --- |文字| | 带文字的连接线 |
| -->|文字| / -- 文字 --> | 带箭头和文字的连接 |
| -.-> | 虚线 |
| -. 文字 .-> | 带文字的虚线连接 |
| ==> | 粗连接线 |
| == 文本 ==> | 带文本的粗连接 |
子图
语法：
subgraph title
graph definition
end
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
样式链接
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
注释
- mermaid注释为
%%
综合应用
graph TB
id1(圆角矩形)--普通线-->id2[矩形]
subgraph 子图表
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end
style id1 fill:#f9f,stroke:#333,stroke-width:4px
graph TB
id1(圆角矩形)--普通线-->id2[矩形]
subgraph 子图表
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end
style id1 fill:#f9f,stroke:#333,stroke-width:4px
甘特图
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
类图
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
状态图
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
饼图
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
旅程图
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
序列图语法
使用以下语法开始序列图
sequenceDiagram
[参与者1][消息线][参与者2]:消息体
...
参与者
定义参与者
sequenceDiagram
participant 参与者 1
participant 参与者 2
...
participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 312345
消息线
|类型|描述|
|->|无箭头的实线|
|-->|无箭头的虚线|
|->>|有箭头的实线|
|-->>|有箭头的虚线|
|-x|末端为叉的实线（表示异步）|
|--x|末端为叉的虚线（表示异步）|
处理中
在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。
或者使用以下语法直接说明某个参与者进入“处理中”状态
activate 参与者1
标注
语法如下
Note 位置表述 参与者: 标注文字1
其中位置表述可以为
| 表述 | 含义 |
|---|---|
| right of | 右侧 |
| left of | 左侧 |
| over | 在当中，可以横跨多个参与者 |
循环
语法如下
loop 循环的条件
循环体描述语句
end123
判断
alt 条件 1 描述
分支 1 描述语句
else 条件 2 描述 # else 分支可选
分支 2 描述语句
else ...
...
end1234567
如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：
opt 条件描述
分支描述语句
end
综合应用
sequenceDiagram
participant z as 张三
participant l as 李四
loop 日复一日
z->>l: 吃了吗您呐？
l-->>z: 吃了，您呢？
activate z
Note left of z: 想了一下
alt 还没吃
z-xl: 还没呢，正准备回去吃
else 已经吃了
z-xl: 我也吃过了，哈哈
end
opt 大过年的
l-->z: 祝您新年好啊
end
end
sequenceDiagram
participant z as 张三
participant l as 李四
loop 日复一日
z->>l: 吃了吗您呐？
l-->>z: 吃了，您呢？
activate z
Note left of z: 想了一下
alt 还没吃
z-xl: 还没呢，正准备回去吃
else 已经吃了
z-xl: 我也吃过了，哈哈
end
opt 大过年的
l-->z: 祝您新年好啊
end
end
官方用例
sequenceDiagram
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!
sequenceDiagram
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!