Markdown 进阶技能:用代码画流程图
以Typora编辑器为例,目前常用的有两种方法:
- Mermaid 流程图
- Flowchart流程图
下面开始逐个介绍
Mermaid 流程图
用 Typora 编写 Markdown 文本时,插入这样一个代码块:
// ~~~替换为```
~~~mermaid
……流程图代码……
~~~
起始代码
每次作图时,代码以「**graph <布局方向>」**开头,如:
graph TB
...
...
TB(Top Bottom)表示从上向下布局,另外三种是
BT
LR(Left Right)
RL流程图总体分为横向和纵向两种。总共四个方向:T-上,B\D-下;L-左,R-右。使用方式就是横向的两两结合,纵向的两两结合。比如从左到右为LR,从上到下为TB或者TD。
从上到下演示:
graph TD
A --> B
graph TD
A --> B
从左到右演示:
graph LR
A --> B
graph LR
A --> B
节点的画法
接下来,来画之前介绍过的四种节点(圆形、矩形、菱形、圆形)。四种节点对应四行代码,请仔细观察代码差异,并与对应的节点相比较。
graph TB
A(开始)
B[打开冰箱门]
C{"冰箱小不小?"}
D((连接))
graph TB
A(开始)
B[打开冰箱门]
C{"冰箱小不小?"}
D((连接))
看出玄机了吗?其实很简单,就是
- 不同种类的括号对应不同的节点图形,矩形 '[]',圆角矩形 '()',不对称矩形 '>]',菱形 '{}',圆形 '(())'
- 括号中的文字就是显示在节点中的描述
- A B C D 这些字符是为节点取的名字,这个名字可以在之后反复利用(在编程里这相当于定义变量)
线段的画法
前面是节点的画法,再来看下线段的画法。线段用于连接节点,所以请结合刚才所学的节点一同来看:
graph TB
A[把大象放进去] --> B{"冰箱小不小?"}
B -->|不小| C[把冰箱门关上]
B -->|小| D[换个大冰箱]
graph TB
A[把大象放进去] --> B{"冰箱小不小?"}
B -->|不小| C[把冰箱门关上]
B -->|小| D[换个大冰箱]
是不是又发现了玄机!
上述 -->
是带箭头线段,-->|不小|
是加了描述文字的带箭头线段。它们都位于两个节点之间。
好了,要学的内容就是这些,意不意外!东西不多也不复杂,只要根据图案联想记忆即可。稍加练习后便能运用自如。
额外提示
- 上一个代码示例中,B{"冰箱小不小?"} 这里的描述文字加了引号,是因为其中包含特殊字符(问号),用引号包裹防止出错
- 为节点取名为 A B C 不太合适,如果节点很多时往往容易混淆,不方便后续使用和阅读(编程时命名的重要性)。建议起有意义的名字
- 除上述带箭头线段 --> 外,还有带箭头虚线线段
-.->
、 带箭头加粗线段==>
、不带箭头线段---
完整示例
完成了上面的教程后,我们再来看个完整例子体会下:
graph TB
Start(开始) --> Open[打开冰箱门]
Open --> Put[把大象放进去]
Put[把大象放进去] --> IsFit{"冰箱小不小?"}
IsFit -->|不小| Close[把冰箱门关上]
Close --> End(结束)
IsFit -->|小| Change[换个大冰箱]
Change --> Open
graph TB
Start(开始) --> Open[打开冰箱门]
Open --> Put[把大象放进去]
Put[把大象放进去] --> IsFit{"冰箱小不小?"}
IsFit -->|不小| Close[把冰箱门关上]
Close --> End(结束)
IsFit -->|小| Change[换个大冰箱]
Change --> Open
Flowchart流程图
示例代码
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
说明
这样几行简单的代码就生成了一个优雅的流程图。
流程图大致分为两段,第一段是定义元素,第二段是定义元素之间的走向。
定义元素的语法
tag=>type: content:>url
- tag就是元素名字,
- type是这个元素的类型,有6中类型,分别为:
- start # 开始
- end # 结束
- operation # 操作
- subroutine # 子程序
- condition # 条件
- inputoutput # 输入或产出
- content就是在框框中要写的内容,注意type后的冒号与文本之间一定要有个空格。
- url是一个连接,与框框中的文本相绑定
连接元素的语法
用**->**来连接两个元素,需要注意的是condition类型,因为他有yes和no两个分支,所以要写成
c2(yes)->io->e
c2(no)->op2->e
实际应用
下边献上我的拙作,这是一个爬取某网站的商品评论数据,然后进行情感分析的小项目,有四个模块:获取待爬取商品id,爬取代理,爬取评论,情感分析
代码
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
总结
不难看出Mermaid还是更为容易入手
评论区