用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

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

interface ListIterator
interface Iterator
interface Collection
interface List
interface Set
interface Map
interface Queue
interface Deque

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.直接在关系的下一行用