插件安装

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块

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

参考与友链