这里大概只能产生两种类型的图：
- 序列图
- 框图
序列图
```sequence
A->B: 一句话证明你非常寂寞。
Note right of B: thinking
B->B: counting
B-->A: 这句话有一共六十九笔
```
Created with Raphaël 2.1.2AABB一句话证明你非常寂寞。thinkingcounting这句话有一共六十九笔
序列图非常easy， 左边 A->B就能生成两个对象.依照从上至下的顺序，将序列依次画出。 –>是虚线。 ->是实线。 Note Right of 【名称】 是凝视框。
```sequence
A->B: 一句话证明你非常寂寞。
Note left of A: thinking
B->B: counting
B-->A: 这句话有一共六十九笔
Note right of X: SB
```
Created with Raphaël 2.1.2AABBXX一句话证明你非常寂寞。
thinkingcounting这句话有一共六十九笔SB
假设Note中的对象名没有出现过，就会自建一个。另外还能够使用Note left of。
这个js是使用的 https://github.com/bramp/js-sequence-diagrams
流程图
```flow
st=>start: 開始吃饭
e=>end: 结束吃饭
op=>operation: 埋头苦吃
cond=>condition: 已经吃饱了？
st->op->cond
cond(yes)->e
cond(no)->op
```
Created with Raphaël 2.1.2開始吃饭埋头苦吃已经吃饱了？结束吃饭yesno
流程图的代码：https://github.com/adrai/flowchart.js
看了一下代码。准备下一篇讲一讲 UML 序列图和流程的实现。
版权声明：本文博主原创文章，博客，未经同意不得转载。