Markdown绘制流程图

简书并不支持流程图,故流程图渲染结果用图片给出

标准程序流程图

以一个最简单的流程图进行演示:

​```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是元素的类型,共六种
  1. start 开始
  2. end 结束
  3. operation 运算/操作
  4. subroutine 子程序
  5. condition 条件
  6. 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((文字))	圆形