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();