8.流程图、序列图、甘特图

流程图

需要一对```限制

竖向流程图

graph TD
    A[start] -->B(步骤一)
    B --> C{条件决策}
    C -->|条件1| D[情况1]
    C -->|条件2| E[情况2]
    C -->|条件3| F[情况3]

效果：

条件1

条件2

条件3

start

步骤一

条件决策

情况1

情况2

情况3

以下流程图CSDN支持，有道云笔记目前不支持

横向流程图：

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

a=1

a=2

方形

圆角

条件a

结果1

结果2

横向流程图

标准流程图源码格式：

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

Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

标准流程图源码格式（横向）：

```mermaid
flowchat
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

Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

序列图

CSDN的序列图UML需要在```后加上mermaid

sequenceDiagram
    loop 每天
        study->>review: have you done and Are you ready to be boss?
        review-->>study:I have a high grasp of knowladge.
    end

效果：

study review have you done and Are you ready to be boss? I have a high grasp of knowladge. loop [ 每天 ] study review

甘特图

CSDN的甘特图需要在```后加上mermaid

gantt
dateFormat YYYY-MM-DD
title 产品计划表
section 初期阶段
明确需求:2016-03-01,10d
section 中期阶段
更进开发:2016-03-11,15d
section 后期阶段
走查测试:2016-03-20,9d

Mon 07 Mon 14 Mon 21 Mon 28 明确需求 更进开发 走查测试 初期阶段 中期阶段 后期阶段 产品计划表