横空出世!IDEA画图神器来了,比Visio快10倍!

持续交付狂
• 阅读 3858
程序员在工作中,经常会有绘制时序图、流程图的需求,尤其是在写文档的时候。平时我们会选择ProcessOn这类工具来绘制,但有时候用代码来画图可能会更高效一点,毕竟没有比程序员更熟悉代码的了。今天给大家推荐一款画图工具PlantUML,可以配合IDEA使用,画图更高效!

SpringBoot实战电商项目mall(50k+star)地址:https://github.com/macrozheng/mall

PlantUML简介

PlantUML是一款开源的UML图绘制工具,支持通过文本来生成图形,使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。

下面使用PlantUML来绘制一张流程图,可以实时预览,速度也很快!

横空出世!IDEA画图神器来了,比Visio快10倍!

安装

通过在IDEA中安装插件来使用PlantUML无疑是最方便的,接下来我们来安装下IDEA的PlantUML插件。
  • 首先在IDEA的插件市场中搜索PlantUML,安装这个排名第一的插件;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 有时候网络不好的话可能下载不下来,可以点击Plguin homepage按钮访问插件主页,然后选择合适的版本下载压缩包;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 下载成功后,选择从本地安装即可。

横空出世!IDEA画图神器来了,比Visio快10倍!

使用

接下来我们使用PlantUML插件分别绘制时序图、用例图、类图、活动图、思维导图,来体验下PlantUML是不是真的好用!

时序图

时序图(Sequence Diagram),是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。我们在学习Oauth2的时候,第一步就是要搞懂Oauth2的流程,这时候有个时序图帮助可就大了。下面我们使用PlantUML来绘制Oauth2中使用授权码模式颁发令牌的时序图。
  • 首先我们需要新建一个PlantUML文件,选择时序图;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 我们可以通过PlantUML提供的语法来生成Oauth2的时序图,语法还是非常简单的,具体内容如下;
@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
  • 该代码将生成如下时序图,用写代码的方式来画时序图,是不是够炫酷;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 本时序图关键说明如下:

    • title可以用于指定UML图的标题;
    • 通过actor可以声明人形的参与者;
    • 通过participant可以声明普通类型的参与者;
    • 通过as可以给参与者取别名;
    • 通过->可以绘制参与者之间的关系,虚线箭头可以使用-->
    • 在每个参与者关系后面,可以使用:给关系添加说明;
    • 通过autonumber我们可以给参与者关系自动添加序号;
    • 通过activatedeactivate可以指定参与者的生命线。
  • 这里还有个比较神奇的功能,当我们右键时序图时,可以生成一个在线访问的链接;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 直接访问这个链接,可以在线访问UML时序图,并进行编辑,是不是很酷!

横空出世!IDEA画图神器来了,比Visio快10倍!

用例图

用例图(Usecase Diagram)是用户与系统交互的最简表示形式,展现了用户和与他相关的用例之间的关系。通过用例图,我们可以很方便地表示出系统中各个角色与用例之间的关系,下面我们用PlantUML来画个用例图。
  • 首先我们需要新建一个PlantUML文件,选择用例图,该用例图用于表示顾客、主厨、美食家与餐馆中各个用例之间的关系,具体内容如下;
@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
  • 该代码将生成如下用例图;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 本用例图关键说明如下:

    • left to right direction表示按从左到右的顺序绘制用例图,默认是从上到下;
    • 通过package可以对角色和用例进行分组;
    • 通过actor可以定义用户;
    • 通过usecase可以定义用例;
    • 角色和用例之间的关系可以使用-->来表示。

类图

类图(Class Diagram)可以表示类的静态结构,比如类中包含的属性和方法,还有类的继承结构。下面我们用PlantUML来画个类图。
  • 首先我们需要新建一个PlantUML文件,选择类图,该图用于表示Person、Student、Teacher类的结构,具体内容如下;
@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
  • 该代码将生成如下类图,看下代码和类图,是不是发现和我们用代码定义类还挺像的;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 本类图关键说明如下:

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

活动图

