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 ghexo 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包的安装问题;

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