用VS Code画uml

1、前言

试过很多次想画类图，也试用过各种不同uml软件，但是那些图画出来，总感觉有点丑，也是一如既往的去找uml软件有什么好用的，最后发现plantUML，发现生成的格式是符合自己审美的。

2、环境

编辑器：VS Code
vs code插件：okazuki PlantUML
uml软件：PlantUML
辅助软件：Graphviz

3、安装插件

默认你安装了vs code了。
在vs code插件中心搜索uml，点安装，再点重新加载即可。

接着，按照插件说明，要在环境变量中设置JAVA_HOME（jdk的目录）、PLANTUML_JAR（plantuml的jar包地址）、GRAPHVIZ_DOT（Graphviz的执行文件地址）

下载plantUML你可以到官网下载：http://plantuml.com/download
下载graphviz到官网下载msi安装包就好了：https://graphviz.gitlab.io/_pages/Download/Download_windows.html

---

note：最近发现好像教程的那个插件不见了，找下面这个插件，预览快捷键Alt+D，这个插件有格式限制，格式要为*.wsd, *.pu, *.puml, *.plantuml, *.iuml才能使用快捷键，plantUML、graphviz按照上面安装配置环境变量即可

4、使用预览功能

随便写个文本文件即可。
我写的内容如下:

@startuml
interface ListIterator
interface Iterator
interface Collection
interface List
interface Set
interface Map
interface Map.Entry
interface Queue
interface Deque
abstract class AbstractCollection{
    {abstract} +int size()
    {abstract} +Iterator<E> iterator()
}
abstract class AbstractList{
    +Iterator<E> iterator()

}
abstract class AbstractSet
abstract class AbstractMap{
    {abstract} +Set<Entry<K,V>> entrySet()
}
abstract class AbstractSequentialList
abstract class Dictionary
class ArrayList
class Vector
class LinkedList
class HashSet
class Hashtable
class HashMap
class LinkedHashMap

Iterator <|-- ListIterator
Iterator <|-- Collection
Collection <|-- List
Collection <|-- Set
Collection <|.. AbstractCollection
Collection <|-- Queue
Queue <|-- Deque
Deque <|.. ArrayList
List <|.. AbstractList
List <|.. Vector
List <|.. LinkedList
Set <|.. AbstractSet
Set <|.. HashSet
Map <|.. AbstractMap
Map <|.. Hashtable
Map <|.. HashMap
Map <|.. LinkedHashMap
AbstractCollection <|-- AbstractList
AbstractCollection <|-- AbstractSet
AbstractList <|-- ArrayList
AbstractList <|-- Vector
AbstractList <|-- AbstractSequentialList
AbstractSet <|-- HashSet
AbstractSequentialList <|-- LinkedList
AbstractMap <|-- HashMap
Dictionary <|-- Hashtable
HashMap <|-- LinkedHashMap

note as N1 #green
AbstractCollection--iterator作为数据源
AbstractList--实现好的iterator作为数据源
ArrayList--数组是数据操作的对象
end note

note right of ArrayList:批量操作变为数组操作
@enduml

以上是阅读jdk集合框架画了个主要的类图。
接着使用快捷键：Ctrl+Shift+P 打开插件命令行，输入uml pre，基本是就是第一个了。

效果如下：

总得来说效果是很不错的。

5、类图语法

5.1、类声明

接口声明：interface 接口名
抽象类声明：abstract class 类名
类声明：class 类名
注解类声明：annotation 注解名
枚举类声明：enum 枚举类名

5.2、关系声明

关系的声明：

关系	符号	说明
接口与实现关系	<|..或者..|>	带空心三角型的虚线表示
依赖(Dependency)关系	<..或者..>	带箭头的虚线表示
单向关联(Association)	<-- 或者 -->	带箭头的实线表示
双向关联	--	直线表示
多重性关联	“1..*”<--"0..*"或者 “0..*”--“1..*”	关联直线上用一个数字或者一个数字的范围表示
聚合(Aggregation)关系	o--或者--o	英语O | 带空心菱形的直线表示
组合(Composition)关系	*--或者--*	带实心的菱形的直线表示
泛化关系(继承[Inheritance])	<|-- 或者 --|>	带空心三角型的直线表示

@startuml
class Impl
interface Interface

Interface <|.. Impl:实现

class Dep1
class Dep2
Dep2 <.. Dep1:依赖

class Ass1
class Ass2
Ass2 <-- Ass1:单向依赖

class Ass3
class Ass4
Ass4 -- Ass3:双向依赖

class Ass5
class Ass6
Ass6 "1..*"<--"0..1" Ass5:多重行依赖

class Agg1
class Agg2
Agg2 o-- Agg1:聚合

class Com1
class Com2
Com2 *-- Com1:组合

class Parent
class Sub
Parent <|-- Sub:继承

@enduml

5.3、声明方法的修饰符

5.4、注释/备注

5.4.1、对类注释

note后接方位词（left、right、top、bottom）
1.直接在对象下一行用：

class ArrayList
note right:批量操作变为数组操作

2.使用of+类名

class ArrayList
......中间若干行
note right of ArrayList:批量操作变为数组操作

5.4.2、不对类备注

1.使用：note “备注内容” as note的别名

note "This is a floating note" as N2

2.使用：note as note的别名 \n 备注内容 \n end note 语法块

note as N1
AbstractCollection--iterator作为数据源
AbstractList--实现好的iterator作为数据源
ArrayList--数组是数据操作的对象
end note

5.4.3、关系备注

1.关系：备注信息
2.直接在关系的下一行用