VSCode 配置PlantUML绘制类图

1.概述

最近在绘制UML类图时，发现一个比较好用的绘制UML的工具PlantUML，因为项目使用的开发工具是VSCode，所以本文在VSCode上安装PlantUML插件来绘制UML类图。

2.环境搭建

VSCode的安装比较简单，这里不再介绍。

配置PlantUML插件

在VSCode插件列表中选择PlantUML安装。

由于PlantUML的插件是 plantUML.jar，所以需要按张Java JDK来支持Java开发环境。

此外PlantUML只能生成sequence图，其它图需要依赖Graphviz引擎，否则会报错误如下：

Dot executable is /opt/local/bin/dot Error: File does not exist

安装JDK比较简单，可参考网上方法，这里不介绍

安装Graphviz，在Ubuntu环境下执行：

sudo apt-get update  #无此操作可能出现 E: Package 'graphviz' has no installation candidate 错误
sudo apt install graphviz

总结下，PlantUML需要安装：

1. java JDK
2. graphviz

2.绘制UML类图

首先新建一个*.wsd, *.pu, *.puml, *.plantuml, *.iuml的文件。此文件用于生成UML图形，执行ALT+D可生成对应的UML类图。

类的关系说明

泛化(继承) <|- -
关联 <- -
组合 *- -
聚合 o–
实现 <|- -
依赖 < . .

如：

@startuml
class1 <|-- class2:泛   化
class3 <-- class4:关   联
class5 *-- class6:组   合
class7 o-- class8:聚   合
class9 <|-- class10:实   现
class11 <.. class12:依   赖
@enduml

生成的uml类图如下

具体类的成员变量及成员函数如下

@startuml
class class1
{
    +void operation1();
    +int operation2(int i);

    -int attribute1;
    -char attribute2;
}

class class2
{
    +void operation1();
    +int operation2(int i);

    -int attribute1;
    -char attribute2;
}

class1 <|-- class2 
@enduml

注意class 与class之间不能有" ; " ,否则会生成错误。

生成图形为：

3.导出图像

VSCode完成后的绘图，可以导出多种格式，通过 Ctrl + Shift + P，打开命令面板，输入 Export Current Diagram 命令后选择图片格式后便可导出。

4. 总结

PlantUML采用这种写代码的方式来绘制UML类图，相比于传统其他需要拖动对应图像控件，编辑类成员函数及变量的方式，效率提升很多，必竟我们直接可以从头文件中复制出类的声明，而无需在控件上一条一条的编辑。

附录

推荐比较好的学习plantUml语法的网站：