用代码画时序图！简直太爽了

2022 年 7 月 19 日
本文字数：3348 字
阅读完需：约 11 分钟

前言最近通过代码来画时序图，UML 用例图，感觉很不错，所以给大家分享一下。

日常开发，一般在设计阶段，我们都需要画时序图、用例图等等。大家平时画图的时候，是用 draw.io 还是 processOn 呢？用它们画出的图，其实都挺好看的。但是呢，今天田螺哥介绍一个款开源的，画图神器！用代码就能画图，配合 IDE 使用，画图高效简单，信手拈来,还挺美观的。这个神奇就是 PlantUML。

用代码画时序图！简直太爽了 github 地址，给个 star，感谢感谢公众号：捡田螺的小男孩

PlantUML 简介 PlantUML 是一个开源项目，可以快速编写 UML 图的工具。它可以支持编码的方式来生成图形。可以用来画时序图、UML 用例图、类图、思维导图、ER 图等等。

PlantUML 画出来的图，简洁美观，先给大家看看,一个用 PlantUML 画出来的登录时序图,以及对应画图的代码,如下：

/**

关注公众号：键捡田螺的小男孩*/@startumltitle Sequence Diagram of User loginactor User as user

participant "gateway" as gatewayparticipant "user-core" as userCoredatabase "MySQL" as mysqldatabase "Redis" as redis

autonumberuser-> gateway:login request，param：username，passwordactivate gatewaygateway-> userCore:forward the login requestactivate userCoreuserCore-> userCore :check the login paramuserCore-> mysql:query user info from mysql by usernameactivate mysqlmysql-> userCore:response with username and passworddeactivate mysqluserCore->userCore:compare the requested password with the DB's passworduserCore-> userCore: generate an unique tokenuserCore--> redis: save the token to redisuserCore-> gateway: response with the tokendeactivate userCoregateway-> user: login success with the tokendeactivate gateway@enduml 复制代码登录用例时序图如下:

用代码画时序图！简直太爽了 2. PlantUML 的安装使用 PlantUML 的安装很方便的.有个插件,名字是:PlantUML Integration,大家可以去 IDE 的插件市场,搜索安装即可,如下:

用代码画时序图！简直太爽了安装成功后,想快速体验一般的话.可以新建一个项目,然后新建一个 plantUML File 文件,然后把我上个小节,登录时序图那个代码复制进去,就可以看到登录时序图啦.

用代码画时序图！简直太爽了 3.如何用 PlantUML 画时序图什么是时序图?

时序图（Sequence Diagram），又名序列图、循序图，是一种 UML 交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。

如何用 PlantUML 画时序图呢?

你可以先新建一个 PlantUML 文件

用代码画时序图！简直太爽了然后选择 Sequence,并定义一个文件名称

用代码画时序图！简直太爽了就会有默认的时序图生成啦.

用代码画时序图！简直太爽了我们照着登录时序图的代码,来大概说下每个关键词的意思吧.

/**

关注公众号：键捡田螺的小男孩*/@startumltitle Sequence Diagram of User loginactor User as user

participant "gateway" as gatewayparticipant "user-core" as userCoredatabase "MySQL" as mysqldatabase "Redis" as redis

title:表示该 UML 用例图的标题 actor:表示人形的参与者 as: 使用 as 关键字命名参与者。你可以把它理解成定义变量一样,as 后面跟着的就是变量,声明后,我们后面就可以使用这个变量啦 participant:表示普通的参与者,它跟 actor 的主要区别是:形状不一样 database:表示参与者形状是数据库.显示的顺序是怎么定义的:声明的参与者顺序将是（默认的）显示顺序。autonumber:可以给参与者添加顺序->:表示绘制两个参与者之间的信息,如果你希望是虚线,可以使用-->.activate 和 deactivate:表示参与者的生命线当然,PlantUML 功能挺丰富的,它还可以组合消息,虽然在我的登录时序图还没体现出来. 它提供了 alt/else、opt、loop 来组合消息.如下:

@startumlAlice -> Bob: 认证请求

alt 登录成功

Bob -> Alice: 认证接受

复制代码

else 某种失败情况

Bob -> Alice: 认证失败group 我自己的标签Alice -> Log : 开始记录攻击日志    loop 1000次        Alice -> Bob: DNS 攻击    endAlice -> Log : 结束记录攻击日志end

复制代码

else 另一种失败

Bob -> Alice: 请重复

end@enduml 复制代码对应的时序图如下:

用代码画时序图！简直太爽了 4. 如何用 PlantUML 画 UML 用例图什么是用例图?

用例图（英语：use case diagram）是用户与系统交互的最简表示形式，展现了用户和与他相关的用例之间的关系。通过用例图，人们可以获知系统不同种类的用户和用例。用例图也经常和其他图表配合使用。

如何用 PlantUML 画 UML 用例图呢?

你可以先新建一个 PlantUML 文件,然后选择 user case,并定义个文件名

用代码画时序图！简直太爽了就会有默认的 UNML 用例图生成啦

用代码画时序图！简直太爽了我挑官网一个用例图 demo 来介绍吧,代码如下:

@startumlleft to right directionactor Guest as gpackage Professional {actor Chef as cactor "Food Critic" as fc}package Restaurant {usecase "Eat Food" as UC1usecase "Pay for Food" as UC2usecase "Drink" as UC3usecase "Review" as UC4}fc --> UC4g --> UC1g --> UC2g --> 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 画思维导图什么是思维导图?

英文是 The Mind Map，又名心智导图，是表达发散性思维的有效图形思维工具，它简单却又很有效同时又很高效，是一种实用性的思维工具。

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

@startmindmap

公众号：捡田螺的小男孩，干货面试题** 计算机网络面试题*** TCP/IP 十五连问*** 两万字计算机面试题汇总** MySQL 面试题** Redis 面试题** 大厂面试真题*** 虾皮十五连问*** 五年 Oppo 后端面试真题*** 腾讯云十五连问 @endmindmap 复制代码 plantUML 画思维导图,还是挺简单的,大家可以看下效果

用代码画时序图！简直太爽了 6. 如何用 planUML 画活动流程图什么是活动图?

动态图（activity diagram，活动图）是阐明了业务用例实现的工作流程。

我画了一个简单版的登录活动流程图:

@startumltitle 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;stopendifelse(Y):response with error userinfo;stopendifelse(Y):response with error param;stopendifstop@enduml 复制代码生成的流程图如下:

用代码画时序图！简直太爽了活动图关键解释如下：

start 表示活动图流程的开始 stop 表示活动图流程的结束:user request login;:表示活动流程节点为 user request login,需要加:和;的哈 if+then+endif 表示一个完整的条件判断最后本文介绍了 plantUML 画图,有兴趣的小伙伴也可以加入一起学习！

好了，今日分享就到此结束啦！

原文链接：https://juejin.cn/post/7121325592368119838

发布于: 刚刚阅读数: 3