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

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

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

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. 网页登录流程图

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