1、横向流程图源码格式（mermaid）
graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] A-->F[横向流程图] G[横向流程图]
例如
graph LR
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a==2| E[结果2]
A --> F[横向流程图]
G[横向流程图]2、竖向流程图源码格式（mermaid）
graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] A --> F[竖向流程图]
例如：
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
A --> F[竖向流程图]
3、标准流程图源码格式（flow)
st=>start: 开始框:>https://www.baidu.com op=>operation: 处理框 cond=>condition: 判断框（是或否？） sub1=subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op
例如：
st=>start: 开始框:>http://www.baidu.com
op=>operation: 处理框
cond=>condition: 判断框（是或否？）
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op4、标准流程图源码格式（横向）(flow)
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
例如：
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)->op5、UML时序图源码格式（sequence)
对象A->对象B: 对象B你好吗？（请求） Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述（提示） 对象B-->对象A: 我很好（响应） 对象A->对象B: 你真的好吗？ 对象B->对象A: 真的好
例如：
对象A->对象B: 对象B你好吗？(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述（提示）
对象B-->对象A: 我很好（响应）
对象A->对象B: 你真的好吗？
对象B->对象A: 真的好6、UML时序图源码复杂样例（sequence）
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: 没人陪我玩
例如：
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: 没人陪我完成7、UML标准时序图源码格式（mermaid）
%% 时序图例子，->直线，-->虚线,->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 王五你好吗？ loop 健康检查 王五->王五: 与疾病战斗 end Note right of 王五: 合理 食物
看医生... 李四-->>张三: 很好！ 王五->李四: 你怎么样? 李四-->王五: 很好！
例如：
%% 时序图例子， ->直线， -->虚线， ->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/> 看医生...
李四-->>张三: 很好！
王五->李四: 你怎么样?
李四-->王五: 很好！
8、甘特图源码样例（mermaid）
```mermaid %% 语法示例 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 ```
例如：
%% 语法示例
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其它说明
1、graph 说明
方向：
TB -top bottom
BT -bottom top
RL-right left
LR – left right
TD -top bottom
节点形状
矩形: [内容]
圆角矩形：(内容)
圆形：((内容))
菱形：{内容}
旗帜: >内容]
连接线
实线箭头: –>
实线直线： —
虚线箭头: -.->
虚线实线: -.-
粗实线箭头: ==>
粗实线直线：===
标签
箭头或直线后跟|标签|：
A-->|标签|B在箭头或直线中打标签：
A--标签-->B
资料
https://github.com/adrai/flowchart.js
http://cncounter.github.io/flowchart/
