在VScode上⽤代码撸UML图
⽂章⽬录
UML图
UML和PlantUML
UML-Unified Modeling Language 统⼀建模语⾔，⼜称标准建模语⾔。是⽤来对软件密集系统进⾏可视化建模的⼀种语⾔。UML的定义包括UML语义和UML表⽰法两个元素。
本⽂主要讲在VScode上利⽤PlantUML插件和Markdown Preview Enhance插件实现快速绘图，并导出图像。前者⽀持*.wsd, *.pu, *.puml, *.plantuml, *.iuml格式的⽂件，后者⽀持在Markdown中直接绘图和预览，并通过其他插件将Markdown⽂件导出为其他格式。VScode
VScode是微软的针对于编写现代 Web 和云应⽤的跨平台源代码编辑器，同样⽀持多种⽂档的编写，插件丰富，功能强⼤，尤其是对于前端开发，相当友好，同样也可以⽤来开发Python项⽬。
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，双击进⼊，点击新建，添加下⾯两⾏：vim编辑器下载与安装
变量值：%JAVA_HOME%\bin
变量值：%JAVA_HOME%\jre\bin
如图：
测试：
在CMD或者Powershell中输⼊javac或者java -version检查是否安装成功。提⽰错误请重新检查安装步骤。Ubuntu
同样在官⽹下载对应的安装包，安装后可以选择设置全局变量还是⽤户变量。
1. 修改全局变量
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，是环境⽴即⽣效。
2. 修改⽤户变量
修改当前⽤户配置⽂件.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",
"portOutDir":"docs/diagrams/out"
相对⽬录，可以⾃⼰设置（不建议）
基本的设置就是这些，其他的提⽰可以到插件详情⾥⾯查看。设置到这⾥，你就可以愉快的撸流程图了。
使⽤
UML的语法可以在或者⽹页搜索UML语法查看。这⾥不再赘述。在VScode中创建新⽂件，后缀改为*.wsd, *.pu, *.puml, *.plantuml, *.iuml，输⼊代码。
PlantUML语法，以@startuml开头，以@enduml结束，中间键⼊图表代码。
1. 右键点击⽂件区域，可以看到下⾯的列表，可以点击预览，导出等
2. 或者使⽤快捷键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编辑页⾯的右上⾓，到Ope
n 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配置
参考
Ubuntu设置Java环境变量：
PlantUML官⽅站点：
Markdown Preview Enhanced官⽅站点：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。