Markdown系列之Flowchat流程图

一.欢迎来到我的酒馆

介绍Markdown的Flowchart流程图语法。

二.什么是Flowchart

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

2.2 flowchart语法介绍

语法可以简单概括为两步：

第一步：定义组件

c 复制代码

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


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

第二步：连接

css 复制代码

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

2.3 来看一个简单的例子

markdown ，mermaid代码：

c 复制代码

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

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

|连接
st -> op -> e

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

三.更进一步

3.1

c 复制代码

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

c 复制代码

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

Markdown系列之Flowchat流程图

一.欢迎来到我的酒馆

目录

二.什么是Flowchart

三.更进一步