Markdown使用笔记（四）——进阶之流程图

Markdown 流程图

  首先声明，我很少使用markdown进行流程图的制图，个人认为使用专业的流程图制作软件更加方便和简洁。（市面上就已经有很多的专业流程图制作软件：比如WPS内嵌的流程图、坚果云中的流程图轻应用等）。
  虽然很少使用但不代表不使用，一些简单的流程图制作方法还是有必要掌握的。

1. 定义元素：

tag=>type: content:>url

tag——元素的名字
type——元素的类型，有六种:

• start ——开始
• end ——结束
• operation ——操作
• subroutine ——子程序
• condition ——条件
• inputoutput ——输入或者输出

content——框体中的文本内容，type后的冒号与文本有一个空格
url——链接，与框体中的文本绑定

2. 连接元素：

使用->连接两个元素，condition类型的元素有yes和no两个分支：

condition(yes)->io->e
condition(no)->op2->e

3.整体框架：

• 与代码块的格式相同都是六个反引号括起来的
• 在第三个反引号后面输入flow（CSDN中会自动变为mermaid 再添加一个flowchat）
• 根据前面讲述的语法首先定义各个框体，为每个框命名和指定类型
• 连接各个元素，注意condition有两种输出，所以指定yes或者no

例子：

mermaid
flowchat
st=>start: start
e=>end: end
op=>operation: what you want
cond=>condition: Sure？
st->op->cond
cond(yes)->e
cond(no)->op

Created with Raphaël 2.2.0 start what you want Sure？ end yes no

4. 利用上诉方法制作一些比较完整的流程图：

1. web服务API请求时读取缓存路程图

Created with Raphaël 2.2.0 API请求 读取Redis缓存 是否有缓存？ 发送MQ，后台服务更新缓存 返回信息 读取信息 保存缓存 yes no

mermaid
flowchat
start=>start: API请求
cache=>operation: 读取Redis缓存
cond_cache=>condition: 是否有缓存？
sendMq=>operation: 发送MQ，后台服务更新缓存
read_info=>operation: 读取信息
setCache=>operation: 保存缓存
end=>end: 返回信息

start->cache->cond_cache
cond_cache(yes)->sendMq->end
cond_cache(no)->read_info->setCache->end

2. 网页登录流程图

Created with Raphaël 2.2.0 登录界面 登录 账户存在？ 密码正确？ 主界面 用户注册 注册成功？ yes no yes no no

mermaid
flowchat
login_page=>start: 登录界面
index_page=>end: 主界面
login=>operation: 登录
login_check=>condition: 账户存在？
sign_in=>operation: 用户注册
sign_in_check=>condition: 注册成功？
pwd_check=>condition: 密码正确？

login_page->login->login_check
login_check(no)->sign_in->sign_in_check
sign_in_check(yes)->login_page
sign_in_check(no)->sign_in
login_check(yes)->pwd_check
pwd_check(yes)->index_page
pwd_check(no)->login