一、安装Java环境

首先执行java -version检查一下你的机器是否配置过Java环境。如果没有的话需要先配置一下。相关的教程非常多，就略过了。需要的自行Google一下。

二、安装graphviz

下面以Windows系统为例。

从 graphviz.org/download/](graphviz.org/download/) 找到 EXE installer for Windows 10 (32-bit)的下载链接，例如：gitlab.com/graphviz/gr…

下载下来进行安装。

然后，配置如下系统环境变量：

键：GRAPHVIZ_DOT 值：C:\Program Files (x86)\Graphviz\bin\dot.exe

其中，C:\Program Files (x86)\Graphviz 替换成你的Graphviz安装目录。

三、安装VS Code插件

在VS Code中安装两个插件：PlantUML 和 Graphviz Preview。

四、测试效果

1、生成时序图

在VS Code中新建一个文件，保存为test-plantuml.pu，然后粘贴入如下代码内容：

@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token

用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml

然后按 Alt + D 快捷键（Mac下是 Command + D）即可将其生成成如下预览图。

而且，当文件代码变化了的时候，预览图也会跟着重新渲染，只是稍微有一点点延时而已。

然后在VS Code的代码上单击鼠标右键，选择“导出当前文件图表”菜单项，然后选择文件类型（从下图所示的列表中任选一个），即可导出成图片。

这样，我们就轻松地得到了一个时序图。

再看一个更复杂点的：

@startuml
客户端 -> 服务器 : 验证请求
alt 验证成功
    客户端 -> 服务器 : 验证响应

else 验证失败 ：第一种失败情况
    客户端 -> 服务器 : 验证失败
    group 自定义的分组情况
        客户端 -> 日志服务 : 开始记录日志
    loop 循环 1000 次
        客户端 -> 服务器 : DNS 尝试
    end

客户端 -> 日志服务 : 结束日志记录
end

else 验证失败：第二种失败情况
    客户端 -> 服务器 : 要求客户端重新请求
end
@enduml

2、声明参与者

@startuml
participant participant as Foo
actor       actor       as Foo1
boundary    boundary    as Foo2
control     control     as Foo3
entity      entity      as Foo4
database    database    as Foo5
collections collections as Foo6
queue       queue       as Foo7
Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7 : To queue
@enduml

@startuml
actor Bob #red
' actor 和 participant 只在外观上有区别
participant Alice
participant "很长很长很长\n的名字" as L #99FF99
/' 也可以这样声明：
   participant L as "很长很长很长\n的名字"  #99FF99
  '/

Alice->Bob: 认证请求
Bob->Alice: 认证响应
Bob->L: 记录事务日志
@enduml

更多的图，可以参照这文档逐一学习使用。

亦可参考：woodwhales.cn/2019/01/13/…

最后，顺便提一下，PlantUML也提供了一个服务用来生成UML图的。

关于PlantUML Server的介绍见plantuml.com/zh/server

相关代码见：github.com/plantuml/pl…

你也可以在本地运行该服务，具体可以参考此文。

基于 VS Code + PlantUML 实现通过编码声明UML图