起初并不知道mermaid这个东西，只是偶然间在写Redux教程的时候，想用一个图来描述Redux是如何工作的。然后写Markdown的时候，用的是StackEdit在线Markdown编辑器，发现它上面已经用上了像流程图一样的工具，而这个工具又正好是我想要的。于是就看了一下它的前端代码，发现了mermaid。

然后我就去Github上搜索了一下，奇妙的事情是还真有。于是就稍微花了点时间来看下它的用法。

之后再去看了下Hexo的插件，了解下其他Hexo的插件是怎么写的，大致又花了一些时间去看，以及Hexo的依赖node_modules里面的内容。

实话说，hexo-filter-mermaid-diagrams是依照hexo-filter-flowchart改写的，不过花了我好几天时间去验证这个到底能不能用、好不好用。大致可以分成三个部分的验证。

第一个部分是验证mermaid所要求的代码格式，并不是包含了HTML标签的代码它都能解析成图表的，这个可以去看下它的官方示例。所以刚开始代码里面一直是报Error: <svg> attribute viewBox: Expected number, "0 0 -Infinity -Infin…"。这个正好是因为通过hexo处理过后，把我们要的mermaid代码片段（字符串）加入了不需要的
标签，它把换行符加了变成了
，很凌乱！！！当时输出代码片段用的是div包起来的：

1
<div class="mermaid">${content}</div>

脚本处理如下：

1
data.content += `<script src="https://unpkg.com/mermaid@${mermaidConfig.version}/dist/mermaid.min.js"></script><script>if(window.mermaid){mermaid.initialize(${JSON.stringify(mermaidConfig.options)});}</script>`;

而且怎么改都是报上面的错误，Fuck有木有想说出来的？后来想是不是文章里面的Markdown写法问题，然后就尝试在文章里面把mermaid代码片段粘贴复制粘贴复制，在尝试了很多次后发现很不稳定。决定放弃了。

然后想如果将这个片段写入到标签的属性上面去会怎样，结果这样尝试后发现果然有效果，很激动：

1
<div class="mermaid" data="${content}">${content}</div>

写完之后就决定将这插件发布到npm上面以及hexo插件列表，于是npm上就有了1.0.0的版本。

而此时的激情还没消灭，于是又来看看在文章列表页会不会有效果，结果发现当文章列表中出现mermaid代码片段的时候，整个列表页的结构会发现变化。data="${content}"的做法同样是带来了副作用。然后就在上面增加一些特殊的符号比如：data="[${contnet}]"等等，发现还是修复不了，于是又决定放弃这样的做法了。将标签改成<pre>。

这就是第二部分改标签。将标签改了之后其实也是时好时坏的，反正又折腾了好久。直到我把插件里面加入的脚本字符串去掉，单纯的输出，然后通过手动引入mermaid.js 才能完美解决问题。所以，这才有了第三部分手动加入js。

其实这种结果并不是我想要的，我想要的是只要安装了这个插件，用户只需要配置_config.yml就够了的。但是几经尝试后还是失败，很无奈啊！！！只能这样手动引入的麻烦方式还请原谅！！！

其实hexo-filter-flowchart在首页文章列表展示也是有问题的，不知道作者有没有注意到。当然这里不是说对方的各种不好，只是期待能稍微再做点改进就好了。但这里不得不要感谢hexo-filter-flowcart作者，因为我的插件也是在他的基础上才能发布的。所以，真的是万分感谢！！！

哎，好了，感觉口水流干了，不会写文章，想哭~~~