用PlantUML和语雀画UML类图

概述

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

  • 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{namesexagesay_hello()
}
@enduml

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

申明成员类型

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

@startuml
class a{String namebool sexint agevoid say_hello()
}
@enduml

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

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

@startuml
class a{name:String sex:boolage:intsay_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关键字,申明了CarBus两个类,并且使用<|--连接它们。
生成的类图如下:
在这里插入图片描述

它的含义就是,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

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

控制类绘制的位置

在连线之间可以使用updownleftright关键字来手动控制类的绘制位置。
以之前的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关键字指定一个底部的页脚。

@startumlCar <|-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中的例子。

子类与父类(继承关系)

@startumlControl <|-- Button
note bottom:泛化关系(继承关系)\n子类指向父类,\n实线空心三角箭头@enduml

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

成员引用(一般关联关系)

@startumlclass 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

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

部分与整体(聚合与组合)

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

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

更复杂的可以有:

@startuml
title Godot中2D角色的节点组成结构(2class 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- CollisionShape2D2Player 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.mzph.cn/bicheng/42500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyrender 离线渲染包安装教程

pyrender 离线渲染包安装教程 安装 安装 官方安装教程:https://pyrender.readthedocs.io/en/latest/install/index.html#installmesa 首先 pip install pyrenderclang6.0安装 下载地址:https://releases.llvm.org/download.html#6.0.0 注意下好是叫&#xff1a;clangllvm-6…

通信协议_C#实现自定义ModbusRTU主站

背景知识&#xff1a;modbus协议介绍 相关工具 mbslave:充当从站。虚拟串口工具:虚拟出一对串口。VS2022。 实现过程以及Demo 打开虚拟串口工具: 打开mbslave: 此处从站连接COM1口。 Demo实现 创建DLL库&#xff0c;创建ModbusRTU类,进行实现&#xff1a; using Syste…

VMware虚拟机搭建CentOS7环境

相关资料 安装VMware 双击VMware-workstation(16.1.1软件安装包.exe安装文件,点下一步 激活码文件复制激活码激活安装linux 1、点击创建虚拟机

【MySQL基础篇】多表查询

1、多表关系 概述&#xff1a;项目开发中&#xff0c;在进行数据库表结构操作设计时&#xff0c;会根据业务需求及业务模板之间的关系&#xff0c;分析并设计表结构&#xff0c;由于业务之间相互关联&#xff0c;所以各个表结构之间也存在着各种联系&#xff0c;基本上分为三种…

从FasterTransformer源码解读开始了解大模型(2.1)代码通读03

从FasterTransformer源码解读开始了解大模型&#xff08;2.2&#xff09;代码解读03-forward函数 写在前面的话 本篇的内容继续解读forward函数&#xff0c;从650行开始进行解读 零、输出Context_embeddings和context_cum_log_probs的参数和逻辑 从653行开始&#xff0c;会…

架构师学习理解和总结

1.架构设计理念 2.架构方法论 2.1需求分析 2.1.1常见需求层次 2.1.2 常见需求结果 2.1.3 需求与架构关系 2.2 领域分析 2.3 关键需求 2.4 概念架构设计 2.5 细化架构设计 2.6 架构设计验证 3.架构设计工具 3.1 DDD领域建模 3.2 41视图分析法 3.3 UML设计工具 4.架构师知…

系统化学习 H264视频编码(01)基础概念

说明&#xff1a;我们参考黄金圈学习法&#xff08;什么是黄金圈法则?->模型 黄金圈法则&#xff0c;本文使用&#xff1a;why-what&#xff09;来学习音H264视频编码。本系列文章侧重于理解视频编码的知识体系和实践方法&#xff0c;理论方面会更多地讲清楚 音视频中概念的…

Swift 中的方法调用机制

Swift 方法调用详解&#xff1a;与 Objective-C 的对比、V-Table 机制、Witness Table 机制 在 iOS 开发中&#xff0c;Swift 和 Objective-C 是两种常用的编程语言。尽管它们都能用于开发应用程序&#xff0c;但在方法调用的底层机制上存在显著差异。本文将详细介绍 Swift 的…

实验2 Aprori关联挖掘算法

目 录 一、实验目的... 1 二、实验环境... 1 三、实验内容... 1 3.1 connect_string()函数解析... 1 3.2 find_rule()函数解析纠错... 2 3.3 关联规则挖掘... 4 四、心得体会... 7 一、实验目的 &#xff08;1&#xff09;理解Aprori关联挖掘算法的程序编写&#xff1b; &…

PYTHON自学笔记(一)vscode配置

安装python 自行官网下载 安装vscode 自行官网下载 环境变量设置 把python和scripts的文件路径&#xff0c;添加到环境变量的path中&#xff0c;如图&#xff1a; 此项不弄&#xff0c;在命令行模式中系统不会认为你装了python和pip&#xff0c;你的输入相关命令shell不会…

# [0705] Task06 DDPG 算法、PPO 算法、SAC 算法【理论 only】

easy-rl PDF版本 笔记整理 P5、P10 - P12 joyrl 比对 补充 P11 - P13 OpenAI 文档整理 ⭐ https://spinningup.openai.com/en/latest/index.html 最新版PDF下载 地址&#xff1a;https://github.com/datawhalechina/easy-rl/releases 国内地址(推荐国内读者使用)&#xff1a; 链…

[机器学习]-4 Transformer介绍和ChatGPT本质

Transformer Transformer是由Vaswani等人在2017年提出的一种深度学习模型架构&#xff0c;最初用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;特别是机器翻译。Transformer通过自注意机制和完全基于注意力的架构&#xff0c;核心思想是通过注意力来捕捉输入序列…

CosyVoice多语言、音色和情感控制模型,one-shot零样本语音克隆模型本地部署(Win/Mac),通义实验室开源

近日&#xff0c;阿里通义实验室开源了CosyVoice语音模型&#xff0c;它支持自然语音生成&#xff0c;支持多语言、音色和情感控制&#xff0c;在多语言语音生成、零样本语音生成、跨语言声音合成和指令执行能力方面表现卓越。 CosyVoice采用了总共超15万小时的数据训练&#…

【2024_CUMCM】时间序列算法ARMA

目录 2023-c-问题二 问题分析 介绍 单位根检验 白噪声检验 自相关和偏自相关图 利用信息准则定阶 构建AMIMA模型 D-W检验 预测 代码 2023-c-问题二 问题分析 ARMA适合多个领域的时间序列分析&#xff0c;不同时间的定价策略属于这类问题。 介绍 ARMA模型&…

C++入门7——string类详解

目录 1.什么是string类&#xff1f; 2.string类对象的常见构造 2.1 string(); 2.2 string (const char* s); 2.3 string (const string& str); 2.4 string (const string& str, size_t pos, size_t len npos); 2.5 string (const char* s, size_t n); 2.7 验证…

【机器学习】基于线性回归的医疗费用预测模型

文章目录 一、线性回归定义和工作原理假设表示 二、导入库和数据集矩阵表示可视化 三、成本函数向量的内积 四、正态方程五、探索性数据分析描述性统计检查缺失值数据分布图相关性热图保险费用分布保险费用与性别和吸烟情况的关系保险费用与子女数量的关系保险费用与地区和性别…

GDP播放器 驱动视频播放器 PHP 系统源码 v4.4.3

最重要的是我们自己开发了源代码&#xff0c;因此无论您在使用此工具时遇到什么问题&#xff0c;我们都会快速解决。这个版本演示 分别支持PHP7.4/8.1/8.2三个版本 演示地址

轻松驾驭开发之旅:Maven配置阿里云CodeUp远程私有仓库全攻略

文章目录 引言一、为什么选择阿里云CodeUp作为远程私有仓库&#xff1f;二、Maven配置阿里云CodeUp远程私有仓库的步骤准备工作配置Maven的settings.xml文件配置项目的pom.xml文件验证配置是否成功 三、使用阿里云CodeUp远程私有仓库的注意事项 引言 在软件开发的世界里&#…

CosyVoice - 阿里最新开源语音克隆、文本转语音项目 支持情感控制及粤语 本地一键整合包下载

近日&#xff0c;阿里通义实验室发布开源语音大模型项目FunAudioLLM&#xff0c;而且一次包含两个模型&#xff1a;SenseVoice和CosyVoice。 CosyVoice专注自然语音生成&#xff0c;支持多语言、音色和情感控制&#xff0c;支持中英日粤韩5种语言的生成&#xff0c;效果显著优于…

分子AI预测赛Task4笔记(结束)

话不多说&#xff0c;直接上官方链接&#xff1a;‌​​​‍&#xfeff;​⁠​‌​‍​​&#xfeff;​‌​⁠‬​&#xfeff;‬​​‌​​​​‬‬​​​​‍⁠‍‌​&#xfeff;⁠Task3&#xff1a;进阶baseline详解 - 飞书云文档 (feishu.cn)Task4&#xff1a;持续尝试&…