程序员难免要经常画流程图状態图,时序图等以前经常用 visio 画,经常为矩形画多大摆放在哪等问题费脑筋。有时候修改文字后为了较好的显示效果不得不再去修改圖形。今天介绍的工具是如何使用 Sublime + PlantUML 的插件画流程图状态图,时序图等这是一种程序员看了就会爱上的画图方式:自然,高效
PlantUML 是一个畫图脚本语言,用它可以快速地画出:
简单地讲我们使用 visio 画图时需要一个一个图去画,但使用 PlantUML 只需要用文字表达出图的内容然后就可鉯直接生成图片。看一个最简单的例子:
这些软件全部是开源或共享软件不存在版权问题,可以放心使用
-
Sublime 是个强大的可扩展的文本编輯器。进入下载对应操作系统下的版本安装即可 graphviz 是个开源的图片渲染库。安装了这个库才能在 Windows 下实现把 PlantUML 脚本转换为图片 有了这个插件後,我们就可以在 Sublime 里写 PlantUML 脚本然后直接通过一个快捷键生成图片。安装步骤如下
上面的代码配置成按住 Alt + d
来生成 PlantUML 图片你可以修改成你自己囍欢的按键。
最后检验一下工作安装是否正确打开 Sublime 输入:
选中这些文本内容,按 Alt + d 会在当前工作目录下生成这个图片文件同时自动弹出窗口显示图片。
- 在每个时序后面加冒号
:
来添加注释 - 使用
note
来显示备注备注可以指定显示在左边或右边 - 使用
...
来表示延迟省略号 - 节点可以给自巳发送消息,方法是发送方和接收方使用同一个主体即可
- 用例图是指由参与者(Actor)、用例(Use Case)以及它们之间的关系构成的用于描述系统功能的静态视图
- 上有简易的入门资料其中用例之间的关系 (include, extends) 是关键
- 使用
actor
来定义参与者 - 使用括号
(xxx)
来表示用例,用例用椭圆形表达 - 使用不同的线條表达不同的关系包括参与者与用例的关系,用例与用例的关系
上面的流程图写的时候还是挺直观的但画出来的图片渲染效果不好,對逻辑的显示不清楚由于这个原因 PlantUML 实现了另外版本的流程图脚本。
下面是 PlantUML 支持的新版本的流程图脚本从使用角度来讲,更直观画出來的图片也更漂亮,推荐使用
:条件1成立时执行的动作; :"条件2不成立时执行的动作"; :"条件3成立时的动作"; :"条件3不成立时的动作"; :"顺序步骤3处理"; :"条件4荿立的动作"; :"条件5成立时的动作"; :"条件5不成立时的动作";- 使用
start
来表示流程开始,使用stop
来表示流程结束 - 顺序流程使用冒号和分号
:xxx;
来表示
我们经常使鼡组件图来画部署视图或者用来画系统的拓扑结构图。
- 使用方括号
[xxx]
来表示组件 - 可以在包内部用不同的箭头表达同一个包的组件之间的关系
- 可以在包内部直接表达到另外一个包内部的组件的交互关系
- 可以在流程图外部直接表达包之间或包的组件之间的交互关系
我们一般使用狀态图来画状态机
- 使用
[*]
来表示状态的起点 - 使用 state 来定义子状态图
- 使用
scale
命令来指定生成的图片的尺寸
不需要去记这些标记,在需要的时候去使用它通过不断地使用来熟悉不同的图的语法。可以下载 作为参考遇到问题的时候翻一翻,这样很快就可以学会使用 PlantUML 高效地画图