Mermaid安装及绘制流程图
Mermaid 插件的安装
卸载 Hexo 默认的渲染器
默认的 Hexo 安装包括一个 MarkDown 渲染器插件，该插件使用 hexo-renderer-marked ，而 hexo-renderer-markdown-it 是一款用于 Markdown 解析和渲染的插件，用于替换 Hexo 默认自带的 Markdown 渲染器，提供了更丰富的 Markdown 解析和渲染，替换命令如下：
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
添加 Mermaid 支持
Mermaid 是一个支持 MarkDown 的流行的 js 图标库。具有直接在Markdown中画流程图，甘特图，序列图等功能。
- 使用
hexo-filter-mermaid-diagrams的 Hexo 插件来实现相应的功能，在 Hexo 根目录执行如下命令安装：
npm install hexo-filter-mermaid-diagrams --save
- 修改在 Matery 主题目录
layout/_partial/下的footer.ejs文件，文末添加如下内容：
<% if (theme.mermaid.enable) { %>
<script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
mermaid.initialize({theme: 'forest'});
}
</script>
<% } %>
- 在 Hexo 根目录文件下
_config.yml配置文件添加如下内容：
# mermaid chart。 依赖hexo-tag-mermaid
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default false
version: "latest" # default v7.1.2
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
#startOnload: true // default true
执行 hexo clean && hexo g 重新生成博客文件，在博文中使用含有 mermaid 标签的代码块包裹 mermaid 正文内容 。
Mermaid 的配置
hexo-renderer-markdown-it 的所有配置，均在 Hexo 的根目录下配置文件_config.yml 中进行配置。
简单配置
hexo-renderer-markdown-it 提供三种简单配置方式（配置级别）zero 、default 、commonmark 。
在 Hexo 的_config.yml 文件中可以配置以下内容：
# Markdown-it config
# markdown: 'zero'
# markdown: 'default'
# markdown: 'commonmark'
每种简单配置其默认的一些设置：
- zero ：禁用大多数解析器功能。仅支持斜体和粗体，甚至不支持所有原始 MarkDown 功能。
- default（GFM）：解析器的行为类似于 GitHub 规范。
- commonmark ：提供比 zero 预设更多的功能， 此设置将强制插件使用最新的 CommonMark 规范。
警告 ：选择一种简单配置，将阻止您使用任何附带的插件。
高级配置
hexo-renderer-markdown-it 提供的高级配置，是对简单配置的详细定制。在 Hexo 的根目录下 _config.yml 文件中配置以下内容（官方提供的完整配置，没有特殊需要不用再次修改）。
# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶ # anchors 符号
- 渲染器（render）
# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
html ：定义文档中的 HTML 内容是否应转义或传递给最终结果。
html: true # 不转义 HTML 内容
html: false # 转义 HTML 内容，使标签作为文本输出
xhtmlOut ：定义解析器是否将导出完全兼容 XHTML 的标记。
xhtmlOut: true # 必须使用完全的 XHTML 代码，换行必须为
xhtmlOut: false # 不必必使用完全的 XHTML 代码，换行可以为
breaks ：使源文件中的换行符被解析为标记，每次按 Enter 键都会创建换行符。
breaks: true # 每次会车换行相当于一个标签
breaks: false # Pa,每次会车换行会被忽略
linkify ：解析器能够将直接粘贴到文本中的链接内联。
linkify: true # 类似链接的文本，作为链接输出
linkify: false # 类似链接的文本，依然作为文本输出
typographer：可以替换常见的排版元素。
typographer: true # 替换常见的排版元素
typographer: false # 不替换常见的排版元素
quotes ：定义单引号、双引号如何被替换。
quotes: '“”‘’' # 'single'、"double" 变成 ‘single’、“double”
quotes: '«»“”' # 'single'、"double" 变成 “single”、«single»
- 插件（plugins）
hexo-renderer-markdown-it 默认集成 5 个markdown-it 插件。
# Markdown-it config
markdown:
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
markdown-it-abbr ：缩写插件。
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
markdown-it-footnote ：脚注插件。
basic footnote[^1]
here is an inline footnote[^2](inline footnote)
and another one[^3]
and another one[^4]
[^1]: basic footnote content
[^3]: paragraph footnote content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)
markdown-it-ins ：插入插件（下划线插件）。
++inserted++
++inserted++
markdown-it-sub：下标插件。
H~2~O => H2O
H20
markdown-it-sup ：上标插件。
e^th^
eth
- 锚（anchors）
# Markdown-it config
markdown:
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶
level ：生成 Heading ID 的标题等级。
-
collisionSuffix ：Heading ID 重复时，数字的后缀
-
permalink ：‘true’ ，则创建一个锚标记，除标题外还有一个固定链接
-
permalinkClass ：用于固定链接锚标记的样式
-
permalinkSymbol ：用于固定链接标记的符号
- 参考 hexo-renderer-markdown-it 官网
绘制流程图
简介
所有流程图都由 节点 、几何形状 和 边 、箭头 / 线 组成。mermaid 定义了这些节点和边的制作和交互方式，还支持不同类型的箭头、多方向箭头以及与子图的连接。
节点
- 默认节点。
默认节点展示在方格中，作为节点对象，也作为节点的名字。
mermaid 语法如下：
flowchart LR
节点/文本
- 重命名节点。
默认节点对象就是节点的名称，可以使用 node[xxx] 的形式来设置节点的别名。
mermaid 语法如下：
flowchart LR
node[框中的文本]
流程图展开的方向
- 设置从上到下的方向（TD or TB）。
mermaid 语法如下：
flowchart TD
开始 --> 结束
- 设置从左到右的方向（LR）。
mermaid 语法如下：
flowchart LR
开始 --> 结束
- 设置从下到上的方向（DT or BT）。
mermaid 语法如下：
flowchart BT
开始 --> 结束
- 设置从右到左的方向（RL）。
mermaid 语法如下：
flowchart RL
开始 --> 结束
流程图的展开方向总结如下表:
| 符号 | 说明 | 流程图展开方向 |
|---|---|---|
TB |
top to bottom | 上到下 |
TD |
top-down/same as top to bottom | 上到下 |
BT |
bottom to top | 下到上 |
RL |
right to left | 右到左 |
LR |
left to right | 左到右 |
节点的形状
- 矩形节点。
mermaid 语法如下：
flowchart LR
矩形节点
mermaid 语法如下：
flowchart RL
node[矩形节点]
- 圆角边形节点。
mermaid 语法如下：
flowchart LR
node(圆角边节点)
- 球场形节点。
mermaid 语法如下：
flowchart LR
node([体育场状节点])
- 子程序形节点。
mermaid 语法如下：
flowchart LR
node[[子程序形节点]]
- 圆柱形节点。
mermaid 语法如下：
flowchart LR
node[(圆柱形节点)]
- 圆形节点。
mermaid 语法如下：
flowchart LR
node((圆形节点))
- 非对称形节点。
mermaid 语法如下：
flowchart LR
node>非对称形节点]
- 菱形节点。
mermaid 语法如下：
flowchart LR
node{菱形节点}
- 六角形节点。
mermaid 语法如下：
flowchart LR
node{{六角形节点}}
- 平行四边形节点。
mermaid 语法如下：
flowchart TD
node1[/平行四边形/]
node2[\平行四边形\]
- 梯形节点。
mermaid 语法如下：
flowchart TD
A[/上梯形\]
B[\下梯形/]
- 环形节点。
mermaid 语法如下：
flowchart TD
node((环形节点))
节点形状总结如下表：
| 形状 | Mermaid 符号 |
|---|---|
| 矩形 | xxx / node[xxx] |
| 圆形 | (xxx) |
| 球场形 | ([xxx]) |
| 子程序形 | [[xxx]] |
| 圆柱形 | [(xxx)] |
| 非对称形 | >xxx] |
| 菱形 | {xxx} |
| 六角形 | {{xxx}} |
| 平行四边形 | [/xxx/] / [\xxx\] |
| 梯形 | [/xxx\] / [\xxx/] |
| 环形 | ((xxx)) |
节点间的连接
可以连接两个节点通过一条线，可以设置不同类型的线和带有文字的线，节点可以使用链接/边连接，可以具有不同类型的链接或将文本字符串附加到链接。
- 实线直接连接。
mermaid 语法如下：
flowchart LR
A --- B
- 单方向箭头的实线连接。
- 从左到右方向。
mermaid 语法如下：
flowchart LR
A-->B
2.从右到左方向。
mermaid 语法如下：
flowchart RL
A-->B
- 从上到下方向。
mermaid 语法如下：
flowchart TB
A-->B
- 从下到上方向。
mermaid 语法如下：
flowchart BT
A-->B
- 带文本的节点连接。
mermaid 语法如下：
flowchart LR
A-- 文本 ---B
A---|文本|B
- 单方向箭头的文本线。
- 从左到右方向。
mermaid 语法如下：
flowchart LR
A-->|文本|B
A-- 文本 -->B
- 从右到左方向。
mermaid 语法如下：
flowchart RL
A-->|文本|B
A-- 文本 -->B
- 从上到下方向。
mermaid 语法如下：
flowchart TB
A-->|文本|B
A-- 文本 -->B
- 从下到上方向。
mermaid 语法如下：
flowchart BT
A-->|文本|B
A-- 文本 -->B
- 虚线和带文本的虚线。
- 水平方向。
mermaid 语法如下：
flowchart LR
A-.->B
B-. 文本 .-> A
- 竖直方向。
mermaid 语法如下：
flowchart TB
A-.->B
B-. 文本 .-> A
- 加粗线。
- 水平方向。
mermaid 语法如下：
flowchart LR
A ==> B
B == 文本 ==> A
- 竖直方向。
mermaid 语法如下：
flowchart TB
A ==> B
B == 文本 ==> A
- 自定义的箭头类型。
mermaid 语法如下：
flowchart LR
A --o B
B --x C
- 双方向的箭头。
mermaid 语法如下：
flowchart LR
A o--o B
B <--> C
C x--x D
节点间的连接线长度方向及类型汇总表如下：
| 类型 | 长度 1 | 长度 2 | 长度 3 |
|---|---|---|---|
| 实线 | -- |
--- |
---- |
| 带箭头的实线 | --> |
<--- |
----> |
| 加粗线 | === |
==== |
===== |
| 带箭头的加粗线 | ==> |
<=== |
<====> |
| 虚线 | -.- |
-..- |
-...- |
| 带箭头的虚线 | -.-> |
<-..- |
<-...-> |
- 连接链。
一行中（多个节点）可以声明多条线。
mermaid 语法如下：
flowchart LR
A -- 文本 --> B -- 文本 --> C
可以在同一行中声明多个节点链路。
mermaid 语法如下：
flowchart LR
A --> B & C--> D
可以在一行中描述一个依赖关系。
mermaid 语法如下：
flowchart TB
A & B--> C & D
上图关系如果使用基本语法描述同一个图，则需要四行进行描述。
mermaid 语法如下：
flowchart TB
A --> C
A --> D
B --> C
B --> D
- 链路的最小长度。
流程图中默认情况下，连接可以跨越任意数量的列组，但可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接长，在下面的示例中，在来自节点的链接中添加了两个额外的破折号。
mermaid 语法如下：
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
当链接标签写在链接的中间时，必须在链接的右侧添加额外的破折号，以下示例与前面的示例等效。
mermaid 语法如下：
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
- 破坏语法的特殊字符。
为了呈现更麻烦的字符，可以将文本放在引号中。
mermaid 语法如下：
flowchart LR
node["重庆(邮电)大学 "]
- 转义字符的实体代码。
可以使用此处示例的语法转义字符。
mermaid 语法如下：
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
给出的数字以 10 为基数，所以 # 可编码为#35;，还支持使用HTML 字符名称。
子图
- mermaid 定义子图使用下面的方式。
subgraph title
graph definition
end
下面是一个例子。
mermaid 语法如下：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
- 为子图设置显式 ID 。
子图设置显示 ID 可以使用下面的方式。
mermaid 语法如下：
flowchart TB
c1-->a2
subgraph ide1 [xxx]
a1-->a2
end
- 设置子图的边。
使用图形类型流程图，还可以如下面的流程图中那样设置子图的边和子图的边。
mermaid 语法如下：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
- 设置子图方向。
在 graphtype 流程图中，可以使用方向语句（direction RL/LR/TB/BT）来设置子图将呈现的方向。
mermaid 语法如下：
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
样式配置
在流程图中可以通过 style 关键字配置边框样式，包括填充颜色、边线颜色、边线实虚等等。可参考 CSS 样式表。
mermaid 语法如下：
flowchart LR
node1(开始)-->node2(结束)
style node1 fill: #f9f, stroke: #333, stroke-width: 4px;
style node2 fill: #ccf, stroke: #f66, stroke-width: 2px, stroke-dasharray: 5,5;
- 参考 Mermaid 官网教程