我们在写偏技术类的文章时候,常常需要用图形来解释。比如我要表达一个流程的进行,通常的做法是先在流程图工具中将流程图画好,然后导出图形工具,然后再上传到图片服务器,最后再到文章中插入图片路径。而其实所用到的图片只是很小的一个流程图而已。用流程图表达如下:
graph LR 绘图 --> 导出图像 导出图像 --> 上传服务器 上传服务器 --> 文章插入
其实根本没必要这么麻烦,用hexo支持的流程图语法书写就只要像下面这种格式写出来即可。
1 | 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 | # mermaid chart |
完成上一步操作之后打开主题目录的themes/next/layout/_partials/footer.swig,这里因为我用的是next主题,其他主题应该大同小异,在footer.swig文件最后加上以下代码:
1 | {% if theme.mermaid.enable %} |
添加完成后,回到博客根目录的_config.yml
,把external_link的值改为false,默认的为true,这一步绝大多数教程中都没有写。
这里需要着重说明下,下方我会放出作者的官方教程,但由于我之前一直没成功,所以我联系到了作者本人,上述代码加了之后的确也生效了,但这个跟其它博主的教程有不一样之处,如果上述代码加入后未生效,可尝试其它教程代码试试。
做完以上三步之后,应该已经生效了,赶紧hexo clean
试试,然后用hexo g
,hexo s
试试看生效了没。
参考资料(具体使用教程请参考官方使用教程):
2. hexo-filter-flowchart
flowchart是另一款流程图插件,跟上文的mermaid有一定的区别,主要体现在使用方法上,安装方法非常简单,直接在博客根目录输入以下代码,使用npm来进行安装:
1 | npm install --save hexo-filter-flowchart |
安装完成后直接使用即可,但是官方教程中说要在博客根目录中进行配置,实际使用情况是,直接用npm安装之后我就可以使用了。so,配置教程我就省了,如果不行的话再考虑配置问题吧!食用方法如下,关于flowchart写法请参考官方教程,我这里就不多做介绍了。
一个好看而又完整的流程图就出现了,跟mermaid相比,我跟喜欢flowchart,但写法没有mermaid简单。
参考资料:
3 . hexo-filter-sequence
sequence主要是用来画时序图,安装方法跟上文的flowchart很像,作者貌似也是同一个,安装方法如下,打开终端博客根目录,输入以下npm安装代码:
1 | npm install --save hexo-filter-sequence |
同flowchart,我一样没进行安装就生效了,不知道是不是mermaid的原因导致的,直接就可以用,完成效果见下图,写法就自行参考官方资料吧。
看,上面就是一个时序图,nice不!
参考资料:
三种流程图的写法就完毕了,花了好长时间才搞定,如果你无法成功安装和使用以上插件,可以从以下两个方面来分析:
- yarn包的安装问题;
- npm包的安装问题;
我一开始无法正常安装就是因为遇到了这两种问题,如果还不能解决,可在评论区给博主留言。