使用 PlantUML 和 VS Code 轻松学习 UML





5.00/5 (5投票s)
本文将开始探讨 UML。文章从宏观层面讨论了几个图表,但重点更侧重于 PlantUML。
引言
UML 是 Unified Modeling Language(统一建模语言)的缩写。它是一种通用的建模语言,用于标准化软件系统架构的可视化方法。它由 Grady Booch、Ivar Jacobson 和 James Rumbaugh 于 1994-1995 年在 Rational Software 开发。之后在 1997 年被采纳为行业标准。
UML 是一种使用广为接受的图形符号来表达软件组件设计的方式。在开始使用任何文本编程语言进行编码之前,拥有一个图形模型通常是很有益的。之后,该模型还可以用于文档目的。UML 的有用性可以用以下现实生活场景来描述:当我们接纳新开发人员时,我们不希望他们阅读每一行代码并猜测其含义;我们希望向他们展示整个系统的概览。同样,当我们希望他们从事某个功能开发时,我们不希望他们只通过口头简报来了解;我们希望他们对所需功能有一个蓝图,因此需要使用 UML 图。
遵循上述方法可以大大减轻系统相关的许多烦恼和误解。在此过程中,设计缺陷也常常能被提前发现。
UML 最初是在白板上进行的草图,细节很少,以便与团队成员进行设计讨论。当决定最终确定后,相关的草图会被放到更复杂的工具中,最终结果将作为程序员工作的蓝图。
基本 UML 类型
根据用例的不同,有许多 UML 图可供选择。然而,它们被归类为 **结构** 和 **行为** UML 图集。
结构图反映了系统的结构,而行为图则描述了系统在特定操作下的反应。总共有 14 种 UML 图;有些很重要,有些则不太重要。它们如下……
结构 UML 图
行为 UML 图
我们只会编写其中一些。跟随本文,您将明白我所说的“编写图表”的含义。
可用的建模工具
对于建模,简单的笔和纸就可以完成。然而,对于长期的文档保存和频繁的编辑,您可能需要寻找更专业的工具。工具的选择可以是桌面应用、在线应用或仅集成开发环境 (IDE) 插件。有些可能需要月度/年度订阅,有些则是免费软件。以下是一些知名的工具:
产品 | 平台 | 定价模式 |
Microsoft Visio | 桌面/在线 | 共享软件 |
draw.io | 在线 | 免费 |
LucidChart | 在线 | 共享软件/免费软件 |
PlantUML, Eclipse UML2 | IDE 插件/扩展 | 免费 |
PlantUML 救援
虽然 Visio 和 draw.io 看起来都是不错的选择,但其中一个在免费试用期后需要支付一些费用,而另一个则需要稳定的互联网连接。因此,如果您刚开始学习并难以做出选择,PlantUML 是一个很好的选择。
PlantUML 以一种略有不同的方式处理图表绘制。它不像从工具箱拖放各种形状并连接它们,而是用伪编程语言来表达您的图表。这种语言非常易于理解,并且很快就能掌握。
Visual Studio Code 集成
PlantUML 支持多种 IDE 集成。所有支持的 IDE 都在 PlantUML 官方网站 http://plantuml.com/running 上列出。
我们选择 VS Code,因为它最近非常流行,而且没有停止的迹象。在 VS Code 中安装 PlantUML 扩展之前,请确保您已满足以下先决条件:
对于 Windows 用户,如果您安装了 Chocolatey(Windows 的包管理器),您可以使用以下命令简化安装过程:
choco install plantuml
您可以从 **扩展** 选项卡搜索并安装 PlantUML 扩展。它在 Visual Studio Marketplace 中可用。您也可以通过按 Ctrl +Shift + P(Windows)或 **Command + Shift + P**(Mac)打开 VS Code 命令面板,然后键入
ext install plantuml
编写几个模型
如前所述,在 PlantUML 中,我们使用伪编程语言来生成图表。此代码文件可以具有以下文件扩展名之一:
*.wsd, *.pu, *.puml, *.plantuml, *.iuml
要进行测试运行,请创建一个具有任何上述扩展名的文件,并粘贴以下代码:
@startuml
scale 3
Alice -> Bob : test
@enduml
按 Alt + D 或 **Option + D** 即可获得生成图表的预览。
类图
类图表示系统中的对象以及它们之间的各种关系。它是您在设计系统时最常遇到的 UML 图。类包含属性,这些属性仅仅是字段、属性,而操作仅仅是方法。属性和操作都有自己的访问修饰符(可见性),用符号(例如 +、-、~、#)表示,例如 +field1 表示类中有一个 `public` 字段。
用于管理训练营的类图可能具有以下结构:
相应的 PlantUML 伪代码如下:
@startuml
scale 2
class Event {
+startTime: DateTime
+venue: string
+registrationClosed: boolean
-notifyAttendes()
}
class ApplicationUser {
-userName: string
-password: string
+isLocked: boolean
-suggestRandomPasswod()
+changeProfilePic()
}
class Speaker {
+openForSpeaking: boolean
-callForAction()
+applyAsSpokePerson()
}
class Topic {
+title: string
+sourceCodeUrl: string
+downloadMaterials()
}
class Attendee {
-eventAttended: number
-suggestEventBasedOnPreference()
+registerForTicket()
}
ApplicationUser <|-- Speaker
ApplicationUser <|-- Attendee
Speaker "1" *-- "*" Topic
Event "1" o-- "*" Speaker
Event "1" o-- "*" Attendee
@enduml
图中一些符号值得提及。它们以表格形式进行描述。
图形符号 | PlantUML 符号 | 含义 |
空心箭头 | <|— | 泛化/继承 |
实心菱形 | *— | 组成 |
空心菱形 | o— | 聚合 |
活动图
活动图广泛用于描述业务流程和工作流程。它看起来类似于流程图。但是,它们支持顺序和并行行为。
活动图可以组织成垂直泳道,也可以不组织。泳道表示一个或多个参与者在工作流中的参与。在活动图中,实心圆表示过程的开始,而带有实心点的空心圆表示结束。多边形通常是决策点。水平条表示两个或多个动作同时发生。
在线游戏购买系统的活动图可能具有以下流程:
相应的 PlantUML 伪代码如下:
@startuml
scale 2
start
:Add games to cart;
:Checkout;
:Check cookie;
while (if cookie?) is (is invalid)
:Show login form;
endwhile
fork
:Mail invoice;
fork again
:Load games;
end fork
:Install and play;
stop
@enduml
导出用于文档
PlantUML 支持将图表导出为不同的文件格式。以下是一些支持的类型:
*.png, *.svg, *eps, *.pdf, *vdx, *.xmi, *scmi, *html, *.txt, *.utxt, *.latex
默认导出位置设置为桌面。但是,遵循 VS Code 用户设置将确保您的伪代码和图表与源代码目录一起保存在名为“docs”的文件夹中。
"plantuml.diagramsRoot": "docs/diagrams/src",
"plantuml.exportOutDir": "docs/diagrams/out"
您将获得类似如下的导出结果:
Project Folder/
docs/
diagrams/
src/
architecture_overview.wsd
out/
architecture_overview.png
结论
本文仅是 UML 的皮毛。UML 的讨论非常广泛,需要一些时间才能掌握。文章只从宏观层面讨论了几个图表,并且重点更多地放在 PlantUML 而非 UML 本身。建议进一步阅读以更好地理解 UML 的细节。以下书籍可能会帮助您入门: