在平时的工作中,常常会遇到绘制时序图、流程图的需要。在要求不高的时候,咱们能够抉择ProcessOn、Xmind这类工具来绘制,但有时候用代码来画图可能会更高效一点,毕竟没有比程序员更相熟代码的了。明天给大家举荐一款画图工具PlantUML,能够配合IDEA应用,画图也更高效!

一、 PlantUML简介

lantUML是一款开源的UML图绘制工具,反对通过文原本生成图形,应用起来十分高效。能够反对时序图、类图、对象图、流动图、思维导图等图形的绘制。上面是应用PlantUML来绘制一张流程图,能够实时预览,速度也很快!

二、 装置

在IDEA中装置PlantUML插件的形式和其余插件的装置形式差不多。首先,在IDEA的插件市场中搜寻PlantUML,而后进行装置即可。

当然,在网络不好的时候,咱们也能够点击Plguin homepage按钮拜访插件主页,而后下载到本地进行装置。

三、 应用

接下来,咱们看看如何应用PlantUML插件绘制时序图、用例图、类图、流动图、思维导图,以及它们的一些应用技巧。

3.1 时序图

时序图(Sequence Diagram),是一种UML交互图。它通过形容对象之间发送音讯的工夫程序显示多个对象之间的动静合作。通常,在零碎的Oauth2的时候,第一步就是须要搞懂Oauth2的流程,这时候有个时序图就十分必要。上面咱们应用PlantUML来绘制Oauth2中应用受权码模式颁发令牌的时序图。

首先,咱们须要新建一个PlantUML文件,抉择时序图,如下图所示。

接下来,咱们能够通过PlantUML提供的语法来生成Oauth2的时序图。

@startumltitle Oauth2令牌颁发之受权码模式actor User as userparticipant "User Agent" as userAgentparticipant "Client" as clientparticipant "Auth Login" as loginparticipant "Auth Server" as serverautonumberuser->userAgent:拜访客户端activate userAgentuserAgent->login:重定向到受权页面+clientId+redirectUrlactivate loginlogin->server:用户名+明码+clientId+redirectUrlactivate serverserver-->login:返回受权码login-->userAgent:重定向到redirectUrl+受权码codedeactivate loginuserAgent->client:应用受权码code换取令牌activate clientclient->server:受权码code+clientId+clientSecretserver-->client:颁发拜访令牌accessToken+refreshTokendeactivate serverclient-->userAgent:返回拜访和刷新令牌deactivate clientuserAgent--> user:令牌颁发实现deactivate userAgent@enduml

而后,在IDEAL面板的左边就会对应的生成如下时序图,是不是很炫酷。

时序图有一些重要的参数阐明如下:

  • title能够用于指定UML图的题目;
  • actor能够申明人形的参与者;
  • participant能够申明一般类型的参与者;
  • as能够给参与者取别名;
  • ->能够绘制参与者之间的关系,虚线箭头能够应用-->;
  • 在每个参与者关系前面,能够应用:给关系增加阐明;
  • autonumber咱们能够给参与者关系主动增加序号;
  • activate和deactivate能够指定参与者的生命线。

并且,当咱们右键时序图时还能够生成一个在线拜访的链接,如下图。

间接拜访这个链接就能够在线拜访UML时序图并进行编辑。

3.2 用例图

用例图(Usecase Diagram)是用户与零碎交互的最简示意模式,次要用于展示用户和与他相干的用例之间的关系。通过用例图,咱们能够很不便地示意出零碎中各个角色与用例之间的关系。

首先,咱们须要新建一个PlantUML文件,抉择用例图(Use Case)即可,如下所示。

@startumlleft to right directionactor Guest as gpackage 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--> uc1g--> uc2g--> uc3fc--> uc4@enduml

不过,运行的时候,呈现了如下图所示的谬误。

这个起因是因为没有装置Graphviz,此时只须要装置Graphviz即可,装置的命令如下。

brew install Graphviz

用例图有一些参数阐明如下

  • left to right direction示意按从左到右的程序绘制用例图,默认是从上到下;
  • package能够对角色和用例进行分组;
  • actor能够定义用户;
  • usecase能够定义用例;
  • 角色和用例之间的关系能够应用-->来示意。

