在VScode上用代码撸UML图

belingud

已于 2024-07-26 23:23:17 修改

阅读量8.1k

点赞数 6

分类专栏： VScode UML 文章标签： VScode UML PlantUML

于 2019-06-10 17:39:14 首次发布

本文链接：https://blog.csdn.net/qq_27114273/article/details/91372694

版权

VScode 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

UML

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Visual Studio Code (VScode) 上利用PlantUML插件和Markdown Preview Enhanced插件绘制和预览UML图。首先讲解了UML和PlantUML的基本概念，接着详细阐述了VScode的安装与配置，包括Java环境的设置。然后，展示了在VScode中安装和使用PlantUML插件的步骤，以及Markdown Preview Enhanced插件的安装和Markdown文件中绘制UML图的方法。此外，还提及了在Ubuntu和MacOS上的Java环境变量配置，并简单提到了Atom编辑器的类似配置。

摘要由CSDN通过智能技术生成

UML图

UML和PlantUML

UML-Unified Modeling Language 统一建模语言，又称标准建模语言。是用来对软件密集系统进行可视化建模的一种语言。UML的定义包括UML语义和UML表示法两个元素。

PlantUML是一个实现UML快速绘图的开源项目，你可以在他的官网 http://plantuml.com/zh/ 找到下载包，是一个Java的jar包，但是你首先需要安装Java环境。

本文主要讲在VScode上利用PlantUML插件和Markdown Preview Enhance插件实现快速绘图，并导出图像。前者支持*.wsd, *.pu, *.puml, *.plantuml, *.iuml格式的文件，后者支持在Markdown中直接绘图和预览，并通过其他插件将Markdown文件导出为其他格式。

VScode

VScode是微软的针对于编写现代 Web 和云应用的跨平台源代码编辑器，同样支持多种文档的编写，插件丰富，功能强大，尤其是对于前端开发，相当友好，同样也可以用来开发Python项目。

VScode官网：https://code.visualstudio.com/ ，你可以直接下载对应系统的安装包，安装使用，不需要其他配置。新版的VScode将软件设置，从JSON格式改为了图形界面，不过同样可以编辑设置的JSON文件，如果你需要旧版JSON格式的设置界面，请自行搜索下载。

Java

下载

你可以在ORACLE的Java官方站点下载对应系统的Java安装包，最新版的是Java SE12.0.1，推荐安装Java SE 8u211版本，在JDK那一项，点击Downloade。你需要下载的是 Java SE Development Kit 8u211，然后点击Accept License Agreement前面的按钮，X86代表32位的操作系统，X64代表64位的操作系统，选择对应的包下载即可。

安装和环境变量

安装

下载完成后点击安装。

Windows可视情况安装在C盘或其他位置。Ubuntu用户可以直接下载deb安装包直接安装，找到你的Java安装位置，添加环境变量，或者下载压缩包自定义Java的位置。MacOS用户请自行百度。

环境变量

Windows10

在搜索中搜索高级系统设置，点击进入
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
找到环境变量，点击进入：

点击系统变量下面的新建，创建一个JAVE_HOME的系统变量，值为你Java安装的目录，自行变动，比如：

D:\Program Files\Java\jdk1.8.0_91

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
然后设置CLASS_PATH，值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;，复制粘贴即可：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
然后找到系统变量中的Path，双击进入，点击新建，添加下面两行：

变量值：%JAVA_HOME%\bin
变量值：%JAVA_HOME%\jre\bin

如图：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
测试：

在CMD或者Powershell中输入javac或者java -version检查是否安装成功。提示错误请重新检查安装步骤。

Ubuntu

同样在官网下载对应的安装包，安装后可以选择设置全局变量还是用户变量。

修改全局变量

sudo vim /etc/profile

在profile末尾增加JAVA_HOME、CLASSPATH和PATH，例如

export JAVA_HOME=/usr/local/java/jdk1.8.0_171  # java的安装或解压目录
export CLASSPATH=.:${JAVA_HOME}/lib/dt.jar:${JAVA_HOME}/lib/tools.jar
export PATH=${JAVA_HOME}/bin:$PATH

