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

你可能感兴趣的:(MarkDown)