[toc]

利用 hexo-filter-mermaid-diagrams 插件引入 Mermaid 并通过 hexo 的 filter 解决语法冲突。

问题描述

虽然 sm 图床早就被墙娘推倒，但由于替身使者 smms.app 的存在以及之前 s2.loli.net 尚能访问，影响不是很大。但是最近访问图片链接的速度非常慢~，甚至连接失败，且直接插入图片的方式不够优雅，故决定今后能用动态生成解决的问题尽量不用静态图片。

Mermaids 是一款基于 JavaScript 的绘制图表的工具，启发自 Markdown 的文本标记特性，能够动态地创建和修改图表。

View on GitHub

安装启用

自动版

如果使用的主题内置了 mermaid 模块，可根据主题文档进行设置。

ButterFly 内置了 mermaid，在 _config.yml 中设置：

1
2
3
4
5
6
mermaid:
  enable: true
  # 内置的样式: default/forest/dark/neutral
  theme:
    light: neutral
    dark: dark

手动版

如果使用的主题没有内置 mermaid 模块，则需要按照 hexo-filter-mermaid-diagrams 的文档进行自定义设置。

  1. 安装插件

    1
    npm install hexo-filter-mermaid-diagrams

  2. 在博客根目录下的 blog/_config.yml 添加：

    1
    2
    3
    4
    5
    6
    # 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

  3. 在主题模板的 layout 文件夹下的如 after_footer.pug , after-footer.ejs ，swig 等组件中任选一处添加代码。

    如果是 footer.swig 或其他 swig 文件

    1
    2
    3
    4
    5
    6
    7
    8
    {% if theme.mermaid.enable %}
      <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
      <script>
        if (window.mermaid) {
          mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
        }
      </script>
    {% endif %}

    如果是 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);
        }

    如果是 after-footer.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    <% 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>
    <% } %>

  4. 如果不生效，尝试修改博客根目录的 blog/_config.yml 中的 external_link

使用 mermaid 画图

在 Typora 中使用 {% mermaid %}` 和 `{% endmermaid %} 包裹内容，如：

1
2
3
4
5
6
7
8
9
10
11
12
{% mermaid %}
graph LR;
  subgraph A[大矩形框]
    B[小矩形框B];
    C[小矩形框C];
    D[小矩形框D];
  end

  B --> E[小矩形框E];
  E --> F[小矩形框F];
  F --> C;
{% endmermaid %}

但由于本地编辑器不认识 % 标签，只认识 ``` 标签，故在编辑器中使用 % 标签没有预览图像，尝试使用 hexo 的 filter 解决。

标签转换

在本地仍然使用 ``` 标签方便编辑与预览

在 hexo 开始渲染文章前转化为 % 标签。

在主题文件夹的 \scripts\filters 中新建一个 js 文件，文件名任意

1
2
3
4
5
"use strict";
hexo.extend.filter.register('before_post_render', function(data){
  data.content = data.content.replace(/{% mermaid %}([\s\S]*?){% endmermaid %}/g, "{% mermaid %}$1{% endmermaid %}");
  return data;
},0);

完成后 clean 并重新生成即可。

如下是一个用 ``` 标签绘制的图表

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
flowchart TB
    c1-->a2(a2)==>id1[(Database)]
    subgraph one
    a1((a1))-.->a2 --> a3[/a3/]
    %% ~~~ 表示不画出来的联系
    end
    subgraph two
    b1([b1])--ob2{{b2}}-->A[/b3\]
    end
    subgraph three
    c1 x--x c2{c2}
    end
    one --"pp"--> two
    three --> two
    two --> c2 -->c3((c3))

    classDef someclass fill:#f96
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
flowchart TB
    c1-->a2(a2)==>id1[(Database)]
    subgraph one
    a1((a1))-.->a2 --> a3[/a3/]
    %% ~~~ 表示不画出来的联系
    end
    subgraph two
    b1([b1])--ob2{{b2}}-->A[/b3\]
    end
    subgraph three
    c1 x--x c2{c2}
    end
    one --"pp"--> two
    three --> two
    two --> c2 -->c3((c3))

    classDef someclass fill:#f96