hexo中绘制流程图

我的Markdown文档编辑工具是Typora，他本身可以使用如下代码进行流程图绘制：

```mermaid  
graph LR  
A[方形] -->B(圆角)  
    B --> C{条件a}  
    C -->|a=1| D[结果1]  
    C -->|a=2| E[结果2]  
    F[横向流程图]  
```

但是这种方式在 hexo 中就失效了，会直接以code类型文本输出这段字符串，并没有呈现为想要的流程图。

要在 hexo 中绘制流程图需要安装一个插件 🔗 hexo-filter-flowchart

安装

在hexo项目根目录中执行

1	yarn add hexo-filter-flowchart

1	npm install --save hexo-filter-flowchart

配置

在hexo项目根目录中找到项目配置文件 _config.yml 打开之后查找 flowchart 节点进行配置，首次使用应该没有，可以在后面文档尾部直接追加。

# 配置流程图插件
flowchart:
  # raphael:   # optional, the source url of raphael.js
  # flowchart: # optional, the source url of flowchart.js
  options: # options used for `drawSVG`

重新编译运行

如果已经开启 hexo 的服务器，使用 Ctrl+C 终止掉该服务。

清理之前生成的 public 目录

1	hexo clean

生成静态文件

hexo g

开启 hexo 本地服务进行预览 默认地址：http://localhost:4000

hexo s

部署到自己的 github 上

hexo d

示例流程图

代码类型选择 flow，我的md编辑器是 Typora，他会让这么选择才能绘出图，别的编辑器就不太清除了。

代码上面一片区域是流程图中所有的节点描述，下面一片是线(关系)描述，他们中间空着一行。线之间用 -> 连接。

```
st=>start: start|past
e=>end: end
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes or No?|approved
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
```

补充

最后一步执行

d``` 命令有的人可能会报错，应该是要安装一个 ```hexo-deployer-git``` 包

1
2
3


```bash
yarn add hexo-deployer-git

还是要在 _config.yml 文件的 deploy 节点下进行配置

deploy:
  type: git #这个是固定的，不用改
  repository: https://github.com/xxxx/xxxx.github.io.git #这个是推送的仓库地址
  branch: master #仓库的那个分支，如果是在github上建立个人博客，那就是就，那么就是 master 主分支。