[toc] # 流程图 ## 什么是流程图? * 流程图是对过程、算法、流程的一种图像表示，在技术设计、交流及商业简报等领域有广泛的应用。 * 通常用一些图框来表示各种类型的操作，在框内写出各个步骤，然后用带箭头的线把它们连接起来，以表示执行的先后顺序。 * 用图形表示算法，直观形象，易于理解。有时候也被称之为输入-输出图。 * 顾名思义，就是用来直观地描述一个工作过程的具体步骤。 ## 流程图的作用 * 用来描述接口的功能, 弥补原型图在逻辑细节上的不足  ## 画一个`用户登录/注册二合一`流程图 思路 1. 接收用户名和密码 1. 使用用户名查询数据库 1. 有记录则登录, 则判断密码然后登录 1. 没有记录则把用户名和密码写入数据库(注册), 然后登录 流程图 ```[flow] st=>start: Start e=>end: End 接收用户名和密码=>operation: 接收用户名和密码 使用用户名查询数据库=>operation: 使用用户名查询数据库 数据库中是否有数据=>condition: 数据库中是否有数据? 走登录逻辑=>operation: 走登录逻辑 走注册逻辑=>operation: 走注册逻辑 密码是否正确=>condition: 密码是否正确? 把用户名和密码写入数据库=>inputoutput: 把用户名和密码写入数据库 st->接收用户名和密码->使用用户名查询数据库->数据库中是否有数据 数据库中是否有数据(yes)->走登录逻辑->密码是否正确 数据库中是否有数据(no)->走注册逻辑->把用户名和密码写入数据库->e 密码是否正确(yes)->e 密码是否正确(no,down)->接收用户名和密码 ``` 流程图代码 ```flow st=>start: Start e=>end: End 接收用户名和密码=>operation: 接收用户名和密码 使用用户名查询数据库=>operation: 使用用户名查询数据库 数据库中是否有数据=>condition: 数据库中是否有数据? 走登录逻辑=>operation: 走登录逻辑 走注册逻辑=>operation: 走注册逻辑 密码是否正确=>condition: 密码是否正确? 把用户名和密码写入数据库=>inputoutput: 把用户名和密码写入数据库 st->接收用户名和密码->使用用户名查询数据库->数据库中是否有数据 数据库中是否有数据(yes)->走登录逻辑->密码是否正确 数据库中是否有数据(no)->走注册逻辑->把用户名和密码写入数据库->e 密码是否正确(yes)->e 密码是否正确(no,down)->接收用户名和密码 ``` ## 流程图的markdown语法 语法关键词 * `start`,`end`, 表示程序的开始与结束 * `operation`, 表示程序的处理块 * `subroutine`, 表示子程序块 * `condition`, 表示程序的条件判断 * `inputoutput`, 表示程序的出入输出 * `right`,`left`, 表示箭头在当前模块上的起点(默认箭头从下端开始) * `yes`,`no`, 表示condition判断的分支(其可以和right,left同时使用) 流程图的语法大体分为两部分： 1. 前面部分用来定义流程图元素: `tag=>type: content:>url` * `tag` 是流程图中的标签，在第二段连接元素时会用到。名称可以任意，一般为流程的英文缩写和数字的组合。 * `type` 用来确定标签的类型，`=>`后面表示类型。由于标签的名称可以任意指定，所以要依赖`type`来确定标签的类型 * 标签有6种类型：`start` `end` `operation` `subroutine` `condition` `inputoutput` * `content` 是流程图文本框中的描述内容，`:` 后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格 * `url`是一个连接，与框框中的文本相绑定，`:>`后面就是对应的 `url` 链接，点击文本时可以通过链接跳转到 `url` 指定页面 2. 后面部分用来连接流程图元素，指定流程图的执行走向。 * 使用 `->` 来连接两个元素 * 对于`condition`类型，有`yes`和`no`两个分支，如示例中的cond(yes)和cond(no) * 每个元素可以制定分支走向，默认向下，也可以用`right`指向右边，如示例中sub1(right)。