一、插件安装

1
npm install hexo-filter-mermaid-diagrams

二、修改配置文件

2.1 博客配置：_config.yml

  _config.yml在根目录。

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

2.2 主题配置：_config.butterfly.yml

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

1
2
3
4
5
6
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

2.3 设置流程图背景为透明（可选）

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

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

三、编写mermaid

  在文章中插入mermaid块即可，也就是：

mermaid块

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

四、参考资料