概述

不同与mermaid流程图确定个大致方向后自动排列不同,flow流程图可以控制流程的方向,线条也都是直线,视觉上更加工整。在某些场合还是可以使用到flow流程图来制图。

Demo

看完这个demo,有一种回到初中数学课本的感觉,不同形状的节点都有各种不同的含义,堪称教科书式的操作。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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流程图节点类型,类型有 startendoperationsubroutineconditioninputoutput parallel

类型 形状 说明
start 椭圆 只出不入,用于流程开头
end 椭圆 只入不出,用于流程结尾
operation 长方形 一进一出,表示操作
subroutine 嵌套长方形 表示子程序
condition 菱形 一进多出,表示条件
inputoutput 平行四边形 一进一出,表示输入输出
parallel 长方形 一进多出

content:内容

content 为流程形状中展示的文字信息;

url:跳转链接

Url 可以为节点定义跳转URL,点击节点后,跳转到目标地址中,例如:

1
2
3
4
# 上图的流程图带码如下
st=>start: 点我到百度:>https://www.baidu.com[blank]
e=>end: 点我到谷歌:>https://www.google.com[blank]
st->e

可以给链接设置跳转属性,默认为当前页面打开链接; blank 为新标签页打开。

执行走向

执行走向相对节点来说就更简单了,直接用-> 将两个节点连接起来即可。有如下几个点需要特殊说明下:

  1. 对于condition类型,有yesno两个分支,如cond(yes)cond(no)
  2. 每个元素可以制定分支走向,默认向下,也可以用right指向右边,如 sub1(right)
  3. Parallel 的可以有多个出口,执行走向比较特殊,parallelVar( path1, <direction> )->nextNode1

样式

如果想让流程图中某些节点间的执行走向有不一样的表现样式,可以给节点间的执行走向自定义样式。自定义样式的处理方式为:@>op1({"stroke":"Red"}),多个属性,,表示为指向op1 的连线设置为红色。

备注
stroke 线条颜色 颜色值
stroke-width 线条宽度 数值
arrow-end 箭头类型

总结

对于一些简单的流程图,用flow 写,简单方便,但是复杂流程,还是需要专业的制图工具。

PS:在学习的过程中,没有找到能像修改 执行走向 一样的方式去修改 节点样式 ,都是要通过修改 js 文件来达到目的,如果有像执行走向类似的节点样式修改方法,欢迎告知