前言

偶然间发现typora的图表功能，发现挺哇塞，最起码不用再打开专业工具，画图导出，巴拉巴拉。

估计我也就这一股新奇的劲。。。

言归正传

问题

我采用的hexo+githubpage的方式搭建的博客，本地写的一些流程图都能渲染成功，为何上传到GitHub，网页展示全代码块

如果渲染正常应该是这样的：

不应该啊，我第一时间思考到这个软件大多数都是通过css渲染实现的，去谷歌一看，已经有人做出了相关的插件。hexo-filter-mermaid-diagrams。

原因在于转静态文件时，无法识别相关的绘图代码块，按照text转码展示。

尝试

npm install hexo-filter-mermaid-diagrams

按将插件安装上

然后再_config.yaml里面添加上mermaid的相关配置

#mermaid绘图
mermaid:
  enable: true
  version: "7.1.2" # 可根据需要指定版本
  options: # 可选配置

我 hexo clean+hexo g +hexo d一套组合拳下来还是不行，我在想是什么问题，去查阅作者博客一看，作者GitHub

还需修改最后一处：

找到\themes\butterfly\layout\下面的footer.pug。我是butterfly主题，所以我的是pug文件，具体可以参照作者GitHub主页。

if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://cdn.jsdelivr.net/npm/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);
    }

由于源中转失效，去mermaid找了新的。

还是不行。

结果发现有两个config，想起来当时搭博客的时候新建的，其二取一，优先按照butterfly后缀的config文件来。

将config文件添加如下：

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

最新版为11.4.0,所以添加上版本号并将enable改为true。

hexo clean && hexo generate

hexo d

等待更新

大功告成