Markdown 扩展语法-流程图

☆樱花仙子☆ 提交于 2020-01-31 08:26:16

Markdown流程图

        Markdown中的流程图主要为两种:Mermaid流程图Flowchart流程图。两种流程图风格不同,各有优势,实际情况中可根据需要来选用。本文流程图的使用只需根据示例即可习得,直观,方便。

Mermaid流程图

三个关键点:图向形状连线

图向(Left,Right,Top,Bottom)

graph LR 流程图从左到右
graph RL 流程图从右到左
graph TB 流程图从上到下
graph BT 流程图从下到上

```mermaid
graph LR
A --> B
B–>C
```

A
B
C

```mermaid
graph RL
A --> B
B–>C
```

A
B
C

```mermaid
graph TB
A --> B
B–>C
```

A
B
C

```mermaid
graph BT
A --> B
B–>C
```

A
B
C

形状(矩形,圆形,菱形,圆角矩形,斜边矩形)

id + [文字描述]矩形
id + (文字描述)圆角矩形
id + >文字描述]斜边矩形
id + {文字描述}菱形
id + ((文字描述))圆形

```mermaid
graph LR
A[矩形]
B(圆角矩形)
C>斜边矩形]
D{菱形}
E((圆形))
```

矩形
圆角矩形
斜边矩形
菱形
圆形

注:不加任何描述形状默认为矩形

连线

```mermaid
graph LR
A–>B
C—D
E==>F
G===H
I-.->J
M-.-N
```

A
B
C
D
E
F
G
H
I
J
M
N

```mermaid
graph LR
A–说明–>B
C–说明—D
E==说明==>F
G==说明===H
I-.说明.->J
M-.说明.-N
```

说明
说明
说明
说明
说明
说明
A
B
C
D
E
F
G
H
I
J
M
N

Flowchart流程图

第一部分是定义
第二部分是绘画

```flow

start=>start: 开始
end=>end: 结束
op=>operation: 操作
sub=>subroutine: 子程序
cond=>condition: 是(条件判断)?
cond2=>condition: 是(条件判断)?
input=>inputoutput: 输入
output=>inputoutput: 输出

start->input->op->cond
cond(yes)->end
cond(no)->cond2
cond2(yes,right)->sub
cond2(no,bottom)->output->end

```

注:含有=>的行,为定义部分;含有->的行,为绘画部分。

Created with Raphaël 2.2.0开始输入操作是(条件判断)?结束是(条件判断)?子程序输出yesnoyesno
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!