PlantUML绘制UML图教程_plantuml画流程图(1),大厂HarmonyOS鸿蒙高级面试题汇总解答问题

88 阅读4分钟

一、PlantUML基本语法

PlantUML是一种使用文本描述生成UML图的工具,其语法简洁而直观。以下是对你提供的代码的PlantUML语法总结:

1、定义类

使用 !define RECTANGLE class 定义一个类。类的名称放在花括号内,类的成员通过 + 符号表示。

!define RECTANGLE class RECTANGLE "类名" { +成员1() +成员2() }

2、绘制类之间的关系

使用箭头表示不同类之间的关系。例如,A -> B: 消息表示A类向B类发送消息。

A -> B: 消息

3、绘制类之间的关联关系

使用->箭头表示关联关系,如A -> B表示A关联到B。

A -> B

4、创建实例:

使用类定义语法,如RECTANGLE "实例名" {},定义一个类的实例。

RECTANGLE "实例名" { }

5、绘制时序

使用->箭头表示时序,如 A -> B: 操作表示A执行操作后,将消息传递给B。

A -> B: 操作

6、注释

使用'符号表示单行注释。

' 这是注释

7、隐藏脚注

使用hide footbox命令隐藏脚注。

hide footbox

8、定义集合

使用collections命令定义集合,如collections Harmony设备 as B #lightblue。

collections Harmony设备 as B #lightblue

9、定义队列

使用queue命令定义队列,如queue 云服务器 as C #orange。

queue 云服务器 as C #orange

10、定义数据库

使用database命令定义数据库,如database 云数据库 as D #blue。

database 云数据库 as D #blue

11、定义实体

使用entity命令定义实体,如entity 开发板 as F #lightgreen。

entity 开发板 as F #lightgreen

12、添加注释

使用note over命令添加注释,如note over F : 环境更新事件。

note over F : 环境更新事件

13、激活组件

使用activate命令激活组件的执行状态,如activate F #lightgreen。

activate F #lightgreen

14、绘制同步关系

使用-[#color]>箭头表示同步关系,如F-[#lightgreen]>G : 请求更新表示开发板向数据库发起请求更新。

F-[#lightgreen]>G : 请求更新

15、停用组件

使用deactivate命令停用组件,如deactivate G。 

F-[#lightgreen]>C : 请求同步云端

通过这些基本的语法元素,开发者可以利用PlantUML轻松描述和绘制各种UML图,从而更好地可视化和理解系统的结构和交互关系。


二、实例演示

1、安装VSCode

首先,确保你已经安装了Visual Studio Code。


2、安装PlantUML插件

然后,按照以下步骤安装PlantUML插件:

  1. 打开VSCode,进入Extensions(Extensions图标或通过快捷键Ctrl+Shift+X)。
  2. 搜索"PlantUML"并安装"PlantUML"插件。


3、编写PlantUML代码

使用PlantUML的语法,我们可以描述系统架构并绘制图表。

① 绘制流程图

以下是我绘制的一个流程图的PlantUML代码:

@startuml

!define RECTANGLE class

RECTANGLE "EVB RK3568\n开发板" { }

RECTANGLE "Node.js和\nNode-RED" { +getData() +processData() }

RECTANGLE "SQLite\n数据库模块" { +storeData() }

RECTANGLE "Opcua\n数据获取" { +fetchData() }

RECTANGLE "MQTT" { +publishData() }

RECTANGLE "Windows10+DevEco Studio\n用户界面" { +displayData() +setThreshold() }

RECTANGLE "服务器" { +receiveData() +triggerAlarm() }

"EVB RK3568\n开发板" -> "Node.js和\nNode-RED": 传感器数据 "Node.js和\nNode-RED" -> "SQLite\n数据库模块": storeData() "Node.js和\nNode-RED" -> "Opcua\n数据获取": fetchData() "Node.js和\nNode-RED" -> "MQTT": publishData() "MQTT" -> "服务器": receiveData()

"服务器" -> "Windows10+DevEco Studio\n用户界面": displayData() "Windows10+DevEco Studio\n用户界面" -> "服务器": setThreshold()

@enduml

代码编写完成后,点击 Alt + D,可以绘制成图。

绘制出的成图如下: 


 ② 绘制时序图1

以下是我绘制的一个时序图的PlantUML代码:

@startuml hide footbox collections Harmony设备 as B #lightblue queue 云服务器 as C #orange database 云数据库 as D #blue queue 嵌入式上层应用 as E #skyblue entity 开发板 as F #lightgreen database SQLite as G #green

note over F : 环境更新事件 activate F #lightgreen F-[#lightgreen]>G : 请求更新 activate G #green

深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

img img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化的资料的朋友,可以戳这里获取