简书并不支持流程图,故流程图渲染结果用图片给出
标准程序流程图
以一个最简单的流程图进行演示:
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```
image
说明
定义元素的语法
tag=>type: content:>url
- tag:元素的名字
- type是元素的类型,共六种
- start 开始
- end 结束
- operation 运算/操作
- subroutine 子程序
- condition 条件
- inputoutput 输入输出
- content:流程图框内的文字
- url:链接
连接元素
st->op->cond
cond(yes)->e
cond(no)->op
用->进行连接元素
cond(yes)和cond(yes)进行分支的判断
实际使用
下面以一个计算圆面积的流程图进行演示:
```flow
st=>start: 开始
input=>inputoutput: 输入半径R
op=>operation: Π*R^2⇒S
output=>inputoutput: 输出面积S
end=>end: 结束程序
st->input->op->output->end
```
image
方向变换
那将流程图转为横向的呢?
```flow
st=>start: 开始
input=>inputoutput: 输入半径R
op=>operation: Π*R^2⇒S
output=>inputoutput: 输出面积S
end=>end: 结束程序
st(right)->input(right)->op(right)->output(right)->end
```
image
下面是另一种型式的流程图
```mermaid
graph TD
A{修改源码后<br>是否可以闭源?}
A -->|可以| B1
A -->|不可以| B2
B1{新增源码是否要<br>使用相同的许可证?}
B2{每一个修改过的文件是<br>否都要放置版权说明?}
B1 -->|否| C1
B1 -->|是| e3
B2 -->|否| C2
B2 -->|是| e6
C1{是否需要对源码的<br>修改之处提供说明}
C2{衍生软件是否可以<br>用你的名字促销}
C1 -->|否| e1
C1 -->|是| e2
C2 -->|否| e4
C2 -->|是| e5
e1(LPGL许可证)
e2(Mozilla许可证)
e3(GPL许可证)
e4(BSD许可证)
e5(MIT许可证)
e6(Apache许可证)
comment[开源软件协议的比较]
```
image
方像定义
graph 方向描述
| 方向描述 | 代表方向 |
|---|---|
| TB | 从上到下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
节点定义
| 举例 | 说明 |
|---|---|
| id[文字] | 矩形 |
| id(文字) | 圆角矩形 |
| id{文字} | 菱形 |
| id((文字)) | 圆形 |
