用PlantUML和语雀画UML类图

news2024/10/6 6:20:07

概述

首先阐述一下几个简单概念：

  • UML：是统一建模语言（Unified Modeling Language）的缩写，它是一种用于软件工程的标准化建模语言，旨在提供一种通用的方式来可视化软件系统的结构、行为和交互。UML由Grady Booch、Ivar Jacobson和James Rumbaugh三位软件工程专家在1990年代初共同开发，并在1997年被对象管理组织（Object Management Group, OMG）正式采纳。
  • PlantUML：是一个开源工具，它允许我们用文本形式来描绘和创建UML图。在VSCode中可以安装扩展来绘制，而在语雀的MarkDown编辑器中，则可以用“文本绘图”形式直接在文档中创建。
  • UML类图：在面向对象语言或开发中类图是最基础也最有用的一种图，它可以描述类的成员以及多个类之间的关系。

在Godot中，我们使用GDScript进行游戏或类库开发时，也需要涉及面向对象开发和类图等，用于清晰表达自己的思路或详实自己的文档。

因为语雀文档内部创建更方便，所以本文主要介绍在语雀中绘制UML类图的方式。

在语雀中创建PlantUML类图

在语雀文档中，在任意一行行首输入“/wbht”，可以找到“文本绘图”，回车即可插入“文本绘图”的Block。
image.png
默认插入的“文本绘图”块如下：
image.png
点击顶部的“模板”，在下拉列表中选择“类图”：
image.png
会自动填充和渲染一个如下的类图：
image.png
我们便可以在这个基础上进行UML类图的绘制。

PlantUML类图基础语法

起止标记

首先是起止标记，绘图描述的内容必须包裹在一对@startuml和@enduml标记之间。

@startuml

@enduml

申明元素

在@startuml和@enduml标记之间，我们可以使用特定的语法来申明类图的元素。PlantUML本身支持很多种元素申明，详见：类图的语法和功能
但在GDScript中最常用到的便是类和枚举，其他的元素类型并不支持。

@startuml
class a
enum skills
@enduml

其中：

  • 以class为关键字，后面跟类名，可以声明一个类；
  • 以enum为关键字，后面跟枚举名，可以声明一个枚举；

上面代码生成的类图如下：
在这里插入图片描述

添加类或枚举的成员

以类为例，我们可以使用:（注意前后都有一个空格）来为申明的类添加成员，名称不带()的被视为是属性，带()的被视为是方法。

@startuml
class a
a : name
a : sex
a : age
a : say_hello()
@enduml

