hexo 支持流程图 - mermaid

发表于

为了同步使用印象笔记流程图，所以这里选择了mermaid.js 语法来实现
mermaidjs 详细使用语法参见 https://mermaidjs.github.io/#/

使用方法：

参考：https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

安装 package

1
npm install hexo-filter-mermaid-diagrams

在你的博客目录而不是项目根目录

配置 _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

添加执行js

swig template engine:

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 %}

找到模板文件的公共footer文件，添加如上类似代码

问题和优化加载

问题：mermaid 8.2.1的版本流程图只能自动缩放，如果新版本不存在这个问题可以忽略

类似以下问题：https://github.com/knsv/mermaid/issues/838

可以修改源码：

1
2
3
4
5
6
// - 注释代码
// svg.attr('width', '100%');
// svg.attr('style', `max-width: ${width}px;`);
  
// + 添加代码
svg.attr('width', g.graph().width);

效果如下：超出长度不会强制缩放适应宽度

graph LR

1 --> 2
            2 -->  3
            3 -->  fasdf
            fasdf --> fasdfasdfasdf
            fasdfasdfasdf --> fasdfasdfasdffasdfasdfasdf
            fasdfasdfasdffasdfasdfasdf--> fasdfasdfasdfd
            fasdfasdfasdfd --> fasdfasdfasdfasdfasdf
            fasdfasdfasdfasdfasdf --> fasdfdd 
            fasdfdd --> 10
            10 --> 12
            12 --> 13
            13 --> 14
            14 --> 15

优化：mermaid.js 文件太大可以按需加载

先说下整个流程的实现方式

  1. 首先插件实现的效果是对 mermaid的元素添加了 mermaid 的class名
  2. 然后导入了 mermaid.js 渲染对应的图表（实际上因为js的后执行你会看到一次明显的页面闪动）

优化点:

  1. 未加载的默认样式添加一个默认loading 刷新可见效果
  2. 判断页面存在 mermaid 元素再加载js

效果如下：
mermaidLoading

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 修改你的模板css文件，添加全局样式 */
.mermaid {
  max-height: 200px;
  position: relative;
  overflow: hidden;
  &:after {
    content: 'Loading ...';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4b5154;
    color: #FFF;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.mermaid[data-processed]{
  max-height: none;
  overflow: auto;
  &:after {
    content: none;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 修改你的模板全局js文件
window.mermaidUri = '/lib/mermaid/8.2.1/mermaid.min.js';
window.loadScript = function(url) {
  return new window.Promise(function(resolve) {
    var script = window.document.createElement ("script");
    script.type = "text/javascript";

    if (script.readyState){ //IE
      script.onreadystatechange = function() {
        if (script.readyState === 'loaded' || script.readyState === 'complete'){
          script.onreadystatechange = null;
          resolve(script);
        }
      };
    } else { //Others
      script.onload = function(){
        resolve(script);
      };
    }
    script.src = url;
    window.document.getElementsByTagName("head")[0].appendChild(script);
  });
};

function initMermaid() {
  // 存在.mermaid的元素 加载执行 mermaid.js
  if (window.document.querySelector('.mermaid')) {
    window.loadScript(window.mermaidUri).then(function () {
      if (window.mermaid) {
        window.mermaid.initialize({
          startOnLoad: true,
          flowchart:{
            useMaxWidth: false,
            htmlLabels: true
          }
        });
      }
    });
  }
}

// 需要的地方执行
initMermaid();