程序员在工作中经常会有画时序图和流程图的需求，尤其是在写文档的时候。通常我们会选择ProcessOn之类的工具来画图，但有时候使用代码画图可能效率更高。毕竟，没有人比程序员更熟悉代码了。今天给大家推荐一款绘图工具PlantUML，配合IDEA使用，绘图效率更高！SpringBoot实战电商项目商城（50k+star）地址：https://github.com/macrozheng/mallPlantUML简介PlantUML是一款开源的UML图绘制工具，支持文本生成图形，使用效率非常高。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。接下来用PlantUML画流程图，可以实时预览，速度也很快！安装在IDEA中安装插件使用PlantUML无疑是最方便的。接下来我们安装IDEA的PlantUML插件。首先在IDEA的插件市场搜索PlantUML，安装1号插件；有时候，如果网络不好，你可能无法下载它。您可以点击Plguin主页按钮进入插件主页，然后选择合适的版本下载压缩包；下载成功后，选择本地安装。接下来，我们使用PlantUML插件绘制时序图、用例图、类图、活动图、思维导图，来体验一下PlantUML是否真的好用！序列图序列图（SequenceDiagram），是一种UML交互图。它通过描述对象之间发送消息的时间顺序来显示多个对象之间的动态协作。我们在学习Oauth2的时候，第一步就是了解Oauth2的流程。这时候，一张时序图就会帮上大忙。下面我们使用PlantUML画出Oauth2中使用授权码方式发放token的时序图。首先，我们需要新建一个PlantUML文件，并选择一个时序图；我们可以通过PlantUML提供的语法生成Oauth2时序图。语法很简单，详细说明如下；@startumltitleOauth2tokenissuedauthorizationcodemodeactorUserasuserparticipant"UserAgent"asuserAgentparticipant"Client"asclientparticipant"AuthLogin"asloginparticipant"AuthServer"asserverautonumberuser->userAgent:accessclientactivateuserAgentuserAgent->login:重定向到授权page+clientId+redirectUrlactivateloginlogin->server:Username+password+clientId+redirectUrlactivateserverserver-->login:returnauthorizationcodelogin-->userAgent:重定向到redirectUrl+authorizationcodecodedeactivateloginuserAgent->client:exchangeauthorizationcodefortokenactivateclientclient->server:authorizationcodecode+clientId+clientSecretserver-->client:issuedaccesstokenaccessToken+refreshTokendeactivateserverclient-->userAgent:returnaccessandrefreshtokendeactivateclientuserAgent-->user:tokenissuedcompletedeactivateuserAgent@用户代理enduml代码会生成如下序列写代码画序列图是不是很爽？这个时序图的重点解释如下：title可以用来指定UML图的标题；actors可用于声明人形参与者；participants可用于声明通用类型通过->可以画出参与者之间的关系，可以使用虚线箭头-->；在每一个参与者关系的背后，你可以使用：adddescriptiontotherelationship;通过autonumber，我们可以自动为参与者关系添加序号；通过activate和deactivate，我们可以指定参与者的生命线。这里还有一个神奇的功能。当我们右击时序图，可以生成一个在线访问链接；直接访问这个Link，就可以在线访问UML时序图并进行编辑了，是不是很爽！UseCaseDiagram用例图（UsecaseDiagram）是用户与系统交互的最简单表示，显示了用户与其相关用例之间的关系。通过用例图，我们可以很容易的表达出系统中各个角色和用例之间的关系。接下来，我们使用PlantUML绘制用例图。首先，我们需要新建一个PlantUML文件，并选择用例图，用例图用来表示顾客、厨师、美食家之间的关系以及餐厅中的各种用例。具体内容如下；@startumlllefttorightdirectionactorGuestasgpackageProfessional{actorChiefascactor“FoodCritic”asfc}packageRestaurant{usecase“EatFood”asuc1usecase“PayForFood”asuc2usecase“Drink”asuc3usecase“Review”asuc4}g-->uc1g-->uc2g-->uc3fc-->uc4@enduml这段代码会生成如下用例图；该用例图的重点说明如下：lefttorightdirection表示从左到右按顺序绘制用例图，默认为从上到下；通过package可以对角色和用例进行分组；用户可以通过参与者来定义；可以通过用例来定义用例；角色和用例之间的关系可以用-->表示。类图类图（ClassDiagram）可以表示一个类的静态结构，比如类中包含的属性和方法，以及类的继承结构。下面我们使用PlantUML来画一个类图。首先，我们需要新建一个PlantUML文件，并选择类图，类图用来表示Person、Student、Teacher类的结构。具体内容如下；@startumlclassPerson{#Stringname#Integerage+voidmove()+voidsay()}classStudent{-StringstudentNo+voidstudy()}classTeacher{-StringteacherNo+voidteach()}Person<|--StudentPerson<|--Teacher@enduml这段代码会生成如下类图，看代码和Class图，是不是发现和我们代码定义的类很像呢？这个类图的重点解释如下：类可以通过类来定义；可见性可以通过在属性和方法的左边加符号来定义，-表示私有，#表示保护，+表示公有；通过<|--表示类之间的继承关系。活动图活动图（ActivityDiagram）是我们使用比较多的一种UML图。它通常用于表示业务流程。例如，电子商务中的订单流程可以用它来表示。下面我们使用PlantUML画一个活动图。首先，我们需要创建一个新的PlantUML文件并选择活动图。这里我们使用商城项目中购物车生成确认单的过程。具体内容如下；ums_member_receive_address表中\n获取会员接收地址列表；：获取该会员所有的优惠券信息；switch（根据use_type判断每张优惠券是否可用）case(0):universal;if（判断所有商品的总金额\n是否满足起始使用量）then(no):获取用户无法使用的优惠券列表；stopendifcase(-1)：指定类别；if(判断指定类别商品的总金额\n是否满足起始使用量)then(no):获取用户不可使用的优惠券列表；stopendifcase(-2)：判断指定商品的总金额是否满足阈值金额；if(判断指定类目总金额\n是否满足门槛金额)then(No):获取用户不可用优惠券列表；stopendifendswitch：获取用户可使用的优惠券列表；：获取用户积分；：获取积分使用规则；：计算总金额、活动折扣、应付金额；stop@enduml这段代码会生成如下活动图，在活动图中，我们不仅可以使用ifelse，还可以使用switch，甚至是while循环，功能相当强大；这个活动图的关键说明如下：流程的开始和结束可以用start和stop来表示；by:and;在中间添加文字定义活动流程节点；通过if+then+endif定义条件判断；通过switch+case+endswitch定义switch判断。思维导图思维导图是表达发散思维的有效图形工具。它简单而有效，是一种实用的思维工具。之前在我的商城学习教程中很多地方都用到了。让我们使用PlantUML绘制思维导图。首先我们需要新建一个PlantUML文件，选择思维导图，这里我们使用商城学习路线中的大纲视图，具体内容如下；@startmindmap+[#17ADF1]商城学习路线++[#lightgreen]推荐资料++[#lightblue]后端技术栈+++_项目框架+++_数据存储+++_运维部署+++_其他++[#orange]构建项目骨架++[#1DBAAF]项目部署++++_Windows下部署++++_Linux下使用Docker部署+++_Linux下使用DockerCompose部署++++_下使用Jenkins自动部署Linux--[#1DBAAF]电商业务---_权限管理模块--_商品模块--_订单模块--_营销模块--[#orange]技术要点--[#lightblue]前端技术栈--[#lightgreen]进阶微服务--_SpringCloud技术栈--_项目部署--_技术要点--[#yellow]开发工具--[#lightgrey]扩展学习@endmindmap这段代码会生成如下思维导图map，其实我们可以使用PlantUMLStyle自己定义图形，这里我自定义了颜色；这张思维导图的重点解释如下：+和-可以表示思维导图中的节点，具有方向性；节点的边框颜色可以通过[#color]定义；节点的边框颜色可以定义为_去掉节点的边框；总结虽然可以画UML图的图形化工具很多，但是对于程序员来说，用代码来画可能会更加直接和高效，尤其是配合IDEA使用。如果你想用代码画图，试试PlantUML。参考官方文档：https://plantuml.com/zh/本文GitHubhttps://github.com/macrozheng/mall-learning已收录，欢迎Star！