上面的代码生成的类图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zKGwWHp-1720151404747)(https://i-blog.csdnimg.cn/direct/e94e04d6b32e4fe0ada960213df64dba.png)]

也可以用花括号语法：

@startuml
class a{
    name
    sex
    age
    say_hello()
}
@enduml

这样的写法更接近于真实代码的形式，可以省去重复的类名和:。

申明成员类型

可以为类的成员申明数据类型。

@startuml
class a{
	String name
	bool sex
	int age
	void say_hello()
}
@enduml

可以采用C风格的前置类型声明：
在这里插入图片描述

也可以采用类似GDScript的冒号后置类型申明形式：

@startuml
class a{
	name:String 
	sex:bool
	age:int
	say_hello():void
}
@enduml

在这里插入图片描述

设定成员的可访问性

类图可以更具体的标记属性和方法的可访问性，也就是private、protected、public，如果是C++之类的或许可以用上，但是在GDScript中并不涉及这部分。
下面是具体的修饰符和意义。

字符图标(属性)图标(方法)可访问性
-private 私有
#protected 受保护
~package private 包内可见
+public 公有

下面是一个简单的例子：

@startuml
class a{
	+name:String 
	-sex:bool
	~age:int
	+say_hello():void
}
@enduml

绘制效果如下：

在这里插入图片描述

表示静态变量或方法

Godot3.x就支持静态函数，Godot4.x更是支持了静态变量。
在PlantUML类图中我们可以精确的表示静态函数和静态变量成员，以与非静态成员区分。
方法也很简单就是在静态成员之前添加{static}修饰符。

@startuml
class a{
	+ {static} name:String 
	-sex:bool
	~age:int
	+{static}say_hello():void
}
@enduml

绘制效果如下：
在这里插入图片描述

可以看到静态成员的名称下添加了下划线。

使用分隔线对成员进行自定义分组

可以在成员之间用--、..、==、__进行自定义分割线的绘制

@startuml
class a{
	ame:String 
	--
	sex:bool
	==
	age:int
	..
	say_hello():void
	__
	say_yes():void
}
@enduml

实际效果如下：
在这里插入图片描述

可以看到：

  • --是一条比较粗的横线，__是一条比较细的横线
  • ==是双横线
  • ..是虚线

你也可以在分割线基础上进行分组的命名。

@startuml
class a{
	ame:String 
	-- 性别  --
	sex:bool
	== 年龄 ==
	age:int
	.. 方法 ..
	say_hello():void
	__ 还是方法 __
	say_yes():void
}
@enduml

绘制效果如下：
在这里插入图片描述

这样我们可以将成员进行分组，让类的结构更清晰易懂。

多个类之间的关系表示

关系类型符号绘图
泛化关系<|–
组合关系*–
聚合关系o–
  • --代表实线，可以用..替代表示虚线。
  • <|、*和o分别代表箭头的类型

类与类之间的关系可以查阅相关的视频或文档，这里不做赘述，这里只举例说明继承关系的表示。

@startuml
Car <|-- Bus
@enduml

这里我们直接省略class关键字，申明了Car和Bus两个类，并且使用<|--连接它们。
生成的类图如下：
在这里插入图片描述

它的含义就是，Car作为父类，Bus作为子类，Bus继承自Car。

  • 新手注意：继承关系的箭头是由子类指向父类。

我们可以继续这个例子，添加Car的其他子类型：

@startuml
Car <|-- Bus
Car <|-- motorcycle
Car <|-- bicycle
@enduml

生成类图如下：
在这里插入图片描述

在箭头连线上添加文本

可以在整个箭头连线关系的最后，在:后面添加文本信息，用于显示在连线上。

@startuml
Car <|-- Bus:继承自
Car <|-- motorcycle:继承自
Car <|-- bicycle:继承自
@enduml

生成类图如下：
在这里插入图片描述

表示类之间的数量关系

也可以用双引号，在连线的起始端和末尾端添加文本，用于表示类似ER（实体关系图）中的“一对一”、“一对多”、“多对多”等关系。
在继承关系中可能使用这种描述不太恰当，可以在“组合”或“聚合”等关系中使用。
下面的代码表示，一个汽车有4个轮子组成：

@startuml
汽车 "1" *-- "4" 轮子:组成
@enduml

生成类图如下：
在这里插入图片描述

控制类绘制的位置

在连线之间可以使用up、down、left和right关键字来手动控制类的绘制位置。
以之前的Car派生的例子为例：

@startuml
Car <|-- Bus:继承自
Car <|-- motorcycle:继承自
Car <|-- bicycle:继承自
@enduml

默认绘制为：
在这里插入图片描述

通过在表示实线的--之间，指定上下左右方位的关键字：

@startuml
Car <|-left- Bus:继承自
Car <|-up- motorcycle:继承自
Car <|-right- bicycle:继承自
@enduml

就可以将类图渲染为如下形式：
在这里插入图片描述

绘制备注

note关键字用于绘制备注。
可以使用note 位置 of 元素的形式，为类、枚举或者其他类图元素设定备注。

@startuml
Car <|-left- Bus:继承自
Car <|-up- motorcycle:继承自
Car <|-right- bicycle:继承自

note bottom of Car:车，基类
note bottom of Bus:公共汽车
note bottom of bicycle:自行车
note left of motorcycle:摩托车
@enduml

绘制效果如下：
在这里插入图片描述

还有一种写法，可以省略of 元素，但是需要紧跟在class申明之后，或者指定两个类的关系之后。

@startuml
class Car
note bottom:车，基类

Car <|-left- Bus:继承自
note bottom:公共汽车

Car <|-up- motorcycle:继承自
note left:摩托车

Car <|-right- bicycle:继承自
note bottom:自行车
@enduml

绘制效果如下：
在这里插入图片描述

可以看到效果基本上无异。
还可以用note "备注内容" as 变量形式将备注申明为一个类似单独元素的东西。
再使用--或..进行连接：

@startuml
class Car
note "车，基类" as N1
Car -- N1
@enduml

效果如下：
在这里插入图片描述

另外，在备注中，可以使用\n进行多行文本的换行控制。

为类图添加标题

使用title关键字可以为类图添加标题。

@startuml
title 车类的继承关系类图
Car <|-left- Bus:继承自
Car <|-up- motorcycle:继承自
Car <|-right- bicycle:继承自

note bottom of Car:车，基类
note bottom of Bus:公共汽车
note bottom of bicycle:自行车
note left of motorcycle:摩托车
@enduml

绘制效果如下：
在这里插入图片描述

为类图添加页脚

如果你不喜欢顶部的标题，可以使用footer关键字指定一个底部的页脚。

@startuml

Car <|-left- Bus:继承自
Car <|-up- motorcycle:继承自
Car <|-right- bicycle:继承自

note bottom of Car:车，基类
note bottom of Bus:公共汽车
note bottom of bicycle:自行车
note left of motorcycle:摩托车
footer 车类的继承关系类图
@enduml

绘制效果如下：
在这里插入图片描述

Godot中的一些类图实例

上面我们已经学习了如何用PlantUML进行类图的绘制。下面就举一些Godot中的例子。

子类与父类（继承关系）

@startuml

Control <|-- Button
note bottom:泛化关系（继承关系）\n子类指向父类，\n实线空心三角箭头

@enduml

绘图效果：
在这里插入图片描述

成员引用（一般关联关系）

@startuml

class class01{
	attr:class02
}

class01 --> class02
note bottom:单向关联关系\n引用者指向被引用者

class class03{
	attr:class04
}

class class04{
	attr:class03
}

class03 -- class04
note bottom:双向关联关系\n箭头消失

class class05{
	sub_itm:class05
}

class05 --> class05
note bottom:自关联关系\n自己的成员变量引用自己

@enduml

绘制效果：
在这里插入图片描述

部分与整体（聚合与组合）

@startuml

class Player {
}
note left:玩家
Player -up-|> CharacterBody2D
Player o-- CollisionShape2D
note bottom:碰撞形状
Player o-- Sprite
note bottom:玩家长相
@enduml

绘制效果：
在这里插入图片描述

更复杂的可以有：

@startuml
title Godot中2D角色的节点组成结构（2）
class Player {
}
note left:玩家
Player -up-|> CharacterBody2D
Player o-- CollisionShape2D
note bottom:碰撞形状
Shape2D <-down- CollisionShape2D
Player o-- HitBox
note bottom:攻击判定区域
HitBox -up-|> Area2D
CollisionShape2D2 -down-o HitBox
Shape2D <-down- CollisionShape2D2

Player o-- Sprite
note bottom:玩家长相
@enduml

在这里插入图片描述

组合关系

@startuml
title Godot中的组合关系
class Tree {
}

Tree *-- TreeItem
note right:组合关系，\n父类由子类组成，\n父类消失，子类失去意义，\n子类消失，父类无法构成。

@enduml

在这里插入图片描述

依赖关系

@startuml
title Godot中类的依赖关系
class ShapePoints {
+static rect():PackedVector2Array
}

class myCanvas{
+ draw_rect():void
}


ShapePoints <.. myCanvas
note right: 依赖关系：\n一个类用**局部变量**、\n**方法参数**或者\n**对静态方法的调用**\n来访问另一个类

@enduml

在这里插入图片描述

总结

本文带领Godot使用者，学习和使用基础的PlantUML类图绘制技巧。
希望对Godoter们编写和设计自己的类以及类库有所帮助，你也可以用来绘制和讲解设计模式等。
本文不详之处，可以查阅其他大佬的文章或翻找PlantUML官方文档。
若有错误之处，还请指正。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1905029.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一.7.(2)基本运算电路，包括比例运算电路、加减运算电路、积分运算电路、微分电路等常见电路的分析、计算及应用；(未完待续)

一.7.(2)基本运算电路，包括比例运算电路、加减运算电路、积分运算电路、微分电路等常见电路的分析、计算及应用；(未完待续)

what id the 虚短虚断虚地? 虚短&#xff1a;运放的正相输入端和反相输入端貌似连在一起了&#xff0c;所以两端的电压相等&#xff0c;即UU- 虚断&#xff1a;输入端输入阻抗无穷大 虚地&#xff1a;运放正相输入端接地&#xff0c;导致U&#xff1d;U-&#xff1d;0。 虚…
阅读更多...
远心镜头简介

远心镜头简介

一、远心镜头 大家都有这种印象&#xff0c;一个物体在人眼看来&#xff0c;会有近大远小的现象。这是因为物体近的时候&#xff0c;在视网膜上投影大&#xff0c;小的时候&#xff0c;投影小。镜头也是一样&#xff0c;因为近大远小的原因&#xff0c;会产生误差。特别是在做尺…
阅读更多...
通信协议_Modbus协议简介

通信协议_Modbus协议简介

概念介绍 Modbus协议&#xff1a;一种串行通信协议&#xff0c;是Modicon公司&#xff08;现在的施耐德电气Schneider Electric&#xff09;于1979年为使用可编程逻辑控制器&#xff08;PLC&#xff09;通信而发表。Modbus已经成为工业领域通信协议的业界标准&#xff08;De f…
阅读更多...
Java里的Arrary详解

Java里的Arrary详解

DK 中提供了一个专门用于操作数组的工具类&#xff0c;即Arrays 类&#xff0c;位于java.util 包中。该类提供了一些列方法来操作数组&#xff0c;如排序、复制、比较、填充等&#xff0c;用户直接调用这些方法即可不需要自己编码实现&#xff0c;降低了开发难度。 java.util.…
阅读更多...
DC-DC充放电原理

DC-DC充放电原理

文章目录 前言1. 电子器件1.1 电容1.2 电感 2. 升压电路3. 降压电路4. 电压均衡电路4.1 被动均衡4.2 主动均衡 5. 我的疑问5.1 对于升压电路&#xff0c;怎么设计升压到多少V后&#xff0c;停止升压&#xff1f;5.2 什么是等效电阻&#xff1f;5.3 快充是如何实现的&#xff1f…
阅读更多...
探索InitializingBean：Spring框架中的隐藏宝藏

探索InitializingBean：Spring框架中的隐藏宝藏

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索MYSQL索引数据结构之旅✨ &#x1f44b; Spring框架的浩瀚海洋中&#x…
阅读更多...
ISP和IAP原理解释

ISP和IAP原理解释

ISP和IAP ISP ISP的全称是&#xff1a;In System Programming&#xff0c;即在系统编程&#xff0c;该操作是通过MCU厂商出厂BootLoader来实现&#xff0c;通过ISP可以对主flash区域进行擦除、编程操作&#xff0c;还可以修改芯片的选项字节等。例如&#xff0c;GD32F30x用户…
阅读更多...
Failed to get D-Bus connection: Operation not permitted

Failed to get D-Bus connection: Operation not permitted

最近使用wsl安装了centOS7镜像&#xff0c;在系统中安装了docker服务&#xff0c;但是在执行systemctl start docker的时候遇到了&#xff1a;Failed to get D-Bus connection: Operation not permitted问题&#xff0c;查阅了很多资料都没有效果&#xff0c;最终找到了一种解决…
阅读更多...
RabbitMQ（集群相关部署）

RabbitMQ（集群相关部署）

RabbitMQ 集群部署 环境准备&#xff1a;阿里云centos8 服务器&#xff0c;3台服务器&#xff0c;分别进行安装&#xff1b; 下载Erlang Erlang和RabbitMQ版本对照&#xff1a;https://www.rabbitmq.com/which-erlang.html 创建yum库配置文件 vim /etc/yum.repos.d/rabbi…
阅读更多...
【web前端HTML+CSS+JS】--- CSS学习笔记02

【web前端HTML+CSS+JS】--- CSS学习笔记02

一、CSS&#xff08;层叠样式表&#xff09;介绍 1.优势 2.定义解释 如果有多个选择器共同作用的话&#xff0c;只有优先级最高那层样式决定最终的效果 二、无语义化标签 div和span&#xff1a;只起到描述的作用&#xff0c;不带任何样式 三、标签选择器 1.标签/元素选择器…
阅读更多...
分布式技术栈、微服务架构 区分

分布式技术栈、微服务架构 区分

1.分布式技术栈 这些技术栈都是为了更好的开发分布式架构的项目。 &#xff08;大营销平台的系统框架如下图&#xff0c;扩展的分布式技术栈&#xff09; &#xff08;1&#xff09;Dubbo——分布式技术栈 DubboNacos注册中心是应用可以分布式部署&#xff0c;并且提供RPC接…
阅读更多...
mmfewshot 框架概述、环境搭建与测试（一）

mmfewshot 框架概述、环境搭建与测试（一）

一、mmfewshot 框架概述 少样本学习的基本流程&#xff1a; 我们将为所有小样本学习任务引入一个简单的基线&#xff0c;以进一步说明小样本学习的工作原理。最明显的流程是微调。它通常包括两个步骤&#xff1a;在大规模数据集上训练模型&#xff0c;然后在小样本数据上进行微…
阅读更多...
游戏AI的创造思路-技术基础-遗传算法

游戏AI的创造思路-技术基础-遗传算法

遗传算法&#xff0c;选对了遗传算子&#xff0c;那就是优秀的继承者&#xff0c;选错了&#xff0c;那就是传说在祸害遗千年~~~~~ 目录 1. 定义 2. 发展历史 3. 遗传算法的基本原理和流程 3.1. 基本原理 3.1.1.基本原理 3.1.2. 算法流程 3.1.3. 关键要素 3.2. 函数和方…
阅读更多...
栈和队列---循环队列

栈和队列---循环队列

1.循环队列的出现 &#xff08;1&#xff09;上面的这个就是一个普通的数据的入队和出队的过程我们正常情况下去实现这个入队和出队的过程&#xff0c;就是这个数据从这个队尾进入&#xff0c;从队头离开&#xff0c;但是这个加入的时候肯定是没有其他的问题的&#xff0c;直接…
阅读更多...
Java多线程不会？一文解决——

Java多线程不会？一文解决——

方法一 新建类如MyThread继承Thread类重写run()方法再通过new MyThread类来新建线程通过start方法启动新线程 案例&#xff1a; class MyThread extends Thread {public MyThread(String name) {super(name);}Overridepublic void run() {for(int i0;i<10;i){System.out.…
阅读更多...
java项目总结8

java项目总结8

1.方法引用 1.方法引用概述 注意注意&#xff1a; 1.引用出必须是函数式接口 2.被引用的方法必须已经存在 3.被引用方法的型参和返回值需要跟抽象方法保持一致 4.被引方法的功能要满足当前需求 Arrays.sort(arr,Main::subtraction); Main是该类的名称&#xff0c;&#xff1a…
阅读更多...
代码随想录算法训练营第二十七天 |56. 合并区间 738.单调递增的数字 968.监控二叉树 （可跳过）

代码随想录算法训练营第二十七天 |56. 合并区间 738.单调递增的数字 968.监控二叉树 （可跳过）

56. 合并区间 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;in…
阅读更多...
linux固定主机ip

linux固定主机ip

1.查看虚拟网络配置 NAT设置&#xff1a; 2.修改网卡配置文件 [rootlocalhost ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" BOOTPROTO"static" DEFROUTE"yes"…
阅读更多...
PD虚拟机不能复制Mac的文件怎么回事 PD虚拟机不能复制Mac的文件怎么办 Parallels Desktop怎么用

PD虚拟机不能复制Mac的文件怎么回事 PD虚拟机不能复制Mac的文件怎么办 Parallels Desktop怎么用

PD虚拟机不仅能提供跨系统协作的服务&#xff0c;还能进行虚拟机系统与原生系统间的文件共享、文本复制、文件复制等操作&#xff0c;让系统间的资源可以科学利用。但在实际操作过程中&#xff0c;PD虚拟机不能复制Mac的文件怎么回事&#xff1f;PD虚拟机不能复制Mac的文件怎么…
阅读更多...
PDM系统中物料分类与编码规则生成方案

PDM系统中物料分类与编码规则生成方案

在企业管理软件中&#xff0c;PDM系统是企业管理的前端软件&#xff0c;用于管理研发图纸、BOM等数据&#xff0c;然后生成相关物料表或BOM&#xff0c;递交给后端ERP系统进行生产管理。在PDM系统中&#xff0c;有两种方式可以生成物料编码。 1第一种是用户可以通过软件接口将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023