标准流程图（flow）

Markdown：流程图
请注意，如果不是标准化代码，则无是去显示预览。
flow 是标准流程图。mermaid是样式流程图，不一样的，不可以通用。

本插件集成flowchart.js至DiscuzX论坛

使用方法


插件不提供编辑器按钮，请直接使用标签 `[flow][/flow]`
例如：
[flow]
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1[/flow]

使用方法


[flow]st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1[/flow]
---------------------------------------------------------------------------
[flow]
op1=>operation: 我的操作1
op2=>operation: 我的操作2
op3=>operation: 我的操作3
op1->op2->op3
[/flow]

---

[flow]

st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
[/flow]

---

st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->o->cond
cond(yes)->e
cond(no)->op

MarkDown流程图全指导

by Zoomla!逐浪CMS发哥 2020-09-11 18:03:32

准备工作

Markdown是一个轻量级的标记语言，使用普通文本编辑器就能快速编写，不仅显示格式丰富，功能也毫不含糊，分享一个md格式的API请求流程图。

在使用Markdown图表前，你首先需要有解析工具，在本地开发，用vs code再加Markdown preview插件，显然是可以胜任。

由于有些浏览器渲染不出来，所以少数样式流程图带用了图片插入，在强解析下会呈现出相同的两个效果。

基本原理

Markdown图表支持类型包括：

• 流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言
• 时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言
• 甘特图：指定 mermaid 解析语言
  

这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。

一、流程图
详解标准流程图

基本语法：

• 定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格）
• 关键字：
  
  
  • start 流程开始，以圆角矩形绘制
  • opearation 操作，以直角矩形绘制
  • condition 判断，以菱形绘制
  • subroutine 子流程，以左右带空白框的矩形绘制
  • inputoutput 输入输出，以平行四边形绘制
  • end 流程结束，以圆角矩形绘制
    
  
  

• 定义模块间的流向：
  
  
  • 模块1 id->模块2 id ：一般的箭头指向
  • 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向
    

注意，每个形状都是有各自含义的：

• 圆角矩形：表示开始和结束
• 矩形：表示过程，也就是整个流程中的一个环节
• 菱形：表示判断、决策
• 圆形：表示连接。为避免流程过长或有线段交叉，可将流程切开，圆形即相当于切口处的连接头（成对出现）
  

[flow]
start=>start: 接收到消息
info=>operation: 读取信息
setCache=>operation: 更新缓存
end=>end: 处理结束
start->info->setCache->end
[/flow]



start=>start: 接收到消息
info=>operation: 读取信息
setCache=>operation: 更新缓存
end=>end: 处理结束
start->info->setCache->end

[flow]st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op[/flow]

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op

[flow]start=>start: API请求
cache=>operation: 读取Redis缓存
cached=>condition: 是否有缓存？
sendMq=>operation: 发送MQ，后台服务更新缓存
info=>operation: 读取信息
setCache=>operation: 保存缓存
end=>end: 返回信息
start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end[/flow]


start=>start: API请求
cache=>operation: 读取Redis缓存
cached=>condition: 是否有缓存？
sendMq=>operation: 发送MQ，后台服务更新缓存
info=>operation: 读取信息
setCache=>operation: 保存缓存
end=>end: 返回信息
start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end

基本语法：

• 定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格）
• 关键字：
  
  
  • start 流程开始，以圆角矩形绘制
  • opearation 操作，以直角矩形绘制
  • condition 判断，以菱形绘制
  • subroutine 子流程，以左右带空白框的矩形绘制
  • inputoutput 输入输出，以平行四边形绘制
  • end 流程结束，以圆角矩形绘制
    
  
  

• 定义模块间的流向：
  
  
  • 模块1 id->模块2 id ：一般的箭头指向
  • 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向
    

---

[flow]st=>start: 开始
ipt=>inputoutput: 输入一个x
op=>operation: 处理加工x+1
cond=>condition: 溢出（是或否？）
sub=>subroutine: 子流程
io=>inputoutput: 输出x
ed=>end: 结束
st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed[/flow]


st=>start: 开始
ipt=>inputoutput: 输入一个x
op=>operation: 处理加工x+1
cond=>condition: 溢出（是或否？）
sub=>subroutine: 子流程
io=>inputoutput: 输出x
ed=>end: 结束
st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed

[flow]st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: get_hotel_ids|past
op2=>operation: get_proxy|current
sub1=>subroutine: get_proxy|current
op3=>operation: save_comment|current
op4=>operation: set_sentiment|current
op5=>operation: set_record|current
cond1=>condition: ids_remain空?
cond2=>condition: proxy_list空?
cond3=>condition: ids_got空?
cond4=>condition: 爬取成功??
cond5=>condition: ids_remain空?
io1=>inputoutput: ids-remain
io2=>inputoutput: proxy_list
io3=>inputoutput: ids-got
st->op1(right)->io1->cond1
cond1(yes)->sub1->io2->cond2
cond2(no)->op3
cond2(yes)->sub1
cond1(no)->op3->cond4
cond4(yes)->io3->cond3
cond4(no)->io1
cond3(no)->op4
cond3(yes, right)->cond5
cond5(yes)->op5
cond5(no)->cond3
op5->e[/flow]

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: get_hotel_ids|past
op2=>operation: get_proxy|current
sub1=>subroutine: get_proxy|current
op3=>operation: save_comment|current
op4=>operation: set_sentiment|current
op5=>operation: set_record|current
cond1=>condition: ids_remain空?
cond2=>condition: proxy_list空?
cond3=>condition: ids_got空?
cond4=>condition: 爬取成功??
cond5=>condition: ids_remain空?
io1=>inputoutput: ids-remain
io2=>inputoutput: proxy_list
io3=>inputoutput: ids-got
st->op1(right)->io1->cond1
cond1(yes)->sub1->io2->cond2
cond2(no)->op3
cond2(yes)->sub1
cond1(no)->op3->cond4
cond4(yes)->io3->cond3
cond4(no)->io1
cond3(no)->op4
cond3(yes, right)->cond5
cond5(yes)->op5
cond5(no)->cond3
op5->e