【VS Code】Windows10下VS Code配置PlantUML使用环境

这篇文章属于本人参考诸多博客、教程、文档等资料，所撰写的「Windows10上配置VS Code」系列文章之一，内容随时可能发生更新变动，欢迎关注和收藏VS Code系列配置总目录一文以作备忘。

在获取了VS Code编辑器之后，可以尝试在VS Code中配置PlantUML的使用环境，以便学习设计模式和面向对象设计。

---

0. 开始学习PlantUML

0.1 PlantUML是什么

PlantUML是一个用来快速绘制UML图的Java类库，支持的UML图包括：时序图、用例图、类图、对象图、活动图、组件图、部署图、状态图、定时图，还支持这些非UML图：实体联系图、JSON数据、YAML数据、网络图、线框图形界面、架构图、规范和描述语言（DSL）、Ditaa图、甘特图、思维导图、WBS工作分解图等。

比起Graphviz和DOT来说，PlantUML可以通过更加简单直观的语言来定义这些示意图，是用于绘制UML图的、基于Java和Graphviz-Dot的特化工具，而Graphviz和Dot则胜在通用性。

0.2 PlantUML官网简介

在https://plantuml.com/zh/news页面可以查看和PlantUML相关的最新消息：

https://plantuml.com/zh/faq中列出了许多常见问题：

可以在https://plantuml.com/zh/download下载页面下载不同版本的PlantUML：

0.3 PlantUML学习指南⭐️

PDF形式的用户指南，囊括了大部分常用的内容，可能有些错别字或不全的地方，比如对预处理一节，个人建议看对应网页。

PlantUML主题页面使我们可以尝试更多样式，让UML图变得更加美观：

标准库页面列出了PlantUML的标准库：

更深入的对PlantUML Stdlib的学习，一定不能错过Hitchhiker’s Guide！！！

0.4 PlantUML Server

PlantUML还有自己的在线版本，功能已经很齐全了：在文本框中输入定义，点击 Submit 生成图像，使用 View as PNG, View as SVG, View as ASCII Art 查看对应的PNG、SVG和字符图形，通过 Decode URL 来分享相应图像的URL。尝试PlantUML最简单快捷的方法就是使用这一在线编辑服务：

---

1. 下载安装PlantUML

如前文所述，我们可以使用在线版本，不过使用本地环境还是更安心顺手一些。因此本节将下载安装PlantUML。

1.1 下载安装Java和Graphviz-Dot

Java是运行PlantUML的必需条件，在个人环境中安装Java见这篇文章。Graphviz-Dot虽说是可选的，但是建议安装——如果你想绘制除时序图和活动图以外的图, 就需要安装Graphviz软件，具体过程见这篇文章。

1.2 通过命令行使用PlantUML（可以和脚本和文档工具集成）

如果想要在命令行使用PlantUML，就要下载plantuml.jar文件, 保存到本地安装目录。然后使用PlantUML的命令行语法，将PlantUML集成到你的脚本和文档工具上。

此时就可以绘制第一个UML图了——在工作目录中建立一个 sequenceDiagram.txt ，内容如下：

@startuml
Alice -> Bob: test
@enduml

运行PlantUML（或使用集成了PlantUML的软件来调用），将 sequenceDiagram.txt 作为命令输入，输出即为图像。输出图像可以在其他软件中显示，也可以写入到磁盘中的文件上。例如：

java -jar plantuml.jar sequenceDiagram.txt

这条命令会将顺序图输出到 sequenceDiagram.png 这个文件中。

1.3 通过外部工具使用PlantUML⭐️

事实上，PlantUML已经被集成到许多脚本和文档工具中：

• 文本编辑器和IDE，包括我想要认真学习的Vim/Emacs、VS Code。甚至还有Word（This template allows using PlantUML directly from MS Word 2010 without need to alter document templates or edit VBA macro's. MS Word Versions 2007 and 2013 might work, but are not tested.）：
  

• 和编程语言协同，包括Emacs Lisp、Markdown、Python和Java等：
  

• 文档生成工具：
  

• 论坛和Wiki：
  

• 线上编辑器，包括我们之前提到的在线版本：
  

• 其他：
  

---

2. VS Code中安装支持插件、介绍相应功能

在VS Code的扩展商店中，搜索PlantUML，安装下面的这个插件：

这一插件的功能相当丰富，以后有时间了再一一介绍：

此外还可以安装这一个插件：

---

3. 在VS Code中绘制UML图

3.1 第一个简单UML图

创建一个 First.plantuml 文件，输入以下代码：

@startuml FirstUML
Interface Interface01

Interface01 <|.. Class01 : 实现
class02 <|-- Class03     : 继承
Class04 *-- Class05      : 组合
Class06 o-- Class07      : 聚合
Class08 <-- Class9       : 关联
Class10 <.. Class11      : 依赖

@enduml

Alt+D 预览为：

3.2 策略模式的UML图

策略模式结构图的代码如下：

@startuml Strategy

abstract class Strategy
class Strategy {
+AlgorithmInterface() 
}
class Context {
-Strategy strategy
+ContextInterface()
}
class ConcreteStrategyA {
+AlgorithmInterface() 
}
class ConcreteStrategyB {
+AlgorithmInterface() 
}
class ConcreteStrategyC {
+AlgorithmInterface() 
}

Strategy <|-- ConcreteStrategyA
Strategy <|-- ConcreteStrategyB
Strategy <|-- ConcreteStrategyC

note "策略类，定义所有支持的算法的公共接口" as N0
N0 .. Strategy
note "具体策略类，封装了具体的算法或行为，继承于Strategy" as N1
N1 .. ConcreteStrategyA
N1 .. ConcreteStrategyB
N1 .. ConcreteStrategyC
note as N2
    Context上下文，用一个
    ConcreteStrategy来配置，
    维护对一个Strategy对象的引用
end note
N2 .. Context

Context o--> Strategy :Strategy
@enduml

策略模式预览图如下：