hexo优化:Markdown语法引入Flowchart和Mermaid流程图

我们在写Hexo博客文章时候,常常需要用图形来描述。但是有的时候画图不易修改,原图需要在本地保存,另外上传图片比较麻烦,加载图片又相对耗时。所以如何直接使用Markdown编写的流程图能够在hexo博客上直接生成就成了一个问题,另外,怎样通过Markdown来画流程图呢?

接下来,相信这篇博客能对你起到一定的帮助哦~

引入flowchart流程图

1、添加支持

Hexo 默认下markdown不支持flowchart流程图,需要添加支持,用git-bash在hexo目录下进行输入:

npm install --save hexo-filter-flowchart

接下来只需要输入对应的实例来测试就可以了。


2、测试

接下来,先进行测试一下,使用markdown进行编写flowchart语句。如下所示:

···flow   #由于渲染问题,请自行将 · 替换为 `
st=>start: 开始语句
in=>inputoutput: 输入值
e=>end: 结束语句
op=>operation: 执行操作
cond=>condition: 是否成立?
out=>inputoutput: 输出值

st->in->op->cond
cond(yes)->out
cond(no)->op
out->e
···

写好后,可以在本地(http://localhost:4000/)查看结果如下图:

Created with Raphaël 2.2.0

你可能感兴趣的:(hexo,hexo,流程图,markdown)