# 概述
不同与mermaid流程图确定个大致方向后自动排列不同，flow流程图可以控制流程的方向，线条也都是直线，视觉上更加工整。在某些场合还是可以使用到flow流程图来制图。
# Demo
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)@->op1
st@>op1({"stroke":"Red"})
para@>op1({"stroke":"Red"})
sub1@>op1({"stroke":"Red"})
看完这个demo，有一种回到初中数学课本的感觉，不同形状的节点都有各种不同的含义，堪称教科书式的操作。
代码如下：
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
# 语法
flow的语法还是挺简单的，主要分成两部分：节点定义、执行走向。
# 节点定义
flow的每种节点都有其特定的含义，节点定义的语法为tag=>type: content:>url；
# tag：标签
Tag 为节点标签，可使用简单的标识，方便流程图执行走向时候连接；
# type：类型
type 为flow流程图节点类型，类型有 start 、 end 、 operation 、 subroutine、 condition 、inputoutput parallel ；
| 类型 | 形状 | 说明 |
|---|---|---|
| start | 椭圆 | 只出不入，用于流程开头 |
| end | 椭圆 | 只入不出，用于流程结尾 |
| operation | 长方形 | 一进一出，表示操作 |
| subroutine | 嵌套长方形 | 表示子程序 |
| condition | 菱形 | 一进多出，表示条件 |
| inputoutput | 平行四边形 | 一进一出，表示输入输出 |
| parallel | 长方形 | 一进多出 |
# content：内容
content 为流程形状中展示的文字信息；
# url：跳转链接
Url 可以为节点定义跳转URL，点击节点后，跳转到目标地址中，例如：
st=>start: 点我到百度:>https://www.baidu.com[blank]
e=>end: 点我到谷歌:>https://www.google.com[blank]
st(right)->e
st@>e({"stroke":"red"})
# 上图的流程图带码如下
st=>start: 点我到百度:>https://www.baidu.com[blank]
e=>end: 点我到谷歌:>https://www.google.com[blank]
st->e
可以给链接设置跳转属性，默认为当前页面打开链接； blank 为新标签页打开。
# 执行走向
执行走向相对节点来说就更简单了，直接用-> 将两个节点连接起来即可。有如下几个点需要特殊说明下：
- 对于
condition类型，有yes和no两个分支，如cond(yes)和cond(no)； - 每个元素可以制定分支走向，默认
向下，也可以用right指向右边，如sub1(right)； Parallel的可以有多个出口，执行走向比较特殊，parallelVar( path1, <direction> )->nextNode1。
# 样式
如果想让流程图中某些节点间的执行走向有不一样的表现样式，可以给节点间的执行走向自定义样式。自定义样式的处理方式为：@>op1({"stroke":"Red"}),多个属性，，表示为指向op1 的连线设置为红色。
| 类 | 备注 | 值 |
|---|---|---|
| stroke | 线条颜色 | 颜色值 |
| stroke-width | 线条宽度 | 数值 |
| arrow-end | 箭头类型 |
# 总结
对于一些简单的流程图，用flow 写，简单方便，但是复杂流程，还是需要专业的制图工具。
PS：在学习的过程中，没有找到能像修改 执行走向 一样的方式去修改 节点样式 ，都是要通过修改 js 文件来达到目的，如果有像执行走向类似的节点样式修改方法，欢迎告知