hexo 渲染 mermaid(水一篇)

我用的是 butterfly 主题

1. 安装插件

1
npm install --save hexo-filter-mermaid-diagrams

2. 配置

在主题目录下的themes/butterfly/_config.yml中添加以下配置：

1
2
3
4
5
6
7
8
mermaid:
  enable: true
  # Write Mermaid diagrams using code blocks
  code_write: true
  # built-in themes: default / forest / dark / neutral
  theme:
    light: default
    dark: dark

在themes/butterfly/layout/includes/footer.pug末尾添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
if theme.mermaid && theme.mermaid.enable
script(src=`https://unpkg.com/mermaid@11.5.0/dist/mermaid.min.js`)
script.
    if (window.mermaid) {
    mermaid.initialize({
        startOnLoad: true,
        theme: '#{theme.mermaid.theme || 'default'}',
        securityLevel: 'loose',
        flowchart: { useMaxWidth: true, htmlLabels: true }
    });
    }

3. 在文章中使用

1
2
3
4
<pre class="mermaid">graph TD
    A[开始] --> B{条件}
    B -->|是| C[执行操作]
    B -->|否| D[结束]</pre>

4. 重新生成即可