插件安装

npm install hexo-filter-mermaid-diagrams

修改配置文件

博客配置:_config.yml

  _config.yml在根目录。

  1. 在末尾添加以下内容:
# 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
  1. 搜索external_link字段并改为false
external_link:
enable: false # Open external links in new tab
field: site # Apply to the whole site
exclude: ''

  footer.pug路径在themes\butterfly\layout\includes\,在文件末尾添加以下内容:

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

主题配置:_config.butterfly.yml

  _config.butterfly.yml是主题配置文件,通常在themes\butterfly\。搜索找到mermaid字段,并启用mermaid:

mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme:
light: default
dark: dark

设置流程图背景为透明(可选)

  这里是因为mermaid会默认给流程图添加灰色背景,而设置成透明背景会显得比较美观。

  1. 找到themes\butterfly\source\css\custom.css,若没有custom.css请新建一个,在末尾添加以下内容(transparent即为“透明”,后续想修改背景颜色可以直接修改background字段):
/*mermaid*/
.mermaid {
background: transparent!important;
opacity: 0.9;
}
  1. 在_config.butterfly.yml中搜索inject字段,在head中添加以下内容:
inject:
head:
- <link rel="stylesheet" href="/css/custom.css">

编写mermaid

  在文章中插入mermaid块即可,也就是:

mermaid块

  渲染的得到的流程图如下:

参考与友链