前言
最近通过代码来看看这个图,给大家看图、UML ,感觉很给大家分享。
大家平时用他们出的图呢,是用什么样的图,都用画图来画的,我们用画图来画图 呢draw.io
?processOn
今天给大家介绍一款想要的作品,用的画图,配合IDE
使用PlantUML
!
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
1.PlantUML 简介
PlantUML 是一个示例,可以编写一个支持编码的生成图形。可以使用工具来快速绘制 UML 图、UML 引导图、类图、ER 等。
PlantUML 出来的图,漂亮漂亮的,先给大家看出来的植物图,然后给大家看出来
@startuml title Sequence Diagram of User login actor User as user participant "gateway" as gateway participant "user-core" as userCore database "MySQL" as mysql database "Redis" as redis autonumber user-> gateway:login request,param:username,password activate gateway gateway-> userCore:forward the login request activate userCore userCore-> userCore :check the login param userCore-> mysql:query user info from mysql by username activate mysql mysql-> userCore:response with username and password deactivate mysql userCore->userCore:compare the requested password with the DB's password userCore-> userCore: generate an unique token userCore--> redis: save the token to redis userCore-> gateway: response with the token deactivate userCore gateway-> user: login success with the token deactivate gateway @enduml
用例图如下:
基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
2. PlantUML 的安装使用
PlantUML的安装很方便的。插件,插件是:PlantUML Integration
,大家可以去IDE市场搜索安装的方便,如下:
安装成功想快速体验一下,然后新建一个项目的话,然后新建一个UML文件,文件,我把那个文件复制进去,就可以代码,然后看到一个工厂的小测试图。
(如果是非展示,需要安装图,希望即时安装下Graphviz
)
3 如何用UML画图。
什么是图?
之间的示例图消息序列图,一种UML序列图(行为序列图、循环序列图)以及它通过描述对象之间发送的图。它可以显示多个对象的顺序动态。它可以表示用,当一个用例行为时,其中的每条消息中触发一个操作或状态机中触发转换的触发事件。
如何用 PlantUML 画图 呢?
你可以先新建一个 PlantUML 文件。
然后选择 Sequence,并定义一个文件名称。
有默认的图生成啦。
我们照着用英文怎么说。
@startuml title Sequence Diagram of User login actor User as user participant "gateway" as gateway participant "user-core" as userCore database "MySQL" as mysql database "Redis" as redis autonumber user-> gateway:login request,param:username,password activate gateway gateway-> userCore:forward the login request activate userCore userCore-> userCore :check the login param userCore-> mysql:query user info from mysql by username activate mysql mysql-> userCore:response with username and password deactivate mysql userCore->userCore:compare the requested password with the DB's password userCore-> userCore: generate an unique token userCore--> redis: save the token to redis userCore-> gateway: response with the token deactivate userCore gateway-> user: login success with the token deactivate gateway @enduml
关键词解释如下:
title
:表示该UML用示例图的标题。actor
:表示人形的参与者。as
你可以把它当作关键字理解变量。participant
:表示普通的主要演员,它跟演员的形状不一样。database
:代表人物形象是数据库。
显示的顺序是如何定义的: 声明的参与者顺序是(默认的)显示顺序。autonumber
:可以给参与者添加顺序。->
:表示如果你希望参与者是虚线,可以使用-->
。activate
和deactivate
:表演者的生命线。
它,PlantUML
还挺丰富的在我的组合中,提供了一个非常适合的消息,非常适合推出的功能alt/else、opt、loop
。
@startuml Alice -> Bob: 认证请求 alt 登录成功 Bob -> Alice: 认证接受 else 某种失败情况 Bob -> Alice: 认证失败 group 我自己的标签 Alice -> Log : 开始记录攻击日志 loop 1000次 Alice -> Bob: DNS 攻击 end Alice -> Log : 结束记录攻击日志 end else 另一种失败 Bob -> Alice: 请重复 end @enduml
的图如下:
4.如何用PlantUML画UML用例图
什么是用例图?
用例图:用例图(use case diagram)是用户与用最常用的用户和表示,通过不同的关系。经常用图也和其他的图形来使用。
如何用 PlantUML 画 UML 用例图呢?
你可以先新建一个 PlantUML 文件,然后选择用户案例,并定义一个文件名。
有默认的UML用例图生成啦。
我挑官网一个用例图demo来介绍吧。代码如下:
@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 UC2 usecase "Drink" as UC3 usecase "Review" as UC4 } fc --> UC4 g --> UC1 g --> UC2 g --> UC3 @enduml
生成的用例图如下:
以下是每个关键词的英文:
left to right direction
:表示从左到右绘制用例图。actor Guest as g
:定义一个人形参与者,变量名是g。package Professional
:定义一个包package
,名字为Professional
。package
可以用来对用例和角色分组。usecase "Eat Food" as UC1
别名:定义一个用例,为UC1
。fc --> UC4
:表示角色fc
和用例UC4
关联起来,角色和用例之间的关系-->
用来表示。
5.如何用plantUML画思维导图
什么是思想导图?
中文是思维导图,又名心智导图,是表达发散性思维的有效思维工具,它简单却又很高效,是一种很实用的思维工具。
写一个简单的思维导图,代码如下:
@startmindmap * 面试题 ** 计算机网络面试题 *** TCP/IP十五连问 *** 两万字计算机面试题汇总 ** MySQL面试题 ** Redis面试题 ** 大厂面试真题 *** 虾皮十五连问 *** 五年Oppo后端面试真题 *** 腾讯云十五连问 @endmindmap
plantUML的画意导图,还是挺简单的,大家可以看下效果:
6.如何用planUML画出活动
什么是活动图?
动态图(动态图)了活动图,实现的工作图。
我画了一个简单版的登录活动流程:
@startuml title Activity Diagram of User login start :user request login; if (is request param null?) then (N) :query user info by username; if (is user info null ?) then (N) :compare the password; if (Is password right?) then (Y) :generate a token ,and set it to redis; :response with login success; else(N) :response with wrong password code; stop endif else(Y) :response with error userinfo; stop endif else(Y) :response with error param; stop endif stop @enduml
生成的顺序:
活动图关键解释如下:
start
:表示活动图流程的开始。stop
:表示活动图流程的结束。:user request login;
:表示活动流程异常为user request login
,需要加:
和;
的哈。if+then+endif
:表示一个完整的条件判断。
最后
本文介绍了植物UML画图的相关知识,有兴趣的小伙伴,可以自己动手试一试。