Hexo博客显示markdown流程图

Markdown语法是支持流程图、序列图的。但是我们需要安装一个插件来实现。
插件地址：https://github.com/bubkoo/hexo-filter-flowchart

安装

先进入你的博客根目录，然后输入以下命令

1	npm install --save hexo-filter-flowchart

使用

打开你的hexo博客的 站点配置文件_config.yml 。
然后找一个位置，把下面的代码复制进去，注意对齐和缩进。这是为了方便自定义该插件的配置选项，我们只需要修改以下少量代码就可成功配置，而不必去烦乱的代码里修改插件的配置文件。(当然即使你不去博客的配置文件中进行配置，也是可以正常使用的。如果你不会添加，请忽略此步)

flowchart:
  # raphael:   # optional, the source url of raphael.js
  # flowchart: # optional, the source url of flowchart.js
  options: # options used for `drawSVG`

我们可以根据自己的使用习惯进行修改，默认配置为如下所示。我们同时需要根据该默认配置来自定义配置。

{
  "raphael": "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js",
  "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js",
  "options": {
    "scale": 1,
    "line-width": 2,
    "line-length": 50,
    "text-margin": 10,
    "font-size": 12
  }
}

接下来我们可以用markdown语法画一个流程图来测试一下是否已经安装成功。语法参照

```flow
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
```