VSCode绘制UML类图

目录

1. 简介

1.1 PlantUML

1.2 安装PlantUML

1.3 支持的文件格式

2. 绘制UML类图

类之间的关系​​​​

关系上的标签​​​​

添加方法​​​​

定义可访问性

3. 测试

3.1 例子

3.2 预览

3.3 如何导出

1. 简介

软件设计中，有好几种图需要画，比如流程图、类图、组件图等，我知道大部分人画流程图一般都会用微软的visio绘制，visio画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观，今天我给大家介绍一款程序员画图神器PlantUML！

1.1 PlantUML

PlantUML是一个开源项目，支持快速绘制：

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

同时还支持以下非UML图:

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

通过简单直观的语言来定义这些示意图,与MarkDown有相似的作用，这两种语言一个主要面向文本渲染一个主要用于图形绘制。

1.2 安装PlantUML

安装

• 安装graphviz-2.38.msi
• 安装2个vscode插件:

PlantUML、Graphviz Preview

 如图所示，安装即可。

1.3 支持的文件格式

Supported Formats

1. *.wsd

   ,

2. *.pu

   ,

3. *.puml

   ,

4. *.plantuml

   , 

5. *.iuml

2. 绘制UML类图

元素声明 @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 @enduml 类之间的关系 类之间的关系通过下面的符号定义 : Type Symbol Drawing Extension（扩展） <|-- Composition（组合） *-- Aggregation（聚合） o-- 使用 ..  来代替  --  可以得到点 线. 在这些规则下，也可以绘制下列图形 @startuml Class01 <|-- Class02 Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 -- Class10 @enduml @startuml Class11 <|.. Class12 Class13 --> Class14 Class15 ..> Class16 Class17 ..|> Class18 Class19 <--* Class20 @enduml @startuml Class21 #-- Class22 Class23 x-- Class24 Class25 }-- Class26 Class27 +-- Class28 Class29 ^-- Class30 @enduml 关系上的标签 在关系之间使用标签来说明时, 使用  : 后接 标签文字。 对元素的说明，你可以在每一边使用  ""  来说明. @startuml Class01 "1" *-- "many" Class02 : contains Class03 o-- Class04 : aggregation Class05 --> "1" Class06 @enduml 在标签的开始或结束位置添加 <  或  > 以表明是哪个对象作用到哪个对象上。 @startuml class Car Driver - Car : drives > Car *- Wheel : have 4 > Car -- Person : < owns @enduml 添加方法 为了声明字段(对象属性）或者方法，你可以使用 后接字段名或方法名。 系统检查是否有括号来判断是方法还是字段。 @startuml Object <|-- ArrayList Object : equals() ArrayList : Object[] elementData ArrayList : size() @enduml 也可以使用 {}  把字段或者方法括起来 注意，这种语法对于类型/名字的顺序是非常灵活的。 @startuml class Dummy { String data void methods() } class Flight { flightNumber : Integer departureTime : Date } @enduml 你可以（显式地）使用  {field}  和  {method}  修饰符来覆盖解析器的对于字段和方法的默认行为 @startuml class Dummy { {field} A field (despite parentheses) {method} Some method } @enduml 定义可访问性 一旦你定义了域或者方法，你可以定义 相应条目的可访问性质。 Character Icon for field Icon for method Visibility - private # protected ~ package private + public Edit online @startuml class Dummy { -field1 #field2 ~method1() +method2() } @enduml 你可以采用以下命令停用这些特性  skinparam classAttributeIconSize 0  ： @startuml skinparam classAttributeIconSize 0 class Dummy { -field1 #field2 ~method1() +method2() } @enduml 3. 测试 3.1 例子 如 新建文件xx.puml @startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response @enduml 3.2 预览 快捷键：Alt+D 如遇到Java报错，请安装java并配置路径 文件格式 .wsd, .pu, .puml, .plantuml, .iuml 3.3 如何导出 F1/ctrl+shift+p; PlantUML:导出当前图表； 选择导出格式png； 导出即可。 参考：  1. https://plantuml.com/zh/class-diagram 2. https://www.freesion.com/article/1112413542/