用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 iterator() } abstract class AbstractList{ +Iterator iterator()} abstract class AbstractSet abstract class AbstractMap{ {abstract} +Set> entrySet() } abstract class AbstractSequentialList abstract class Dictionary class ArrayList class Vector class LinkedList class HashSet class Hashtable class HashMap class LinkedHashMapIterator <|-- 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 <|-- LinkedHashMapnote as N1 #green AbstractCollection--iterator作为数据源 AbstractList--实现好的iterator作为数据源 ArrayList--数组是数据操作的对象 end notenote 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 InterfaceInterface <|.. 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、声明方法的修饰符