概述
流程图使用 flowchartjs 插件实现
使用
元数据: grammar_flow
想要使用该语法，需要在设置>扩展语法 里把流程图选项打开。或者在每篇文章的元数据里通过 grammar_flow 进行控制
示例
- 1```flow
- 2st=>start: 开始
- 3e=>end: 结束
- 4op=>operation: 操作步骤
- 5cond=>condition: 是 或者 否?
- 6
- 7st->op->cond
- 8cond(yes)->e
- 9cond(no)->op
- 10```
效果
流程图
流程图语法主要分为两部份，一个是结点定义，一个是流程定义。结点定义设置各个结点类型，及显示文字。流程定义是使用结点定义时定义的各结点
- 1结点定义
- 2结点名称=>结点类型:结点说明
- 3
- 4流程定义
- 5结点名称->结点名称
不同的结点
主要结点有
| 类型 | 名称 |
|---|---|
| start | 起始结点 |
| end | 结束结点 |
| operation | 处理结点 |
| subroutine | 子路由结点 |
| condition | 条件结点 |
| inputoutput | 输入输出结点 |
| parallel | 并行结点 |
示例
- 1```flow!
- 2st=>start: Start:>http://www.google.com[blank]
- 3e=>end:>http://www.google.com
- 4op1=>operation: My Operation
- 5sub1=>subroutine: My Subroutine
- 6cond=>condition: Yes
- 7or No?:>http://www.google.com
- 8io=>inputoutput: catch something...
- 9para=>parallel: parallel tasks
- 10
- 11st->op1->cond
- 12cond(yes)->io->e
- 13cond(no)->para
- 14para(path1, bottom)->sub1(right)->op1
- 15para(path2, top)->op1
- 16```
可点击的结点
在结点定义阶段，想要可点击的结点结尾添加 :> ，并带上要跳转的地址。
- 1结点定义
- 2结点名称=>结点类型:结点说明:>链接地址
默认是在本页进行跳转，可以在链接地址后面添加 [blank], 用来在新窗口打开
- 1结点定义
- 2结点名称=>结点类型:结点说明:>链接地址[blank]
条件结点
定义为条件结点后，在流程定义阶段，可以对条件结点进行 yes 和 no 参数的传递
- 1流程定义
- 2条件结点名称(yes)->结点名称
- 3条件结点名称(no)->结点名称
并行结点
在流程定义阶段，可以对并行结点进行不同的参数设置