流程图

简易流程图（横向）

绘图语句：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
1
2
3
4
5
6

效果演示：

语法说明：

• LR表示是横向铺开整个流程走向
• 用不同的字母定义不同的元素
• 使用-->连接不同的元素，--->或者---->可以画出更长的线条，横线上的说明可以通过在箭头尾部增加|条件1|的方式添加。
• []用来表示方形外框，()用来表示圆形外框，`{}用来表示菱形外框

简易流程图（纵向）

绘图语句：

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
1
2
3
4
5
6

效果演示：

语法说明：

• 与横向流程图类似，这里唯一需要加以说明的是TD表示纵向展开流程走向。顺便说一下，我们一般适用纵向的会更多一些。

标准流程图（纵向）

绘图语句：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
1
2
3
4
5
6
7
8
9
10

效果演示：

语法说明：

• 这种流程图比较专业。

• 整体分为两个部分，第一部分为节点定义区块，第二部分为流程走向区块

  • 节点定义的语法为：唯一表示=>节点类型: 节点描述

    • 可选的节点类型定义：
      • start： 开始节点
      • operation： 操作节点
      • subroutine： 子流程节点
      • inputoutput： 输入框节点
      • end： 结束节点

  • 流程走向的语法为：节点1->节点2->节点3

    • 可以在节点右侧添加括号，表示线名称

    • 为线名称保留关键词，用以表示出线的位置

      • left： 左
      • right： 右
      • bottom： 下
      • Top: 上

标准流程图（横向）

绘图语句：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
1
2
3
4
5
6
7
8
9
10

效果演示：

语法说明：

• 跟纵向流程图类似，不再赘述。