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