这里大概就只能生成两种类型的图：

• 序列图
• 流程图

序列图

```sequence
A->B: 一句话证明你很寂寞。
Note right of B: thinking
B->B: counting
B-->A: 这句话有一共六十九笔
```

序列图很简单， 左边 A->B就能生成两个对象.按照从上至下的顺序，将序列依次画出。 –>是虚线， ->是实线。 Note Right of 【名称】 是注释框。

```sequence
A->B: 一句话证明你很寂寞。
Note left of A: thinking
B->B: counting
B-->A: 这句话有一共六十九笔
Note right of X: 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
```

流程图的代码：https://github.com/adrai/flowchart.js

看了一下代码，准备下一篇讲一讲 UML 序列图和流程的实现。