65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 PlantUML 和 VS Code 轻松学习 UML

starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2019年3月1日

CPOL

6分钟阅读

viewsIcon

123581

本文将开始探讨 UML。文章从宏观层面讨论了几个图表,但重点更侧重于 PlantUML。

引言

UML 是 Unified Modeling Language(统一建模语言)的缩写。它是一种通用的建模语言,用于标准化软件系统架构的可视化方法。它由 Grady BoochIvar JacobsonJames 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

图 1:VS Code 的 PlantUML 扩展安装

编写几个模型

如前所述,在 PlantUML 中,我们使用伪编程语言来生成图表。此代码文件可以具有以下文件扩展名之一:

*.wsd, *.pu, *.puml, *.plantuml, *.iuml

要进行测试运行,请创建一个具有任何上述扩展名的文件,并粘贴以下代码:

@startuml
scale 3
Alice -> Bob : test
@enduml

Alt + D 或 **Option + D** 即可获得生成图表的预览。

图 2:在 VS Code 中使用 PlantUML 进行测试运行

类图

类图表示系统中的对象以及它们之间的各种关系。它是您在设计系统时最常遇到的 UML 图。类包含属性,这些属性仅仅是字段、属性,而操作仅仅是方法。属性和操作都有自己的访问修饰符(可见性),用符号(例如 +、-、~、#)表示,例如 +field1 表示类中有一个 `public` 字段。

用于管理训练营的类图可能具有以下结构:

图 3:训练营管理类图

相应的 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— 聚合

活动图

活动图广泛用于描述业务流程和工作流程。它看起来类似于流程图。但是,它们支持顺序和并行行为。

活动图可以组织成垂直泳道,也可以不组织。泳道表示一个或多个参与者在工作流中的参与。在活动图中,实心圆表示过程的开始,而带有实心点的空心圆表示结束。多边形通常是决策点。水平条表示两个或多个动作同时发生。

在线游戏购买系统的活动图可能具有以下流程:

图 4:在线游戏购买流程活动图

相应的 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

图 5:在 VS Code 中使用 PlantUML 导出图表

默认导出位置设置为桌面。但是,遵循 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 的细节。以下书籍可能会帮助您入门:

© . All rights reserved.