Fork me on GitHub

如何让你的HEXO博客支持手写流程图？

发表于 | 更新于 | 分类于 | 评论数：

我们在写偏技术类的文章时候，常常需要用图形来解释。比如我要表达一个流程的进行，通常的做法是先在流程图工具中将流程图画好，然后导出图形工具，然后再上传到图片服务器，最后再到文章中插入图片路径。而其实所用到的图片只是很小的一个流程图而已。用流程图表达如下：

graph LR
    绘图 --> 导出图像
    导出图像 --> 上传服务器
    上传服务器 --> 文章插入

其实根本没必要这么麻烦，用hexo支持的流程图语法书写就只要像下面这种格式写出来即可。

1
2
3
4
graph LR
	绘图 --> 导出图像
	导出图像 --> 上传服务器
	上传服务器 --> 文章插入

然后上下文用md的代码格式包裹起来即可，然后用了什么语法加以注明即可，一个简单的流程图就已经生成成功了，根本不需要复杂的绘图，导出，然后上传这些流程。hexo支持的流程图有好几种，本文主要介绍三种，分别是以下三种。

  • hexo-filter-mermaid-diagrams
  • hexo-filter-flowchart
  • hexo-filter-sequence

其中，mermaid支持大部分流程图与时序图，甚至还能当成思维导图来用，比如我把上面三种流程图用思维导图来表示，如下：

graph TD
    B["HEXO支持的流程图"]
    B-->C[mermaid]
    B-->D[flowchart];
    B-->E[sequence];

看，简单的三行代码即可生成一个规范的思维导图，是不是很方便呢？下面我们就开始具体讲解这三种流程图，主要讲解三种流程图的安装方法，以及使用办法。

1. hexo-filter-mermaid-diagrams

mermaid是我花了很多时间才弄好的，主要原因是涉及的细节比较多，因为nodejs版本的问题，yarn版本的问题，总有一些莫名其妙的问题导致最终不能实现，最终的解决办法是，我卸载了nodejs，卸载了hexo，卸载了yarn；重新用brew安装了nodejs，重新安装了hexo，重新安装了yarn，然后重新按照这个插件作者的教程进行了安装，终于成功了。

首先，进入到博客的根目录，一定要在博客的根目录，很重要：

1
cd your_blog

然后执行下面代码，用yarn来安装插件：

1
yarn add hexo-filter-mermaid-diagrams

执行完成后在博客根目录下的node_modules种看下有没有hexo-filter-mermaid-diagrams这个插件文件夹，如果没有，说明没安装成功，安装成功后执行下一步，打开博客根目录下面的_config.yml文件，在底部插入以下代码：

1
2
3
4
5
6
# 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

完成上一步操作之后打开主题目录的themes/next/layout/_partials/footer.swig，这里因为我用的是next主题，其他主题应该大同小异，在footer.swig文件最后加上以下代码：

1
2
3
4
5
6
7
8
{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
{% endif %}

添加完成后，回到博客根目录的_config.yml，把external_link的值改为false，默认的为true，这一步绝大多数教程中都没有写。

这里需要着重说明下，下方我会放出作者的官方教程，但由于我之前一直没成功，所以我联系到了作者本人，上述代码加了之后的确也生效了，但这个跟其它博主的教程有不一样之处，如果上述代码加入后未生效，可尝试其它教程代码试试。

做完以上三步之后，应该已经生效了，赶紧hexo clean试试，然后用hexo g，hexo s试试看生效了没。

参考资料（具体使用教程请参考官方使用教程）：

  1. Hexo中引入Mermaid流程图：点击查看
  2. hexo-filter-mermaid-diagrams插件开发杂谈:点击查看
  3. 插件官方位置:点击查看
  4. 插件官方使用教程:点击查看

2. hexo-filter-flowchart

flowchart是另一款流程图插件，跟上文的mermaid有一定的区别，主要体现在使用方法上，安装方法非常简单，直接在博客根目录输入以下代码，使用npm来进行安装：

1
npm install --save hexo-filter-flowchart

安装完成后直接使用即可，但是官方教程中说要在博客根目录中进行配置，实际使用情况是，直接用npm安装之后我就可以使用了。so，配置教程我就省了，如果不行的话再考虑配置问题吧！食用方法如下，关于flowchart写法请参考官方教程，我这里就不多做介绍了。

一个好看而又完整的流程图就出现了，跟mermaid相比，我跟喜欢flowchart，但写法没有mermaid简单。

参考资料：

  1. 插件官方GitHub仓库:点击查看
  2. 插件官方使用教程:点击查看

3 . hexo-filter-sequence

sequence主要是用来画时序图，安装方法跟上文的flowchart很像，作者貌似也是同一个，安装方法如下，打开终端博客根目录，输入以下npm安装代码：

1
npm install --save hexo-filter-sequence

同flowchart，我一样没进行安装就生效了，不知道是不是mermaid的原因导致的，直接就可以用，完成效果见下图，写法就自行参考官方资料吧。

看，上面就是一个时序图，nice不！

参考资料：

  1. 插件使用教程:点击查看
  2. 插件官方GitHub仓库:点击查看

三种流程图的写法就完毕了，花了好长时间才搞定，如果你无法成功安装和使用以上插件，可以从以下两个方面来分析：

  • yarn包的安装问题；
  • npm包的安装问题；

我一开始无法正常安装就是因为遇到了这两种问题，如果还不能解决，可在评论区给博主留言。