程序员在工作中,经常会有绘制时序图、流程图的需求,尤其是在写文档的时候。平时我们会选择ProcessOn这类工具来绘制,但有时候用代码来画图可能会更高效一点,毕竟没有比程序员更熟悉代码的了。今天给大家推荐一款画图工具PlantUML,可以配合IDEA使用,画图更高效!
SpringBoot实战电商项目mall(50k+star)地址:github.com/macrozheng/…
PlantUML是一款开源的UML图绘制工具,支持通过文本来生成图形,使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。
下面使用PlantUML来绘制一张流程图,可以实时预览,速度也很快!
通过在IDEA中安装插件来使用PlantUML无疑是最方便的,接下来我们来安装下IDEA的PlantUML插件。
PlantUML
,安装这个排名第一的插件;Plguin homepage
按钮访问插件主页,然后选择合适的版本下载压缩包;接下来我们使用PlantUML插件分别绘制时序图、用例图、类图、活动图、思维导图,来体验下PlantUML是不是真的好用!
时序图(Sequence Diagram),是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。我们在学习Oauth2的时候,第一步就是要搞懂Oauth2的流程,这时候有个时序图帮助可就大了。下面我们使用PlantUML来绘制Oauth2中使用授权码模式颁发令牌的时序图。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@startuml title Oauth2令牌颁发之授权码模式 actor User as user participant "User Agent" as userAgent participant "Client" as client participant "Auth Login" as login participant "Auth Server" as server autonumber user->userAgent:访问客户端 activate userAgent userAgent->login:重定向到授权页面+clientId+redirectUrl activate login login->server:用户名+密码+clientId+redirectUrl activate server server-->login:返回授权码 login-->userAgent:重定向到redirectUrl+授权码code deactivate login userAgent->client:使用授权码code换取令牌 activate client client->server:授权码code+clientId+clientSecret server-->client:颁发访问令牌accessToken+refreshToken deactivate server client-->userAgent:返回访问和刷新令牌 deactivate client userAgent--> user:令牌颁发完成 deactivate userAgent @enduml <span class="copy-code-btn">复制代码</span> |
title
可以用于指定UML图的标题;actor
可以声明人形的参与者;participant
可以声明普通类型的参与者;as
可以给参与者取别名;->
可以绘制参与者之间的关系,虚线箭头可以使用-->
;:
给关系添加说明;autonumber
我们可以给参与者关系自动添加序号;activate
和deactivate
可以指定参与者的生命线。用例图(Usecase Diagram)是用户与系统交互的最简表示形式,展现了用户和与他相关的用例之间的关系。通过用例图,我们可以很方便地表示出系统中各个角色与用例之间的关系,下面我们用PlantUML来画个用例图。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@startuml left to right direction actor Guest as g package Professional { actor Chief as c actor "Food Critic" as fc } package Restaurant { usecase "Eat Food" as uc1 usecase "Pay For Food" as uc2 usecase "Drink" as uc3 usecase "Review" as uc4 } g--> uc1 g--> uc2 g--> uc3 fc--> uc4 @enduml <span class="copy-code-btn">复制代码</span> |
left to right direction
表示按从左到右的顺序绘制用例图,默认是从上到下;package
可以对角色和用例进行分组;actor
可以定义用户;usecase
可以定义用例;-->
来表示。类图(Class Diagram)可以表示类的静态结构,比如类中包含的属性和方法,还有类的继承结构。下面我们用PlantUML来画个类图。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@startuml class Person { # String name # Integer age + void move() + void say() } class Student { - String studentNo + void study() } class Teacher { - String teacherNo + void teach() } Person <|-- Student Person <|-- Teacher @enduml <span class="copy-code-btn">复制代码</span> |
class
可以定义类;-
表示private
,#
表示protected
,+
表示public
;<|--
表示类之间的继承关系。活动图(Activity Diagram)是我们用的比较多的UML图,经常用于表示业务流程,比如电商中的下单流程就可以用它来表示。下面我们用PlantUML来画个活动图。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
@startuml title 生成确认单流程 start :获取购物车信息并计算好优惠; :从ums_member_receive_address表中\n获取会员收货地址列表; :获取该会员所有优惠券信息; switch(根据use_type判断每个优惠券是否可用) case(0) :全场通用; if (判断所有商品总金额是否\n满足使用起点金额) then (否) :得到用户不可用优惠券列表; stop endif case(-1) :指定分类; if (判断指定分类商品总金额\n是否满足使用起点金额) then (否) :得到用户不可用优惠券列表; stop endif case(-2) :判断指定商品总金额是否满足使用起点金额; if (判断指定分类商品总金额\n是否满足使用起点金额) then (否) :得到用户不可用优惠券列表; stop endif endswitch :得到用户可用优惠券列表; :获取用户积分; :获取积分使用规则; :计算总金额,活动优惠,应付金额; stop @enduml <span class="copy-code-btn">复制代码</span> |
if else
,又可以使用switch
,甚至还可以使用while循环
,功能还是挺强大的;start
和stop
可以表示流程的开始和结束;:
和;
中间添加文字来定义活动流程节点;if
+then
+endif
定义条件判断;switch
+case
+endswitch
定义switch判断。思维导图(Mind Map),是表达发散性思维的有效图形工具,它简单却又很有效,是一种实用性的思维工具。之前在我的mall学习教程中就有很多地方用到了,下面我们用PlantUML来画个思维导图。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@startmindmap +[#17ADF1] mall学习路线 ++[#lightgreen] 推荐资料 ++[#lightblue] 后端技术栈 +++_ 项目框架 +++_ 数据存储 +++_ 运维部署 +++_ 其他 ++[#orange] 搭建项目骨架 ++[#1DBAAF] 项目部署 +++_ Windows下的部署 +++_ Linux下使用Docker部署 +++_ Linux下使用Docker Compose部署 +++_ Linux下使用Jenkins自动化部署 --[#1DBAAF] 电商业务 ---_ 权限管理模块 ---_ 商品模块 ---_ 订单模块 ---_ 营销模块 --[#orange] 技术要点 --[#lightblue] 前端技术栈 --[#lightgreen] 进阶微服务 ---_ Spring Cloud技术栈 ---_ 项目部署 ---_ 技术要点 --[#yellow] 开发工具 --[#lightgrey] 扩展学习 @endmindmap <span class="copy-code-btn">复制代码</span> |
+
和-
可以表示思维导图中的节点,具有方向性;[#颜色]
可以定义节点的边框颜色;_
可以去除节点的边框;虽然目前可以绘制UML图的图形化工具很多,但是对于程序员来说,使用代码来绘图可能更直接,效率更高,尤其是配合IDEA使用。如果你想使用代码来绘图,不妨尝试下PlantUML吧。
官方文档:plantuml.com/zh/
作者:MacroZheng
链接:https://juejin.cn/post/7017988314053492767
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。