用代码画时序图!YYDS

本文涉及的产品
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
云数据库 RDS MySQL Serverless,价值2615元额度,1个月
简介: 最近通过代码来看看这个图,给大家看图、UML ,感觉很给大家分享。大家平时用他们出的图呢,是用什么样的图,都用画图来画的,我们用画图来画图 呢draw.io?processOn今天给大家介绍一款想要的作品,用的画图,配合IDE使用PlantUML!

前言

最近通过代码来看看这个图,给大家看图、UML ,感觉很给大家分享。

大家平时用他们出的图呢,是用什么样的图,都用画图来画的,我们用画图来画图draw.ioprocessOn

今天给大家介绍一款想要的作品,用的画图,配合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

用例图如下:

微信图片_20220908111008.png

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

2. PlantUML 的安装使用

PlantUML的安装很方便的。插件,插件是:PlantUML Integration,大家可以去IDE市场搜索安装的方便,如下:

微信图片_20220908111043.jpg

安装成功想快速体验一下,然后新建一个项目的话,然后新建一个UML文件,文件,我把那个文件复制进去,就可以代码,然后看到一个工厂的小测试图。

微信图片_20220908111105.jpg

(如果是非展示,需要安装图,希望即时安装下Graphviz

3 如何用UML画图。

什么是图?

之间的示例图消息序列图,一种UML序列图(行为序列图、循环序列图)以及它通过描述对象之间发送的图。它可以显示多个对象的顺序动态。它可以表示用,当一个用例行为时,其中的每条消息中触发一个操作或状态机中触发转换的触发事件。

如何用 PlantUML 画图 呢?

你可以先新建一个 PlantUML 文件。

微信图片_20220908111123.jpg

然后选择 Sequence,并定义一个文件名称。

微信图片_20220908111145.jpg

有默认的图生成啦。

微信图片_20220908111201.jpg

我们照着用英文怎么说。

@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:可以给参与者添加顺序。
  • ->:表示如果你希望参与者是虚线,可以使用-->
  • activatedeactivate:表演者的生命线。

它,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

的图如下:

微信图片_20220908111220.png

4.如何用PlantUML画UML用例图

什么是用例图?

用例图:用例图(use case diagram)是用户与用最常用的用户和表示,通过不同的关系。经常用图也和其他的图形来使用。

如何用 PlantUML 画 UML 用例图呢?

你可以先新建一个 PlantUML 文件,然后选择用户案例,并定义一个文件名。

微信图片_20220908111238.jpg

有默认的UML用例图生成啦。

微信图片_20220908111302.jpg

我挑官网一个用例图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

生成的用例图如下:

微信图片_20220908111319.jpg

以下是每个关键词的英文:

  • left to right direction:表示从左到右绘制用例图。
  • actor Guest as g:定义一个人形参与者,变量名是g。
  • package Professional:定义一个包package,名字为Professionalpackage可以用来对用例和角色分组。
  • usecase "Eat Food" as UC1别名:定义一个用例,为UC1
  • fc --> UC4:表示角色fc和用例UC4关联起来,角色和用例之间的关系-->用来表示。

5.如何用plantUML画思维导图

什么是思想导图?

中文是思维导图,又名心智导图,是表达发散性思维的有效思维工具,它简单却又很高效,是一种很实用的思维工具。

写一个简单的思维导图,代码如下:

@startmindmap
* 面试题
** 计算机网络面试题
*** TCP/IP十五连问
*** 两万字计算机面试题汇总
** MySQL面试题
** Redis面试题
** 大厂面试真题
*** 虾皮十五连问
*** 五年Oppo后端面试真题
*** 腾讯云十五连问
@endmindmap

plantUML的画意导图,还是挺简单的,大家可以看下效果:

微信图片_20220908111339.jpg

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

生成的顺序:微信图片_20220908111413.jpg

活动图关键解释如下:

  • start:表示活动图流程的开始。
  • stop:表示活动图流程的结束。
  • :user request login;:表示活动流程异常为user request login,需要加:;的哈。
  • if+then+endif:表示一个完整的条件判断。

最后

本文介绍了植物UML画图的相关知识,有兴趣的小伙伴,可以自己动手试一试。

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore     ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库 ECS 实例和一台目标数据库 RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
2月前
|
存储 NoSQL Java
10张流程图+部署图,讲透单点登录原理与简单实现
10张流程图+部署图,讲透单点登录原理与简单实现
19 1
10张流程图+部署图,讲透单点登录原理与简单实现
|
10月前
|
算法 定位技术
连连看核心算法与基本思想(附全部项目代码链接与代码详细注释)
连连看核心算法与基本思想(附全部项目代码链接与代码详细注释)
200 0
|
10月前
|
前端开发
【项目实战典型案例】05.发送问卷流程图例子
【项目实战典型案例】05.发送问卷流程图例子
|
设计模式 架构师 Java
为掌握Java设计模式奠基:两步搞懂UML类图
为掌握Java设计模式奠基:两步搞懂UML类图
为掌握Java设计模式奠基:两步搞懂UML类图
(思维)(必要做题步骤)(皮卡丘与 Codeforces )D - 先来签个到
(思维)(必要做题步骤)(皮卡丘与 Codeforces )D - 先来签个到
75 0
|
Java BI Spring
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂 上
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂 上
399 0
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂   上
|
Java
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂 下
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂 下
93 0
|
存储 Java
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂 中
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂 中
199 0
【JAVA定时器】四种常见定时器的原理和简单实现,有图易懂   中
|
前端开发
#yyds干货盘点# 手动封装callES6
#yyds干货盘点# 手动封装callES6
65 0
#yyds干货盘点# 手动封装callES6