集成mermaid的画图到hexo

这个也折腾我一下，网上的方法试了都不行，最后还是靠自己来解决。。。如果有朋友也同样遇到，可以参考下我的思路，即使方法不适合你，也可以参考问题定位方法。

背景

mermaid的画图还是凑合使用，可以方便画时序图，在typora就经常使用，换到hexo，发现不能用，这里给大家一个解决方案。

环境

我先我的环境贴出来，版本不是绝对，只是参考而已

node v12.3.1
npm v6.9.0
hexo: 3.9.0
hexo-cli: 2.0.0
os: Darwin 18.6.0 darwin x64
node: 12.3.1
v8: 7.4.288.27-node.18
uv: 1.29.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.38.0
napi: 4
llhttp: 1.1.3
http_parser: 2.8.0
openssl: 1.1.1b
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1

编辑工具vscode

本人使用vscode来写blog，有需要的朋友可以参考下，就是安装插件Mermaid Preview

配置hexo

需要做的只有三个地方

安装插件

使用npm或者yarn都可以，我这边使用npm

1	npm install hexo-filter-mermaid-diagrams --save

修改主题文件_config.yml

这里很多教程说修改根目录下的，而不是主题，但是我发现我需要修改主题的，我用的是next，所以修改themes/next下的_config.yml，之前改成用根目录下不管用，后面发现原来next的配置中也有mermaid配置，如下所示

# Mermaid tag
mermaid:
  enable: false
  # Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

这个也是导致不成功的原因，因为enable属性就是false，怎么能成功呢。。。

如果你检查了自己的主题的配置文件也具有这个样的配置项替换下如下，如果没有，可以贴到主题的配置文件中或者根目录的配置文件_config.yml中

# Mermaid tag
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

修改主题layout引入mermaid.js

我是next主题，所以我修改路径是themes/next/layout/_partials/footer.swig文件，在最后增加如下内容，使用其他主题的，也可以根据对应的架构修改相似的文件

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

上述目的就是引入js文件

重启hexo

先清，hexo clean ，再生 hexo g,再跑 hexo s

测试

使用如下代码快速验证下ide或者hexo效果

代码：

` ` `mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
` ` `

把首尾去掉反引号的空格去掉。

效果如下：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

总结

如果发现没作用，打开浏览器的开发者模式看下是否拉到js文件，我就是这么解决问题。