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

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
​```

说明

定义元素的语法

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
​```

方向变换

那将流程图转为横向的呢?

​```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
​```

下面是另一种型式的流程图

​```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[开源软件协议的比较]
​```

方像定义

graph 方向描述
方向描述代表方向
TB从上到下
BT从下到上
RL从右到左
LR从左到右

节点定义

举例说明
id[文字]矩形
id(文字)圆角矩形
id{文字}菱形
id((文字))圆形