当前位置： 首页 > article >正文

PlantUML——时序图

article 2024/11/19 12:11:18

PlantUML时序图

背景

时序图（Sequence Diagram），又名序列图、循序图，是一种UML交互图，用于描述对象之间发送消息的时间顺序，显示多个对象之间的动态协作。时序图的使用场景非常广泛，几乎各行各业都可以使用。下面，简单介绍如何使用plantUML插件，来绘制时序图。

PlantUML插件下载

首先，打开IDEA，找到setting，然后选择plugins，搜索PlantUML，找到如下插件，点击下载，然后重启idea，即可使用plantUML插件。
在这里插入图片描述
如果使用的是VSCode，选择扩展，然后搜索PlantUML，下载即可使用
在这里插入图片描述

PlantUML绘制时序图

首先创建一个PlantUML 文件，然后选择Sequence模板
在这里插入图片描述
在这里插入图片描述
创建完毕后，会自动生成一个时序图的模板
在这里插入图片描述

时序图绘制基础

下面我们以用户注册为例，绘制一个基础的时序图，并依次讲解每一个元素的具体含义。在注册链路中，首先用户在浏览器上填写注册表单，点击发送按钮，会调用后端的注册服务去创建注册信息，在注册服务中，会调用账号服务创建对应的账号信息，以及绑定一些关联关系，创建成功后，调用登录服务去生成对应的登录token，下发登录态，最后发送相关的注册消息给下游。整体的时序图代码如下所示：

@startuml
'https://plantuml.com/sequence-diagram

autonumber

actor "用户" as User
participant "浏览器" as browser
participant "register-service" as registerService
participant "user-service" as userService
participant "login-service" as loginService
participant "下游" as merchant

User -> browser:填写注册表单，点击注册
browser -> registerService: registerFacade#register
registerService -> userService: accountFacade#createAccount
userService --> registerService

registerService -> loginService: loginService#login
loginService --> registerService: 登录态token

registerService ->> merchant: 发送注册成功消息
registerService --> browser
browser --> User
@enduml

在这里插入图片描述
其中，上述代码相关的元素，表示的含义如下：

元素含义
actor系统角色，可以是人或其他系统，子系统，以一个小人图标表示
participant参与者，一般是调用的服务或组件
->同步消息，消息的发送者将控制传递给消息的接收者
- - >返回消息，表示从过程调用返回
->>异步消息，消息发送者通过消息把信号传递给消息的接收者，然后继续自己的活动，不等待接收者返回消息或控制
生命线

在时序图中，一般我们还会对每一个参与的角色，画上相关的生命线，用于表示对象的调用过程。在plantUML中，我们用activate表示激活生命线，用deactivate表示终止生命线。
我们改造刚才的代码，改造结果如下：

@startuml
'https://plantuml.com/sequence-diagram

autonumber

actor "用户" as User
participant "浏览器" as browser
participant "register-service" as registerService
participant "user-service" as userService
participant "login-service" as loginService
participant "下游" as merchant

activate User
User -> browser:填写注册表单，点击注册
activate browser 

browser -> registerService: registerFacade#register
activate registerService

registerService -> userService: accountFacade#createAccount
activate userService
userService --> registerService
deactivate userService

registerService -> loginService: loginService#login
activate loginService
loginService --> registerService: 登录态token
deactivate loginService

registerService ->> merchant: 发送注册成功消息
registerService --> browser
deactivate registerService

browser --> User
deactivate browser

deactivate User
@enduml

在这里插入图片描述

颜色

在plantUML中，我们可以通过设置消息、文本、生命线的问题，来提升时序图的视觉效果，以更好地区分每个系统以及系统与系统之间地调用关系，突出时序图的重点信息。
对于actor和参与者，我们在定义的时候设置颜色信息，如下代码所示：

actor "用户" as User #orange
participant "浏览器" as browser #6ACCEF
participant "register-service" as registerService #6ACCEF
participant "user-service" as userService #6ACCEF
participant "login-service" as loginService #6ACCEF
participant "下游" as merchant #6ACCEF

