目 录CONTENT

文章目录

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

慧行说
2018-08-02 / 26 评论 / 0 点赞 / 532 阅读 / 1,817 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-05-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

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

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

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,然后重新按照这个插件作者的教程进行了安装,终于成功了。

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

cd your_blog

然后执行下面代码,用yarn来安装插件:

yarn add hexo-filter-mermaid-diagrams

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

# 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文件最后加上以下代码:

{% 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来进行安装:

npm install --save hexo-filter-flowchart

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

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

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

参考资料:

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

3 . hexo-filter-sequence

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

npm install --save hexo-filter-sequence

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

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

看,上面就是一个时序图,nice不!

参考资料:

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

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

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

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

0

评论区