VSCode 中使用 PlantUML 插件画图(一)

时间:2024-05-21 22:46:57

1,安装JDK并配置java环境
JDK安装包可以在https://www.oracle.com/java/technologies/javase-downloads.html下载符合你电脑配置的jdk安装包。
VSCode 中使用 PlantUML 插件画图(一)
安装完成后一定要配置环境变量。首先右键我的电脑,选择属性,接着进入左侧的高级系统设置
VSCode 中使用 PlantUML 插件画图(一)
选择环境变量,打开环境变量对话框,单击下方【系统变量】下的【新建】按钮,变量名为:JAVA_HOME,对应的变量值为jdk安装的目录,如下图所示:
VSCode 中使用 PlantUML 插件画图(一)
点击确定。然后新建变量名:CLASSPATH,变量值:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar,之后点击确定,最后找到环境变量PATH,点击编辑,之后新建新建变量为 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
VSCode 中使用 PlantUML 插件画图(一)
确定以后,分别输入“java”、“java -version”(java -version代表你安装的java的版本)和javac,若都正常运行则代表java已经正确安装。
2.安装graphviz-2.38.msi并配置dot脚本环境
graphviz可以到https://graphviz.gitlab.io/_pages/Download/Download_windows.html下载,配置环境变量,将系统变量的Path配置到C:Program Files
(x86)\Graphvi2.38)bin即可,其中C:\Program Files(x86)路径随你的安装路径变化。CMD终端中数入dot-verison检查是否安装成功,成功会显示graphviz版本信息。
VSCode 中使用 PlantUML 插件画图(一)
3.安装VS Code
4.安装jebbs.plantuml-2.13.8.six插件到VS Code
将plantuml离线插件放置到vs Code的安装路径下,在当前bin目录下打开PowerShell(Win7在菜单栏的附件的window powershell,win10中直接搜索),进入当前目录的指令如:
cd C:\Program Files\Microsoft" VS "Code

需要特别注意的是如果直接输入Microsoft VS Code,系统提示无法识别,应该将VS以及前后两个空格用双引号或者单引号括起来

输入命令:code-install-extension jebbs.plantuml-2.13.8.vsix,回车。安装完成,你将看到提示信息安装完成。
VSCode 中使用 PlantUML 插件画图(一)
5.VS Code测试安装是否成功
打开vs Code》New File,输入简单plantuml脚本
@startuml
A --> B
@enduml
使用快捷键Alt + D生成预览图,能看见预览图则说明安装成功。
VSCode 中使用 PlantUML 插件画图(一)
使用技巧
1.编写脚本,语法可以参见plantuml官方手册
2.Alt+D开启预览,开启预览之后,可以实时查看到脚本的输出图.
3.保存脚本,快捷键Ctrl + s
4.导出输出图。打开Command palette,开启方式有两种:其一快捷键Ctrl + Shift+ P;其二对着脚本编辑框点击右键选择command palette.command palette中输入plantuml,即会出现PlantUML的图片到处选项,选择对应选项即可到处图片。注意图片到处路径为脚本保存路径。