0%

流程图调色

网上介绍在Hexo下使用flowchart制作流程图的文章比较多,一般是调用hexo-filter-flowchart插件。
由于我将Next主题调成了暗黑样式,流程图输出的颜色和Hexo默认的配色就很不协调了。经过一番查找,确定hexo-filter-flowchart插件的样式表路径为:

1
node_modules/hexo-filter-flowchart/index.js
1
2
3
4
5
'scale': 1,
'line-width': 2,
'line-length': 50,
'text-margin': 10,
'font-size': 12,

同时确定此插件其实调用的是https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js这个脚本。

在hexo-filter-flowchart/index.js中没有定义流程图颜色样式,使用的是flowchart.min.js脚本默认颜色配置。通过阅读flowchart.min.js,得到如下相关的默认配置参数:

1
2
3
4
5
6
7
8
9
10
11
12
"line-width":3,
"line-length":50,
"text-margin":10,
"font-size":14,
"font-color":"black",
"line-color":"black",
"element-color":"black",
fill:"white",
"yes-text":"yes",
"no-text":"no",
"arrow-end":"block",
"class":"flowchart"

很明显,默认的配色是黑线、黑边、黑字体、白色填充,正好和我现在使用的暗黑模式相反。

于是添加自定义的颜色配置到index.js中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var assign = require('deep-assign');
var renderer = require('./lib/renderer');

hexo.config.flowchart = assign({
flowchart: 'https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js',
raphael: 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js',
options: {
'scale': 1,
'fill': "dimgray", //深灰色填充
'line-width': 2,
'line-length': 50,
'line-color': "white", //白色流程线及箭头
'element-color': "white", //白色边框
'text-margin': 10,
'font-size': 12,
'font-color': "white", //白色字体
}
}, hexo.config.flowchart);

hexo.extend.filter.register('before_post_render', renderer.render, 9);

这里需要注意的是颜色值不支持16进制,比如#FF5555,需要使用英文名字,并要用半角双引号包起来。
看一下效果吧。