00. 目录
文章目录
00. 目录01. 序列图示例02. 序列图语法03. 流程图示例04. 流程图语法05. Gravizo06. 甘特图样例07. 其它参考示例7.1 UML标准时序图样例7.2 UML时序图源码复杂样例7.3 UML时序图源码样例7.4 **标准流程图源码格式（横向）**7.5 标准流程图源码格式7.6 竖向流程图源码格式7.7 横向流程图源码格式08. 附录01. 序列图示例
基于js-sequence-diagrams实现了序列图，使用下列的格式声明一个序列图
Markdown代码
```mermaidsequenceDiagramDHCP客户机-->>DHCP服务器: IP租约请求DHCP服务器-->>DHCP客户机: IP租约提供DHCP客户机-->>DHCP服务器: IP租约选择DHCP服务器-->>DHCP客户机: IP租约确认```
网页显示效果
注意：所有的序列图代码需要放在一个语法类型为sequence的代码块中。
02. 序列图语法
序列图的语法如下图所示。
具体来说：
设置title，采用title: message。
MarkDown代码
title: 序列图标题
网页显示效果
设置participant，采用participant: actor
MarkDown代码
participant Aparticipant B
网页显示效果
设置note，
左侧note： note left of acotor： message右侧note： note right of actor: message,覆盖note： note over actor:message
MarkDown代码
note left of A: 左侧notenote right of B: 右侧notenote over C: 覆盖notenote over A,B: 覆盖多个actornote over B,C: 测试下\n 换行
网页显示效果
设置会话， 实线实箭头： actor->actor: message虚线实箭头： actor–>actor:message实线虚箭头： actor->>actor:message虚线虚箭头： actor–>>actor:message
MarkDown代码
A->A:自言自语A->B:实线实箭头A-->B:虚线实箭头A->>B:实线虚箭头A-->>B:虚线虚箭头
网页显示效果
下面的案例演示了序列图语法的混合使用，参见代码：
MarkDown代码
Title: 作业通知提交序列图教师-->班长: 通知明天交作业note left of 教师:通知班长-->同学们:记得明天交作业同学们->>班长:了解同学们-->教师: 交作业note right of 同学们:作业
网页显示效果
03. 流程图示例
CSDN Markdown基于flowchart.js实现流程图。一个简单的流程格式如下代码所示：
MarkDown代码
st=>start: Starte=>endop=>operation: My Operationcond=>condition: Yes or No?st->op->condcond(yes)->econd(no)->op
网页效果显示
注意：所有的流程图代码需要放在一个语法类型为flow的代码块中。
04. 流程图语法
格式如下：
一般节点连接：节点->节点条件判断节点连接：条件节点(yes)->正确应答节点条件节点(no)->错误应答节点
MarkDown代码
start->isLoginisLogin(yes)->testisLogin(no)->login->testtest->end
网页显示效果
MarkDown代码
start=>start: 开始isLogin=>condition: 是否已登录？login=>operation: 登陆selectPic=>operation: 选择一张图片isPic=>condition: 格式是否正确？doIt=>operation: 完成资料isRight=>condition: 资料是否符合要求？end=>end: 完成start->isLoginisLogin(yes)->selectPicisLogin(no)->login->selectPicselectPic->isPicisPic(yes)->doIt->isRightisPic(no)->selectPicisRight(yes)->endisRight(no)->doIt
网页显示效果
05. Gravizo
在研究Markdown UML图的时候，找到了不少在线绘制UML图的方式，例如Dot、PlantUML和UMLGraph等方式，并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。
例如，我们可以使用PlantUML的方式绘制一个用例图。
MarkDown代码
@startumlleft to right directionskinparam packageStyle rectactor customeractor clerkrectangle checkout {customer -- (checkout)(checkout) .> (payment) : include(help) .> (checkout) : extends(checkout) -- clerk}@enduml
可以使用下面代码调用该图片
<img src='/g?@startumlleft to right direction;skinparam packageStyle rect;actor customer;actor clerk;rectangle checkout {customer -- (checkout);(checkout) .> (payment) : include;(help) .> (checkout) : extends;(checkout) -- clerk;}@enduml'>
06. 甘特图样例
MarkDown代码
```mermaid%% 语法示例ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图section 设计需求 :done, des1, -01-06,-01-08原型 :active, des2, -01-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, -01-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务:crit, 5d耍:2dsection 测试功能测试:active, a1, after des3, 3d压力测试 :after a1 , 20h测试报告 : 48h```
网页显示效果
07. 其它参考示例
7.1 UML标准时序图样例
MarkDown源码
```mermaid%% 时序图例子,-> 直线，-->虚线，->>实线箭头sequenceDiagramparticipant 张三participant 李四张三->王五: 王五你好吗？loop 健康检查王五->王五: 与疾病战斗endNote right of 王五: 合理 食物 <br/>看医生...李四-->>张三: 很好!王五->李四: 你怎么样?李四-->王五: 很好!```
网页显示效果
7.2 UML时序图源码复杂样例
MarkDown源码
```mermaidsequenceDiagramTitle: 标题：复杂使用对象A->>对象B: 对象B你好吗?（请求）Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->>对象A: 我很好(响应)对象B->>小三: 你好吗小三-->>对象A: 对象B找我了对象A->>对象B: 你真的好吗？Note over 小三,对象B: 我们是朋友participant CNote right of C: 没人陪我玩```
7.3 UML时序图源码样例
MarkDown源码
```mermaidsequenceDiagram对象A->>对象B: 对象B你好吗?（请求）Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->>对象A: 我很好(响应)对象A->>对象B: 你真的好吗？```
网页显示效果
7.4标准流程图源码格式（横向）
MarkDown源码
```mermaidflowchatst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st(right)->op(right)->condcond(yes)->io(bottom)->econd(no)->sub1(right)->op```
网页显示效果
7.5 标准流程图源码格式
MarkDown源码
```mermaidflowchatst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st->op->condcond(yes)->io->econd(no)->sub1(right)->op```
网页显示效果
7.6 竖向流程图源码格式
MarkDown源码
```mermaidgraph TDA[方形] --> B(圆角)B --> C{条件a}C --> |a=1| D[结果1]C --> |a=2| E[结果2]F[竖向流程图]```
网页显示效果
7.7 横向流程图源码格式
MarkDown源码
```mermaidgraph LRA[方形] -->B(圆角)B --> C{条件a}C -->|a=1| D[结果1]C -->|a=2| E[结果2]F[横向流程图]```
网页显示效果