对于消息，我们在第一个"-"后面，通过加上[#颜色]这种方式，来设置对应的消息颜色，如下代码所示：

registerService -[#red]>> merchant: 发送注册成功消息

对于文本信息，我们通过在文本前面，加上color:#颜色的方式，设置文本内容颜色，如下代码所示：

registerService -[#red]>> merchant: <color:#red>发送注册成功消息

对于生命线，我们在激活生命线的时候，在后面加上颜色信息，如下代码所示：

activate User #orange
activate browser #6ACCEF

整体改动参考代码如下：

@startuml
'https://plantuml.com/sequence-diagram

autonumber

actor "用户" as User #orange
participant "浏览器" as browser #6ACCEF
participant "register-service" as registerService #6ACCEF
participant "user-service" as userService #6ACCEF
participant "login-service" as loginService #6ACCEF
participant "下游" as merchant #6ACCEF

activate User #orange
User -> browser:填写注册表单，点击注册
activate browser #6ACCEF

browser -> registerService: registerFacade#register
activate registerService  #6ACCEF

registerService -> userService: accountFacade#createAccount
activate userService  #6ACCEF
userService --> registerService
deactivate userService

registerService -> loginService: loginService#login
activate loginService #6ACCEF
loginService --> registerService: 登录态token
deactivate loginService

registerService -[#red]>> merchant: <color:#red>发送注册成功消息
registerService --> browser
deactivate registerService

browser --> User
deactivate browser

deactivate User
@enduml

在这里插入图片描述

条件判断

在时序图中，有时候我们会涉及到一些条件判断内容，对于条件判断，我们可以使用alt-else-end来区分不同条件下的调用信息。以登录为例，在登录的时候，如果账密校验通过后，会判断当前账号的状态，如果状态校验通过，生成相关的登录态token，如果校验不通过，那么生成核身token，用户拿到核身token后，去完成发送验证码和校验验证码等核身操作，核身通过后，才能正常登录，整体流程如下：

@startuml
'https://plantuml.com/sequence-diagram

autonumber

actor "User" as user
participant "login-service" as loginService
participant "account-service" as accountService
participant "token-service" as tokenService

user -> loginService:账密登录
loginService -> accountService:密码校验
accountService --> loginService
loginService -> accountService:状态校验
alt 状态校验通过
    accountService --> loginService
    loginService -> tokenService:生成登录态token
    tokenService --> loginService
else 账号被盗
    accountService --> loginService
    loginService -> tokenService:生成核身token
    tokenService --> loginService
end

loginService --> user
@enduml

在这里插入图片描述
对于不同的条件片段，也可以设置对应的背景颜色，用于区分，如下所示：

@startuml
'https://plantuml.com/sequence-diagram

autonumber

actor "User" as user
participant "login-service" as loginService
participant "account-service" as accountService
participant "token-service" as tokenService

user -> loginService:账密登录
loginService -> accountService:密码校验
accountService --> loginService
loginService -> accountService:状态校验
alt #6ACCEF  状态校验通过
    accountService --> loginService
    loginService -> tokenService:生成登录态token
    tokenService --> loginService
else #orange 账号被盗
    accountService --> loginService
    loginService -> tokenService:生成核身token
    tokenService --> loginService
end

loginService --> user
@enduml

在这里插入图片描述


http://www.kler.cn/a/400071.html

相关文章：

  • [Qt platform plugin问题] Could not load the Qt platform plugin “xcb“
  • 解决Ubuntu18.04及以上版本高分辨率下导致字体过小问题
  • QT仿QQ聊天项目，第三节，实现聊天界面
  • 蓝队基础之网络七层杀伤链
  • 【MySQL】MySQL数据库入门：构建你的数据基石
  • Solana 区块链的技术解析及未来展望 #dapp开发#公链搭建
  • Python实现ARIMA模型
  • 如何使用 Vivado 从源码构建 Infinite-ISP FPGA 项目
  • vue项目PC端和移动端实现在线预览docx、excel、pdf文件
  • 配置Nginx实现用IP测试灰度发,通过不同用户ID测试灰度发布
  • Flutter踩坑：原生安卓页面向Flutter通信
  • android通过广播设置默认启动器
  • 【Pikachu】XML外部实体注入实战
  • Loopy为何成为IP联名新顶流，如何赋能品牌营销新高度？
  • 用Ruby编写一个自动化测试脚本，验证网站登录功能的正确性。
  • TCP/IP协议浅析
  • 前端三大件之CSS
  • opencv调整图片对比度和亮度
  • 大模型（LLMs）推理面
  • 微信小程序点击跳转打电话功能
  • 实操案例|TinyVue树表+动态行合并
  • 【验证码逆向专栏】vaptcha 手势验证码逆向分析
  • StructuredStreamingKafka中的实时ETL案例及常见问题
  • 三维测量与建模笔记 - 点特征提取 - 4.3 Harris特征点
  • React Native 全栈开发实战班 - 网络与数据之数据缓存策略SWR、Query
  • 基于Cnn神经网络虫害预测