使用vscode中plantUML插件快速绘制时序图

前言

本文主要适用于,想在vscode中使用PlantUML插件快速绘制时序图的小伙伴。
主要涵盖以下三个方面,并以实操项目作为结尾:

  1. 环境配置
  2. 时序图基本概念
  3. plantUML 绘制时序图的基本语法

一、环境配置

可参考链接:https://blog.csdn.net/xdh19910113/article/details/118242852

1. 安装java

下载地址:https://www.oracle.com/java/technologies/javase-downloads.html
校验安装成功与否:java -version

2. 安装 GraphViz

下载地址:https://plantuml.com/zh/
校验安装成功与否:dot -version

3. 安装vscode及其插件PlantUML

下载地址:https://code.visualstudio.com/Download
安装成功vscode并打开后,在vscode左侧扩展中搜索安装PlantUML

二、时序图基本概念

可参考链接:https://blog.csdn.net/shulianghan/article/details/17927131

1. 对象

**对象符号:**使用矩形将对象名称包含起来, 并且对象名称下有下划线;

对象创建时机 : 对象可以在交互开始的时候创建, 也可以在交互过程中进行创建;
处于顶部 : 如果对象的位置在时序图顶部, 说明在交互开始的时候对象就已经存在了;
不在顶部 : 如果对象的位置不在顶部, 那么对象在交互过程中创建的;

2. 生命线

生命线 : 生命线是一条垂直的虚线, 这条虚线表示对象的存在, 在时序图中, 每个对象的底部都有生命线;

生命线作用 : 生命线是一个时间线, 从时序图顶部一直到底部都存在, 其长度取决于交互的时间;

对象的生命线 : 对象与生命线结合在一起就是对象的生命线, 这个概念包含对象图标 以及 对象下面的生命线图标;

3. 激活

激活(Activation) : 代表时序图中对象执行一项操作的时期, 激活期可以理解为语义中 {} 中的内容, 表示该对象被占用以完成某个任务;

去激活(Deactivation) : 指对象处于空闲状态, 在等待消息激活这个对象;

激活的表示 : 当对象处于激活时期, 生命线可以拓宽为矩形, 这个矩形条成为激活条;

激活去激活的时机 :
激活 : 对象激活是在激活条的顶部激活;
去激活 : 激活条的底部去激活, 通常发生在一个消息离开对象生命线;

三、plantUML语法

可参考链接:https://plantuml.com/zh/sequence-diagram

1. 对象

使用关键字participant 来声明参与者

@startuml
participant User
@enduml

在这里插入图片描述

2. 激活

生命线激活: activate
生命线去激活: deactivate

@startuml
participant User

User -> A: DoWork
activate A

A -> B: << createRequest >>
activate B

B -> C: DoWork
activate C
C --> B: WorkDone
destroy C

B --> A: RequestCreated
deactivate B

A -> User: Done
deactivate A
@enduml

使用vscode中plantUML插件快速绘制时序图_第1张图片

3. 备注

添加备注: 使用note left 或note right,如果有多行备注需求,配合使用note end

@startuml
Alice->Bob : hello
note left: this is a first note

Bob->Alice : ok
note right: this is another note

Bob->Bob : I am thinking
note left
a note
can also be defined
on several lines
end note
@enduml

使用vscode中plantUML插件快速绘制时序图_第2张图片

对齐备注: 使用 \

@startuml
note over Alice : Alice的初始状态
/ note over Bob : Bob的初始状态
Bob -> Alice : hello
@enduml

使用vscode中plantUML插件快速绘制时序图_第3张图片

成品

创建demo.wsd文件,内容如下,鼠标右击预览图标(或Alt+D)即可

@startuml
skinparam backgroundColor lightblue
activate SERVER

group 读取版本号
APP -> BLE : 读取MCU版本号
activate APP
activate BLE
activate MCU
BLE -> MCU : MIBLE_MCU_GET_VERSION
MCU -> BLE : replay version
BLE -> APP : 上报版本号
deactivate MCU
deactivate APP
deactivate BLE
end

group 查询断点信息
APP -> BLE : 查询断点
activate APP
activate BLE
activate MCU
BLE -> MCU : MIBLE_MCU_READ_DFUINFO
MCU -> BLE : replay [index+crc32+recvbytes]
BLE -> APP : 上报断点
deactivate MCU
deactivate APP
deactivate BLE
end

group 固件传输
SERVER -> APP : fragment size
activate APP
loop 下载
APP -> BLE : 更新进度条
loop 服务器分包传输(2K/包)
activate BLE
activate MCU
BLE -> MCU : MIBLE_MCU_WRITE_FIRMWARE
activate BLE
activate MCU
loop 前后锁串口分包传输(1k/包)
BLE -> MCU : MIBLE_MCU_TRANSFER 
activate BLE
activate MCU
MCU -> BLE : replay
deactivate MCU
deactivate BLE
end loop
MCU -> BLE : replay
deactivate MCU
deactivate BLE
end loop
BLE -> APP : 刷新进度条
end loop
deactivate MCU
deactivate APP
deactivate BLE
end

group 固件验签
APP -> BLE : 发起验签
activate APP
activate BLE
activate MCU
BLE -> MCU : MIBLE_MCU_VERIFY_FIRMWARE
MCU -> BLE : replay
APP -> BLE : 上报验签结果
deactivate MCU
deactivate APP
deactivate BLE
end

group 触发固件升级
APP -> BLE : 触发升级
activate APP
activate BLE
activate MCU
BLE -> MCU : MIBLE_MCU_UPGRADE_FIRMWARE
MCU -> BLE : replay
APP -> BLE : 上报升级结果
deactivate MCU
deactivate APP
deactivate BLE
end
@enduml

使用vscode中plantUML插件快速绘制时序图_第4张图片

你可能感兴趣的:(vscode,物联网)