文章目录
- 前言
- 下载和安装
- 支持文件格式
- 支持绘制类型
- 导出
- 语法
- 申报要素
- 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