活动图(Activity Diagram)是我们用的比较多的UML图,经常用于表示业务流程,比如电商中的下单流程就可以用它来表示。下面我们用PlantUML来画个活动图。
  • 首先我们需要新建一个PlantUML文件,选择活动图,这里使用了mall项目中购物车中生成确认单的流程,具体内容如下;
@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
  • 该代码将生成如下活动图,在活动图中我们既可以用if else,又可以使用switch,甚至还可以使用while循环,功能还是挺强大的;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 本活动图关键说明如下:

    • 通过startstop可以表示流程的开始和结束;
    • 通过:;中间添加文字来定义活动流程节点;
    • 通过if+then+endif定义条件判断;
    • 通过switch+case+endswitch定义switch判断。

思维导图

思维导图(Mind Map),是表达发散性思维的有效图形工具,它简单却又很有效,是一种实用性的思维工具。之前在我的mall学习教程中就有很多地方用到了,下面我们用PlantUML来画个思维导图。
  • 首先我们需要新建一个PlantUML文件,选择思维导图,这里使用了mall学习路线中的大纲视图,具体内容如下;
@startmindmap
+[#17ADF1] mall学习路线
++[#lightgreen] 推荐资料
++[#lightblue] 后端技术栈
+++_ 项目框架
+++_ 数据存储
+++_ 运维部署
+++_ 其他
++[#orange] 搭建项目骨架
++[#1DBAAF] 项目部署
+++_ Windows下的部署
+++_ Linux下使用Docker部署
+++_ Linux下使用Docker Compose部署
+++_ Linux下使用Jenkins自动化部署
--[#1DBAAF] 电商业务
---_ 权限管理模块
---_ 商品模块
---_ 订单模块
---_ 营销模块
--[#orange] 技术要点
--[#lightblue] 前端技术栈
--[#lightgreen] 进阶微服务
---_ Spring Cloud技术栈
---_ 项目部署
---_ 技术要点
--[#yellow] 开发工具
--[#lightgrey] 扩展学习
@endmindmap
  • 该代码将生成如下思维导图,其实使用PlantUML我们可以自己定义图形的样式,这里我自定义了下颜色;

横空出世!IDEA画图神器来了,比Visio快10倍!

  • 本思维导图关键说明如下:

    • 通过+-可以表示思维导图中的节点,具有方向性;
    • 通过[#颜色]可以定义节点的边框颜色;
    • 通过_可以去除节点的边框;

总结

虽然目前可以绘制UML图的图形化工具很多,但是对于程序员来说,使用代码来绘图可能更直接,效率更高,尤其是配合IDEA使用。如果你想使用代码来绘图,不妨尝试下PlantUML吧。

参考资料

官方文档:https://plantuml.com/zh/

本文 GitHub https://github.com/macrozheng/mall-learning 已经收录,欢迎大家Star!
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Karen110 Karen110
3年前
Python海龟绘图,绘出最靓丽的景色
Hello,大家好。我是Python进阶者。前言大家平时用程序画图的时候是不是都觉得比较棘手了,今天给大家介绍个神奇的画图模块turtle。它可以通过一些指令让画笔任意移动,可以说是很智能了。导入模块importturtleturtle基本用法一、设置画布大小要想画图就要先有画布,不然没法让图显示,我们可以先设置画布大小:turtle.scree
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
3年前
Hibernate纯sql查询结果和该sql在数据库直接查询结果不一致
问题:今天在做一个查询的时候发现一个问题,我先在数据库实现了我需要的sql,然后我在代码中代码:selectdistinctd.id,d.name,COALESCE(c.count_num,0),COALESCE(c.count_fix,0),COALESCE(c
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
用写代码的方式画图-试下PlantUML吧 | 京东云技术团队
所谓一图胜千言,大家平日在工作中编写文档时,往往都需要画各种图来表达中心思想,在此为大家推荐一个专注于“画图”本身的工具PlantUML,通过写代码的方式完成满足各种需求场景的画图工作,将人的精力集中到思想的表达与传递,避免无谓的图形页面样式修改调整,进而提升工作效率。
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(