然后运行source /etc/profile，是环境立即生效。

修改用户变量

修改当前用户配置文件.bashrc，只作用于当前用户：

sudo vim ~/.bashrc

设置与上一样

然后运行source ~/.bashrc，设设置立即生效。

测试：

运行java -version，查看java版本，如果正常输出版本信息则配置正确，你可以重启使设置永久生效。

Mac

按照上面的步骤下载Java，下载完成后打开dmp，可以找到Java的根目录，如图。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
编辑系统变量，添加JAVA_HOME、CLASS_PATH、PATH，打开终端，输入命令sudo vim /etc/profile进行编辑

在终端输入 /usr/libexec/java_home 可以查看java的安装目录

添加下面几行：

JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home"
export JAVA_HOME
CLASS_PATH="$JAVA_HOME/lib"
PATH=".$PATH:$JAVA_HOME/bin"

保存并退出，运行source /etc/profile使配置立即生效。
终端输入java -version检查配置是否生效。

VScode配置

VScode和Java安装成功之后，就可以配置VScode使其支持UML绘图。

PlantUML

安装

安装PlantUML开源插件，支持多种文件后缀的UML图。

找到VScode扩展页，或者按Ctrl+Shift+X快捷键，直接打开。在搜索栏中搜索PlantUML，点击安装。生成其他的图形你可能需要安装GrapgViz(非必需)，不过一般情况下PlantUML足矣。

在扩展的介绍页面，有详细的配置讲解和注意事项，这里只进行简单的讲解。

设置

点击VScode左下角的设置，然后点击设置右上角花括号，如图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

点击后：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

添加下面一行：

"plantuml.includepaths": ["docs/diagrams/style","docs/diagrams/src"],

你也可以设置导出和引用的目录，官方的提示是：

"plantuml.diagramsRoot": "docs/diagrams/src",
"plantuml.exportOutDir": "docs/diagrams/out"

相对目录，可以自己设置（不建议）

基本的设置就是这些，其他的提示可以到插件详情里面查看。设置到这里，你就可以愉快的撸流程图了。

使用

UML的语法可以在PlantUML或者网页搜索UML语法查看。这里不再赘述。在VScode中创建新文件，后缀改为*.wsd, *.pu, *.puml, *.plantuml, *.iuml，输入代码。

PlantUML语法，以@startuml开头，以@enduml结束，中间键入图表代码。

右键点击文件区域，可以看到下面的列表，可以点击预览，导出等

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

或者使用快捷键Ctrl+Shift+P，打开命令面板，搜索PlantUML，有相同的选项列表，不再贴图。

Markdown Preview Enhanced

不只是使用PlantUML插件，你同样可以在Markdown文件中画UML图，通过Markdown Preview Enhanced插件来预览和导出，同样依赖与Java。

安装

找到VScode扩展页，或者按Ctrl+Shift+X快捷键，直接打开。在搜索栏中搜索Markdown Preview Enhanced，点击安装。

对于书写Markdown文件，你可能需要一个叫做Markdown All In One的插件，可以自动补充markdown语法，并支持快捷键。

这个插件不需要其他的设置，你可以直接使用其进行预览。在Markdown编辑页面的右上角，找到Open Preview To The Side，点击，或者在空白处点击右键，在列表里面找到Open Preview To The Side，就可以在侧边预览Markdown文件的效果。

使用

在markdown中画uml图表，需要写在代码块中，语言标识为plantuml。

 ```plantuml开头
 @srartuml
 。。。
 @enduml
 ``

在预览图中点击右键，可以看到设置菜单，PDF,eBook,Pandoc导出需要自行安装prince xml,pandoc插件，prince xml结合插件生成的PDF效果并不让人满意，如果有需求请自行搜索。推荐使用Chrome导出文件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

注意，如果图画的太长会被分成多页。

Atom配置

Atom类似于VScode，也是一个优秀的源代码编辑工具，你也可以使用他来画UML图表，官网：https://atom.io/ 同VScode一样，需要在install中搜索PlantUML或者Markdown Preview Enhanced插件安装，不需要其他设置，使用也和VScode中类似，不再赘述。