CSDN Markdown 编辑器 第五篇 UML

Posted on Edited on Word count in article: 756 Reading time ≈ 1 mins.

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

  • 序列图
  • 流程图

序列图

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

Created with Raphaël 2.1.2 A A B B 一句话证明你很寂寞。 thinking counting
这句话有一共六十九笔

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

1
2
3
4
5
A->B: 一句话证明你很寂寞。
Note left of A: thinking
B->B: counting
B-->A: 这句话有一共六十九笔
Note right of X: SB

Created with Raphaël 2.1.2 A A B B X X 一句话证明你很寂寞。 thinking counting
这句话有一共六十九笔 SB

如果Note中的对象名没有出现过，就会自建一个。另外还可以使用Note left of。

这个js是使用的 https://github.com/bramp/js-sequence-diagrams

流程图

1
2
3
4
5
6
7
8
st=>start: 开始吃饭
e=>end: 结束吃饭
op=>operation: 埋头苦吃
cond=>condition: 已经吃饱了？

st->op->cond
cond(yes)->e
cond(no)->op

Created with Raphaël 2.1.2 开始吃饭 埋头苦吃 已经吃饱了？ 结束吃饭 yes no

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

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