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

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

引入flowchart流程图

1、添加支持

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

1	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/）查看结果如下图：

3、语法结构

语法结构如下：X=>Y: Z
其中，X是变量名， Y是指操作模块名，冒号后面的Z是具体显示的文字内容。需要注意的是，冒号后要加空格才能识别。
其中，变量名X和文字内容Z可以比较随意设置，但是Y是有固定的内容，主要有以下几种：

操作模块名	表示含义说明
start	开始
end	结束
operation	普通操作块
subroutine	子任务块
condition	判断块
inputoutput	输入输出块

转向控制

下面一段是流程图的转向控制，->是表示下一步要执行的操作。如：st->in->op->cond，表示的是先从st转到in，然后再到op，最后到cond。这里可以连续写，也可以段开写，如写成下面的也是完全OK的。
st->in in->op op->cond

判断分支

其中，condition是判断，可以取yes和no两种结果，对于不同结果可以有不同走向。如：
cond(yes)->out 表示condition成立时转向out执行；
cond(no)->op表示condition不成立时转向op执行；

如果需要设置流程图的样式或者其他设置，可以参考网址：http://flowchart.js.org/

引入Mermaid流程图

1、添加支持

Hexo 默认是markdown不支持Mermaid流程图的，需要添加支持，和添加flowchart流程图差不多，即用git-bash在hexo目录下进行输入：

1	npm install --save hexo-filter-mermaid-diagrams

但是对于Mermaid流程图而言，还需要在主题配置文件中进行设置下，找到mermaid模块，将enable后面的false改为true即可。
例如，我用的是next主题，则到blog/themes/next/_config.yml内搜索mermaid，找到模块的enable，改为true即可。如下所示：

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

2、测试

接下来，先进行测试一下，使用markdown进行编写mermaid语句。如下所示：

···mermaid #由于渲染问题，请自行将 · 替换为 `
graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA      
···

写好后，可以在本地（http://localhost:4000/）查看效果如下图：

如果发现出现问题，请先核对自己录入是否出错。我的仅需要上面两个步骤就成功了。如果你的还是有问题的话，可以参考：Hexo引入Mermaid流程图和MathJax数学公式进行更多的配置。

3、语法结构

语法结构如下：A[名称] —> B(名称)
其中，A、B均代表形状名称， —>表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：

括号形式	形状样式
[ ]	矩形框
( )	圆角矩形框
{ }	菱形
(( ))	圆形

如果没有形状边框，可以写成：C[语句] —> |语句| D[语句]或者C[语句] — 语句 —> D[语句]都可以。
相对而言，比Flowchart更加简洁清晰，Mermaid还支持制作时序图、甘特图等，更多详细内容还可以参考网站：https://mermaid-js.github.io/mermaid/#/

其他的还有序列图，UML图等，大家也可以进行配置后运用Markdown生成图形。在这里，我就不多介绍啦~

st=>start: 开始语句 in=>inputoutput: 输入值 e=>end: 结束语句 op=>operation: 执行操作 cond=>condition: 是否成立？ out=>inputoutput: 输出值 st->in->op->cond cond(yes)->out cond(no)->op out->e{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}