VSCODE 系列（六）使用Plantuml插件制作UML类图

---

前言

软件设计中，有好几种图需要画，比如流程图、类图、组件图等，我知道大部分人画流程图一般都会用微软的visio绘制，visio画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观，今天我给大家介绍一款程序员画图神器PlantUML！
PlantUML是一种功能非常强大的UML描述语言。本文将介绍如何在VSCODE中安装和类图的绘制。

下载和安装

要想在vscode上作uml图，则必然是需要安装plantuml语言的插件，在安装插件里搜索栏里搜索plantuml安装如下所示
只安装plantuml还不行，因为想要把uml图显示出来，还必须要有绘图插件才行，这里就需要graphviz插件，安装如下
这两个插件安装好之后，就可以在vscode上通过plantuml语言作uml图，ALT+D可把plantuml语言以图形形式更新展现出来。

支持文件格式

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

支持绘制类型

• 时序图
• 用例图
• 类图
• 活动图 (旧版语法在此处)
• 组件图
• 状态图
• 对象图
• 部署图
• 定时图

同时还支持以下非UML图:

• 线框图形界面
• 架构图
• 规范和描述语言 (SDL)
• Ditaa diagram
• 甘特图
• MindMap diagram
• 以 AsciiMath 或 JLaTeXMath 符号的数学公式

本文主要介绍程序员开发中类图的绘制。

导出

ctrl+shift+p打开首选项
输入：PlantUML:导出当前图表；选择导出格式png；导出即可。

语法

语法简单明了，查看以下官方教程

申报要素

@startuml
abstract        abstract
abstract class  "abstract class"
annotation      annotation
circle          circle
()              circle_short_form
class           class
diamond         diamond
<>              diamond_short_form
entity          entity
enum            enum
interface       interface
protocol        protocol
struct          struct
@enduml

UML类图关系

类图关系	符号
依赖	<…或…>
单向关联	<–
双向关联	–或<–>
聚合	o–
组合	*–
泛化/继承	<|–
实现	<|…

类图关系使用戳这里**PlantUml实现类图**和PlantUML 快速入门（一） 绘制 UML 类图

@startuml
Class01 ..> Class02 :  依赖
Class03 --> Class04 :  单向关联
Class05 <--> Class06 :  双向关联
Class07 o-- Class08 :  聚合
Class09 *-- Class010 :  组合
Class10 <|-- Class11 : 泛化/继承
Class12 ..|> Class13 :  实现
@enduml

参考例子

@startuml
动物 ..> 空气 : 依赖
动物 ..> 水
鸟 --|> 动物 : 继承
大雁 ..|> 飞翔 : 实现接口
大雁 --|> 鸟
大雁 "n" --o "1" 雁群 : 聚合
鸭 --|> 鸟
唐老鸭 -- 鸭
翅膀 --* 鸟 : 组合 >
企鹅 --> 气候 : 单向关联
企鹅 --|> 鸟

class 动物 {
    - {static}有生命
    # 重量
    + 年龄
    + {abstract}新陈代谢(空气 水)
    + 繁殖()
    + 繁殖(变量1)
}

note right: 动物的注释

note left of 动物::重量
    动物的重量的注释
end note

note left of 动物::"繁殖()"
    同名方法的注释
end note

note right of 动物::"繁殖(变量1)"
    同名方法的注释
end note

class 空气

class 水

class 鸟 {
    + 翅膀
    + 下蛋()
}

class 翅膀 {

}

interface 飞翔 {
    + 飞()
}

class 大雁 {
    + 下蛋()
    + 飞翔()
}

note top of 大雁
    大雁的注释
end note

class 雁群 {
    + V型飞行()
    + 一型飞行()
}

class 鸭 {
    + 下蛋()
}

class 唐老鸭 {
    - 讲话()
    # 走路()
}

class 企鹅 {
    + 下蛋()
}

enum 气候 {
}

note as N1
    这是一个注释，可以像Markdown一样贴图和
    HTML一样<u>下划线</u>
end note
@enduml

参考

官方教程
PlantUml实现类图
PlantUML 快速入门（一） 绘制 UML 类图
liml-miku