基于js-sequence-diagrams实现了序列图，使用下列的格式声明一个序列图
Markdown代码
```mermaid sequenceDiagram DHCP客户机-->>DHCP服务器: IP租约请求 DHCP服务器-->>DHCP客户机: IP租约提供 DHCP客户机-->>DHCP服务器: IP租约选择 DHCP服务器-->>DHCP客户机: IP租约确认 ```网页显示效果
DHCP客户机 DHCP服务器 IP租约请求 IP租约提供 IP租约选择 IP租约确认 DHCP客户机 DHCP服务器 标题：复杂使用注意：所有的序列图代码需要放在一个语法类型为sequence的代码块中。
序列图的语法如下图所示。
具体来说：
设置title，采用title: message。MarkDown代码
title: 序列图标题网页显示效果
序列图标题 设置participant，采用participant: actorMarkDown代码
participant A participant B网页显示效果
A B A B 序列图标题设置note，
左侧note： note left of acotor： message右侧note： note right of actor: message,覆盖note： note over actor:messageMarkDown代码
note left of A: 左侧note note right of B: 右侧note note over C: 覆盖note note over A,B: 覆盖多个actor note over B,C: 测试下\n 换行网页显示效果
A B C 左侧note 右侧note 覆盖note 覆盖多个actor 测试下 换行 A B C 序列图标题 设置会话， 实线实箭头： actor->actor: message虚线实箭头： actor–>actor:message实线虚箭头： actor->>actor:message虚线虚箭头： actor–>>actor:messageMarkDown代码
A->A:自言自语 A->B:实线实箭头 A-->B:虚线实箭头 A->>B:实线虚箭头 A-->>B:虚线虚箭头网页显示效果
A B 自言自语 实线实箭头 虚线实箭头 实线虚箭头 虚线虚箭头 A B 序列图标题下面的案例演示了序列图语法的混合使用，参见代码：
MarkDown代码
Title: 作业通知提交序列图 教师-->班长: 通知明天交作业 note left of 教师:通知 班长-->同学们:记得明天交作业 同学们->>班长:了解 同学们-->教师: 交作业 note right of 同学们:作业网页显示效果
教师 班长 同学们 通知明天交作业 通知 记得明天交作业 了解 交作业 作业 教师 班长 同学们 作业通知提交序列图Markdown基于flowchart.js实现流程图。一个简单的流程格式如下代码所示：
MarkDown代码
st=>start: Start e=>end op=>operation: My Operation cond=>condition: Yes or No? st->op->cond cond(yes)->e cond(no)->op网页效果显示
Created with Raphaël 2.2.0 Start My Operation Yes or No? End yes no注意：所有的流程图代码需要放在一个语法类型为flow的代码块中。
格式如下：
一般节点连接： 节点->节点 条件判断节点连接： 条件节点(yes)->正确应答节点 条件节点(no)->错误应答节点MarkDown代码
start->isLogin isLogin(yes)->test isLogin(no)->login->test test->end网页显示效果
MarkDown代码
start=>start: 开始 isLogin=>condition: 是否已登录？ login=>operation: 登陆 selectPic=>operation: 选择一张图片 isPic=>condition: 格式是否正确？ doIt=>operation: 完成资料 isRight=>condition: 资料是否符合要求？ end=>end: 完成 start->isLogin isLogin(yes)->selectPic isLogin(no)->login->selectPic selectPic->isPic isPic(yes)->doIt->isRight isPic(no)->selectPic isRight(yes)->end isRight(no)->doIt网页显示效果
Created with Raphaël 2.2.0 开始 是否已登录？ 选择一张图片 格式是否正确？ 完成资料 资料是否符合要求？ 完成 登陆 yes no yes no yes no在研究Markdown UML图的时候，找到了不少在线绘制UML图的方式，例如Dot、PlantUML和UMLGraph等方式，并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。
例如，我们可以使用PlantUML的方式绘制一个用例图。
MarkDown代码
@startuml left to right direction skinparam packageStyle rect actor customer actor clerk rectangle checkout { customer -- (checkout) (checkout) .> (payment) : include (help) .> (checkout) : extends (checkout) -- clerk } @enduml可以使用下面代码调用该图片
<img src='http://g.gravizo.com/g? @startuml left to right direction; skinparam packageStyle rect; actor customer; actor clerk; rectangle checkout { customer -- (checkout); (checkout) .> (payment) : include; (help) .> (checkout) : extends; (checkout) -- clerk; } @enduml '>MarkDown代码
```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 ```网页显示效果
Mon 06 Mon 13 Mon 20 需求 原型 UI设计 未来任务 学习准备理解需求 设计框架 开发 未来任务 耍 功能测试 压力测试 测试报告 设计 开发 测试 软件开发甘特图MarkDown源码
```mermaid %% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 王五你好吗？ loop 健康检查 王五->王五: 与疾病战斗 end Note right of 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好! ```网页显示效果
张三 李四 王五 王五你好吗？ 与疾病战斗 loop [ 健康检查 ] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 作业通知提交序列图MarkDown源码
```mermaid 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 标题：复杂使用MarkDown源码
```mermaid 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 标题：复杂使用MarkDown源码
```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 noMarkDown源码
```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 开始框 处理框 判断框(是或否?) 输入输出框 yesMarkDown源码
```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 竖向流程图MarkDown源码
```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 横向流程图