之前一直想借助什么工具，用文本的方式自动生成图表，发现有Mermaid、Plantuml、Graphviz等多种方式。偶然搜索Hexo的插件，发现这三个都有，就一直想折腾一下，终于有空，研究一番发现Mermaid好像不需要在本地渲染，置入js后可以在浏览器渲染，遂暂时抛弃另外两个方案。

记录下配置过程。

安装

使用这个插件：hexo-filter-mermaid-diagrams

hexo所在路径下， npm install hexo-filter-mermaid-diagrams --save

修改配置文件

在Hexo主题的配置文件（不是hexo配置文件）_config.yml内增加如下代码：

1
2
3
4
5
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true
  version: "11.5.0" 
  options: {}

修改pug文件

在Hexo主题文件夹找到after_footer.pug，增加代码：

1
2
3
4
5
6
7
if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
  script.
    if (window.mermaid) {
      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
      mermaid.initialize(options);
    }

若配置文件格式不同，如.ejs或.swig的，可以在hexo-filter-mermaid-diagrams下面复制代码。

插入Mermaid代码

要使用这样的格式：

1
2
3
4
5
6
7
8
<div class="mermaid">
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
</div>

或者（mermiad是故意写错的，总是被识别编译，懒得转义了23333）

1
2
3
4
5
6
7
8
```mermiad
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

示例

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

学习Mermaid

参见官方文档：

官方Playground：

CHANGELOG

  • 20250515 Arlmy 创建、发布