Markdown画流程图、时序图、甘特图

这个是mermaid 图表,CSDN好像不支持内置的flowchart图表
标准流程图源码格式：

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

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

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

UML时序图源码样例：

sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？

对象A 对象B 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗？ 对象A 对象B 复杂使用

UML时序图源码复杂样例：

sequenceDiagram
Title: 复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B-->>小三: 你好吗?
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

对象A 对象B 小三 C 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗? 对象B找我了 你真的好吗？ 我们是朋友 没人陪我玩 对象A 对象B 小三 C 复杂使用

mermaid横向流程图源码格式

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

a=1

a=2

方形

圆角

条件a

结果1

结果2

结束

横向流程图

mermaid竖向流程图源码格式：

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

a=1

a=2

方形

圆角

条件a

结果1

结果2

竖向流程图

Larger flowchart with some styling

graph TB
    sq[Square shape] --> ci((Circle shape))
    subgraph A subgraph 
        od>Odd shape和]-- Two line
edge comment --> ro
        di{Diamond with 
 line break} -.-> ro(Rounded
square
shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak
in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle
and some odd 
special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

A subgraph

Two line
edge comment

Odd shape和

Rounded
square
shape

Diamond with
line break

Rounded square shape

Square shape

Circle shape

Inner / circle
and some odd
special characters

Really long text with linebreak
in an Odd shape

,.?!+-*ز

Cyrillic

Circle shape Начало

mermaid标准时序图样例：
%% 时序图例子,-> 直线，–>虚线，->>实线箭头,–>>虚线箭头

  sequenceDiagram
    participant 张三
    participant 李四
    张三->>王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 
看医生...
    李四-->>张三: 很好!!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

张三 李四 王五 王五你好吗？ 与疾病战斗 loop [ 健康检查 ] 合理 食物 看医生... 很好!! 你怎么样? 很好! 张三 李四 王五 复杂使用

mermaid甘特图样例1：

gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图

section 设计
需求:done,des1, 2014-01-06,2014-01-08
原型:active,des2, 2014-01-09, 3d
UI设计:des3,after des2, 5d
未来任务:des4,after des3, 5d

section 开发
学习准备理解需求:crit, done, 2014-01-06,24h
设计框架:crit, done, after des2, 2d
开发:crit, active, 3d
未来任务:crit, 5d
耍:2d  

section 测试
功能测试:active, a1, after des3, 3d
压力测试:after a1  , 20h
测试报告: 48h

Mon 06 Mon 13 Mon 20 需求 原型 UI设计 未来任务 学习准备理解需求 设计框架 开发 未来任务 耍 功能测试 压力测试 测试报告 设计 开发 测试 软件开发甘特图

mermaid甘特图2:

gantt
title 甘特图
dateFormat YYYY-MM-DD
section 行1
任务1 :a1, 2014-01-01, 30d
任务2 :after a1 , 20d
section 行2
任务3 :2014-01-12 , 12d
任务4 : 24d

Mon 06 Mon 13 Mon 20 Mon 27 Mon 03 Mon 10 Mon 17 任务1 任务2 任务3 任务4 行1 行2 甘特图

mermaid类图(估计有错误,但没找到)

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label