序言
俗话说得好,一图胜千言。大家在平日工作中撰写文档,往往都需要画各种图来辅助表达中心思想,比如流程图、时序图、UML图等。很多同学会选择使用 Axure 、ProcessOn、Diagrams(darw.io)、XMind等软件来画图,这些软件功能丰富可定制化强,但是有时候会让人局限在软件提供的素材中,陷入鼠标拖动绘制的泥潭,无形中浪费了宝贵时间;另一方面出于安全合规考虑,在线绘图类型的软件也存在数据隐私风险。
身为程序员,在此为大家推荐一个专注于“画图”本身的工具 PlantUML,通过写代码的方式完成满足各种需求场景的画图工作,将人的精力集中到思想的表达与传递,避免无谓的图形页面样式修改调整,进而提升工作效率。
工具介绍
PlantUML 是一个可以快速编写 UML 图的开源组件(PlantUML · GitHub),始于 2009 年,支持时序图、用例图、类图、对象图、活动图等多种 UML 图,也支持 JSON 数据、YAML 数据、网络图、线框图形界面、架构图、甘特图、思维导图图示等。PlantUML 采用 GPL 协议发布,在公司内部仅作为工具,不分发不修改的前提下软件可以正常使用。
相较与其他工具的鼠标拖拽绘图方式,PlantUML 的图不是“画”出来的,而是“写”出来的。PlantUML 同时支持多种主题,本地安装即可渲染出图形,样式丰富可定制化,而且文本格式也便于保存到 git 实现历史记录 diff。最重要的是学习成本很低。
画图效果
UML类图


活动图


流程图

时序图

脑图

使用准备
PlantUML 支持各类常用开发软件,比如 IntelliJ系列、Eclipse、VS code 等,官网上也支持实时编辑;同时也支持命令行方式生成图片。这里主要讲解IntelliJ IDEA。
值得注意的是,如果你用的是MAC电脑,那么有些关键字是无法直接解析的,需要额外安装一些工具包。如果仅仅只有简单画图需要,可以跳过该步骤,等需要的时候再来安装也可以。
- 安装brew(如果已经安装过,跳过该步骤): /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ,中间会有一个暂定,询问是否确认安装,enter即可;
- 安装graphviz: brew install graphviz ,时间较长,等待即可;
- 重启IDEA。
下载插件
在IDEA插件市场中搜索关键字,PlantUML Integration即为我们要下载的插件。

语法介绍
简单时序图
可以使用关键字定义 UML 元素,如:actor(角色)、boundary(边界)、control(控制)、entity(实体)、database(数据库)、collections(集合)、queue(队列),使用 as 关键字重命名参与者。
文字版:
@startuml
participant Participant as Foo
actor Actor as Fool
boundary Boundary as Foo2
control Contro1 as Foo3
entity Entity as Foo4
database Database as Foo5
collections Collections as Foo6
queue Queue as Foo7
Foo -> Fool : To actor
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7 : To queue
@enduml
图示版:

复杂时序图
支持使用关键字 autonumber 用于自动对消息编号,title 关键字用于为页面添加标题。页面可以使用 header 和 footer 显示页眉和页脚。
使用这些关键词来组合消息:alt/else、opt、loop、par、break、critical、group, 后面紧跟着消息内容,关键词 end 用来结束分组。分组是可以嵌套使用的。
文字版:
@startuml
autonumber
title 这是图的主题
header 页眉内容
footer 页脚内容
Alice -> Bob:认证请求
alt 成功情况
Bob ->Alice:认证接受
else 失败情况1
Bob -> Alice:认证失败
group 我自己的标签
Alice->Log:开始记录攻击日志
loop 1000次
Alice->Bob:DNS攻击
end
Alice->Log :结束记录攻击日志
end
else 其它失败情况
Bob -> Alice:请重复
end
@enduml
图示版:
用例图
package 定义一个包,as 定义对应别名,usecase 定义用例,箭头定义关系。注意,该场景下,package需要安装前文中提到的 graphviz ,否则会报错。
文字版:
@startuml
left to right direction
actor Guest as g
package Professional {
actor Chef as c
actor "Food Critic" as fc
}
package Restaurant {
usecase "Eat Food" as UC1
usecase "Pay for Food" as UO
usecase "Drink" as UC3
usecase "Review" as UC4
}
fc --> UC4
g --> UC1
g --> UC2
g --> UC3
@enduml
图示版:
类图:
使用 class 定义类,默认会自动将属性和方法分割开,也可以使用分隔符 --..==__. 分隔符中也可以添加文字。
文字版:
@startuml
class Fool {
You can use
several lines
..
as you want
and group
==
things together
__
You can have as many groups as you want
--
End of class
}
class User {
.. Simple Getter ..
+ getName()
+getAddress()
.. Some setter ..
+setName()
__private data__
int age
-- encrypted --
String password
}
@enduml
图示版:
部署图
node 标识节点,file 标识文件,cloud 定义云,效果如下:
文字版:
@startuml
node Node1 as n1
node Node2 as n2
file File1 as f1
cloud c1 as "this is a cloud"
cloud c2 as "this is another cloud"
n1->n2
n2-->f1
f1->c1
f1->c2
@enduml
图示版:
小结
PlantUML 使用格式良好且可读的代码来呈现图表,相比于其他工具,PlantUML 将目光聚焦到画图本身,用户只需要根据规范去写逻辑代码就可以生成比较好看且整洁的图表,简单高效。大家不必刻意去记它的语法,在使用的过程中去查阅文档参考,很快就可以上手。使用这款工具来画图,不得不说,太极客了。
最后,感谢你的阅读,如果这篇文章让你有所收获,也欢迎你将它分享给更多的人。