3.3 类图

类图(Class Diagram)能够示意类的动态构造,比方类中蕴含的属性和办法,还有类的继承构造。

首先,咱们须要新建一个PlantUML文件,抉择类图,如下所示。

@startumlclass Person {    # String name    # Integer age    + void move()    + void say()}class Student {    - String studentNo    + void study()}class Teacher {    - String teacherNo    + void teach()}Person <|-- StudentPerson <|-- Teacher@enduml

而后,就能够看到代码生成如下类图。

类图有一些要害参数的阐明如下:

  • class能够定义类;
  • 在属性和办法右边加符号能够定义可见性,-示意private,#示意protected,+示意public;
  • 通过<|--示意类之间的继承关系。

3.4 流动图

流动图(Activity Diagram)通常用于示意业务流程,比方电商中的下单流程,例如电商我的项目中购物车中生成确认单的流程。

首先,咱们须要新建一个PlantUML文件,抉择流动图,而后增加如下流程控制代码。

@startumltitle 生成确认单流程start:获取购物车信息并计算好优惠;:从ums_member_receive_address表中\n获取会员收货地址列表;:获取该会员所有优惠券信息;switch(依据use_type判断每个优惠券是否可用)case(0)    :全场通用;    if (判断所有商品总金额是否\n满足应用终点金额) then (否)        :失去用户不可用优惠券列表;        stop    endifcase(-1)    :指定分类;    if (判断指定分类商品总金额\n是否满足应用终点金额) then (否)        :失去用户不可用优惠券列表;        stop    endifcase(-2)    :判断指定商品总金额是否满足应用终点金额;    if (判断指定分类商品总金额\n是否满足应用终点金额) then (否)        :失去用户不可用优惠券列表;        stop    endifendswitch:失去用户可用优惠券列表;:获取用户积分;:获取积分应用规定;:计算总金额,流动优惠,应酬金额;stop@enduml

而后该代码将生成如下流动图,在流动图中咱们既能够用if else,又能够应用switch,甚至还能够应用while循环。

流动图有如下的一些阐明如下:

  • start和stop能够示意流程的开始和完结;
  • :和;两头增加文字来定义流动流程节点;
  • if+then+endif定义条件判断;
  • switch+case+endswitch定义switch判断。

3.5 思维导图

思维导图(Mind Map),是表白发散性思维的无效图形工具,它简略却又很无效,是一种实用性的思维工具。

首先,咱们须要新建一个PlantUML文件,抉择思维导图。

@startmindmap+[#17ADF1] mall学习路线++[#lightgreen] 举荐材料++[#lightblue] 后端技术栈+++_ 我的项目框架+++_ 数据存储+++_ 运维部署+++_ 其余++[#orange] 搭建我的项目骨架++[#1DBAAF] 我的项目部署+++_ Windows下的部署+++_ Linux下应用Docker部署+++_ Linux下应用Docker Compose部署+++_ Linux下应用Jenkins自动化部署--[#1DBAAF] 电商业务---_ 权限治理模块---_ 商品模块---_ 订单模块---_ 营销模块--[#orange] 技术要点--[#lightblue] 前端技术栈--[#lightgreen] 进阶微服务---_ Spring Cloud技术栈---_ 我的项目部署---_ 技术要点--[#yellow] 开发工具--[#lightgrey] 扩大学习@endmindmap

3.6 部署图

部署图(deployment diagram,配置图)是用来显示零碎中软件和硬件的物理架构。从部署图中,您能够理解到软件和硬件组件之间的物理关系以及解决节点的组件散布状况。应用部署图能够显示运行时零碎的构造,同时还传播形成应用程序的硬件和软件元素的配置和部署形式。

@startumlactor actoragent agentartifact artifactboundary boundarycard cardcloud cloudcomponent componentcontrol controldatabase databaseentity entityfile filefolder folderframe frameinterface  interfacenode nodepackage packagequeue queuestack stackrectangle rectanglestorage storageusecase usecase@enduml


尽管,目前能够绘制UML图的图形化工具很多,然而对于程序员来说,应用代码来绘图可能更间接。上文只列举一些常见的图场景,如果对PlantUML感兴趣,能够参考PlantUML中武官网