Markdown系列之Flowchat流程图

一.欢迎来到我的酒馆

        介绍Markdown的Flowchart流程图语法。

二.什么是Flowchart

2.1 Flowchart是一款基于javascript的工具，使用它可以用代码创建简单的流程图。具体信息可以查看flowchart官网：http://flowchart.js.org/

2.2 flowchart语法介绍
语法可以简单概括为两步：
第一步：定义组件

st=>start: 一个圆角矩形组件。表示开始。:冒号后面显示你要在组件里展示的内容。
e=>end: 一个圆角矩形组件，表示结束。


op=>operation:一个长方形组件，这个组件的id名为op。
cond=>condition:一个菱形组件，这个组件的id名为cond。
io=>inputoutput:一个平行四边形组件，这个组件的id名为io。
| 后面的是注释

第二步：连接

| 使用 -> 连接各个组件的id名称
st->op->e

2.3 来看一个简单的例子
markdown ，mermaid代码：

flowchat
st => start: 开始
e => end: 结束

|定义一个矩形组件
op => operation: 执行的内容

|连接
st -> op -> e

Created with Raphaël 2.3.0 开始 执行的内容 结束

三.更进一步

3.1

flowchat
st=>start: 开始
e=>end: 结束
op1=>operation: 这是一个矩形
sub1=>subroutine: 这是一个子程序组件
cond=>condition: 这是一个判断语句
io=>inputoutput: 这是一个平行四边形


st->op1->cond
cond(yes)->io->e
cond(no)->sub1->e

cond是一个菱形组件的id名，菱形组件通常用来做判断语句。
cond(yes) 表示当菱形里面的判断语句为true时，执行流程。
cond(no)表示当菱形里面的判断语句为false时

Created with Raphaël 2.3.0 开始 这是一个矩形 这是一个判断语句 这是一个平行四边形 结束 这是一个子程序组件 yes no

3.2

flowchat
st=>start: 开始
e=>end: 结束
op1=>operation: 这是一个矩形
op2=>operation: 这是一个矩形
sub1=>subroutine: 这是一个子程序组件
cond1=>condition: 这是一个菱形组件
cond2=>condition: 这是一个菱形组件
cond3=>condition: 这是一个菱形组件
io1=>inputoutput: 这是一个平行四边形，输出
io2=>inputoutput: 这是一个平行四边形，输出

st->op1(right)->cond1
cond1(no, right)->cond2
cond1(yes, bottom)->io1->e

cond2(no, right)->cond3
cond2(yes,bottom)->sub1->e

cond3(no, right)->op2->e
cond3(yes, bottom)->io2->e

op1(right)表示从这个组件的右边开始连接。
cond1(no, right)表示当condition组件为no时，从右边开始连接。
cond1(yes, bottom)表示当condition组件为yes时，从组件的底部开始连接。

Created with Raphaël 2.3.0 开始 这是一个矩形 这是一个菱形组件 这是一个平行四边形，输出 结束 这是一个菱形组件 这是一个子程序组件 这是一个菱形组件 这是一个平行四边形，输出 这是一个矩形 yes no yes no yes no