在hexo上使用mermaid流程图

最近整理行业资料的时候发现某资料中使用了流程图，然后记起Mermaid可以实现这个效果， 后来发现确实有大佬已经将其做成了hexo插件。 但按照其安装流程发现会出错， 不知道是不是hexo版本的原因， 经常几次试验后终于成功了。

插件地址：https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

▌一、安装插件

• yarn 安装
  yarn add hexo-filter-mermaid-diagrams

• npm 安装
  npm install hexo-filter-mermaid-diagrams

▌二、编辑配置文件

github的教程说明是说将下面配置代码放置hexo根目录的config.yml当中，不知道是不是hexo版本（我的是5.2）的原因，事实上这样做会出错； 正确的做法是，我们要把下面的代码放置theme目录下的config.yml中。

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， 这里默认是有注释的，但不把注释去掉会出错

▌三、添加mermaid.js

将下面代码放在’head.ejs’ 或者footer.ejs都可以：

<% if (theme.mermaid.enable) { %>
<script src='https://unpkg.com/mermaid@<%- theme.mermaid.version %>/dist/mermaid.min.js'></script>
<% var options = theme.mermaid.options; %>
<script>
    if (window.mermaid) {
        mermaid.initialize(<%- JSON.stringify(options) %>);
    }
</script>
<% } %>

▌四、使用代码

三点mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
三点

▌五、进阶

修改lib - > render.js 修复特殊字符问题， 参考github文件

找到以下代码：

return `${start}<pre class="mermaid">${content}</pre>${end}`;

替换为：

var reg = RegExp(/[<>"&'￠£¥§©®×÷]/g)
if (reg.test(content)) {
  // true
  var result = content.replace(reg, function () {
    // console.dir(arguments)
    switch (arguments[0]) {
      case '<':
        return '&lt;';
      case '>':
        return '&gt;';
      case '"':
        return '&quot;';
      case '&':
        return '&amp;';
      case "'":
        return '&#39;';
      case '￠':
        return '&cent;';
      case '£':
        return '&pound;';
      case '¥':
        return '&yen;';
      case '§':
        return '&sect;';
      case '©':
        return '&copy;';
      case '®':
        return '&reg;';
      case '×':
        return '&times;';
      case '÷':
        return '&divide;';

      default:
        break;
    }
  })
} else {
  // no symbol in the mermaid code.
  result = content
}
return `${start}<pre class="mermaid">${result}</pre>${end}`;