在Hexo中插入Mermaid图表

Mermaid是什么？

Mermaid是一个基于JavaScript的流程图、序列图、甘特图等图表生成工具。使用Mermaid可以方便地在Markdown文档中嵌入各种图表，而无需手动绘制或使用其他辅助工具。

Mermaid支持多种流程图、序列图、甘特图等图表类型，使用简单明了的语法来描述图表元素之间的关系。在插入Mermaid图表之前，需要在Hexo中安装相应的插件，如前面所述。

Mermaid提供了丰富的语法来绘制各种类型的图表，具体语法可以参考官方文档。在Hexo中插入Mermaid图表时，只需要在Markdown文档中使用Mermaid代码块即可。

如何在Hexo中插入Mermaid图表

安装Mermaid插件

npm install hexo-filter-mermaid-diagrams

修改配置文件

在hexo的_config.yml文件（根目录的并非主题的）中，添加以下内容：

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

修改主题

根据主题不同，修改方式不同，我使用的ayer主题，只要修改主题目录themes/ayer下的_config.yml文件，将Enable选项改为true即可：

mermaid:
  enable: true
  cdn: https://cdn.staticfile.org/mermaid/8.14.0/mermaid.min.js
  theme: forest

Mermaid图表演示

下面是mermaid的图表描述：

graph LR
A(面试)-->B(笔试)
A-->C(面试)
C-->C1(数据结构与算法*)
C-->C2(计算机网络)
C-->C3(操作系统Linux)
B-->B1(数据结构与算法*)

会生成以下图表：

graph LR
A(面试)-->B(笔试)
A-->C(面试)
C-->C1(数据结构与算法*)
C-->C2(计算机网络)
C-->C3(操作系统Linux)
B-->B1(数据结构与算法*)