用代码画时序图!YYDS

简介: 最近通过代码来看看这个图,给大家看图、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画图的相关知识,有兴趣的小伙伴,可以自己动手试一试。

相关文章
|
测试技术 程序员 数据库
软件开发文档介绍
软件开发文档是软件开发使用和维护过程中的必备资料。它能提高软件开发的效率,保证软件的质量,而且在软件的使用过程中有指导、帮助、解惑的作用,尤其在维护工作中,文档是不可或缺的资料。 软件开发文档可以分为开发文档和产品文档两大类。
5855 0
|
机器学习/深度学习 TensorFlow API
基于CNN的图像识别(Tensorflow)
基于CNN的图像识别(Tensorflow)
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
165019 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
|
9月前
|
设计模式 Java uml
课时107:时序图
课时107介绍了时序图的描述与设计。时序图用于展示代码执行流程,如Java程序中接口IMessage、类MessageImpl及Factory的调用顺序。通过Power Designer创建UML Sequence Diagram,定义类操作结构并绘制消息传递路径,清晰呈现工厂模式下对象实例化和方法调用的过程。时序图帮助理解程序逻辑,适用于项目开发中的流程分析与文档记录。
353 1
|
10月前
|
机器学习/深度学习 数据可视化 算法
Python与机器学习:使用Scikit-learn进行数据建模
本文介绍如何使用Python和Scikit-learn进行机器学习数据建模。首先,通过鸢尾花数据集演示数据准备、可视化和预处理步骤。接着,构建并评估K近邻(KNN)模型,展示超参数调优方法。最后,比较KNN、随机森林和支持向量机(SVM)等模型的性能,帮助读者掌握基础的机器学习建模技巧,并展望未来结合深度学习框架的发展方向。
Python与机器学习:使用Scikit-learn进行数据建模
|
数据可视化 IDE Java
PlanUML和Mermaid哪个好?
PlanUML和Mermaid哪个好?
3410 0
单机elasticsearch设置远程访问
我这里是在虚拟机安装的es,虚拟机系统用的是优麒麟20.04
简单易操作 VsCoe离线安装插件【步骤+图片+插件】
这篇文章介绍了在Visual Studio Code (VSCode) 中进行离线安装插件的详细步骤,包括如何下载插件、以SVN插件为例的离线安装过程、通过命令行安装以及一个更加简单的离线安装方式,还提供了操作界面的截图帮助理解。
简单易操作 VsCoe离线安装插件【步骤+图片+插件】
|
存储 安全 Java
Python File处理详解!
本文详细介绍了Python文件处理的方法及其优缺点。通过`open()`、`read()`、`write()`和`append()`等函数,Python能够轻松实现文件的创建、读取、写入及追加等操作。文章还展示了如何使用`tell()`获取文件指针位置,并提供了涵盖文件创建、读取、追加、重命名及删除的完整示例。Python文件处理不仅功能强大且跨平台兼容,但也存在易错性、安全风险及处理大文件时的性能问题。适合数据存储、配置管理和数据分析等多种应用场景。
312 4
idea启动java服务报错OutOfMemoryError: GC overhead limit exceeded解决方法
idea启动java服务报错OutOfMemoryError: GC overhead limit exceeded解决方法
5138 2