VS Code是微软的一款轻量级编辑器,甚至可以算的上一款轻量级的IDE,支持大量的插件工具,除了可以用来写代码外,用来写各种技术文档也是极为方便。
VS code 下载地址:https://code.visualstudio.com/
VS code 安装没什么比较复杂的步骤,直接小白式安装,不想自定义一些配置的话一直下一步到结束即可。
PlantUML不需要额外进行下载安装,可在VS Code的扩展市场中直接搜索进行安装。
Ctrl+Shift+X打开扩展市场搜索页面,输入PlantUML,点击一下即可看其相关介绍,然后点击“Install”进行安装即可。(对安装路径没什么要求)
安装PlantUML时气门可以看到Details中说到需要安装Java以及Graphviz以支持PlantUML的使用。
可点击Details页面中的高亮“Java”,也可以点击该链接:https://java.com/en/download/
进入下载页面
下载完后直接进行安装即可,直接小白式安装,不想自定义一些如安装路径配置的话一直下一步到结束即可。(对安装路径没什么要求)
可点击Details页面中的高亮“Graphviz”,也可以点击该链接:http://www.graphviz.org/download/
进入下载页面
然后根据自己的操作系统进行选择合适的版本,例如博主的是win10系统,就选择windows系列的版本进行下载,博主选择的是Development Windows install packages中的版本进行下载,
下载完后直接手动进行安装即可,安装路径也没什么要求,其中有一步会问是否配置到系统环境变量中,
这里不配置后面进行手动配置也是可以的,一开始时博主想偷个懒,选择自动添加到环境变量中,但是很遗憾自动配置失败,不过没关系,后面进行统一手动配置就好了。
需要配置的环境变量有三个,分别是:
①PlantUML的plantuml.jar路径
②Java的安装路径
③Graphviz的dot.exe路径
WIN+R快速打开运行界面,输入sysdm.cpl进入到系统属性页面:
然后“高级”——>“环境变量”,进入到环境变量配置页面
在这里可以进行系统变量或用户变量配置,博主这里是配置到了用户变量中
可能有些小伙伴在到了这步时会一脸懵逼,因为安装时都没留意过究竟安装在了哪里,现在不知道去哪找这些路径。没关系,这里推荐一款神器,搜一下立马知道在哪里了。这款神器叫做Everything,下载地址:https://everything.en.softonic.com/
配置好环境变量后,有一件非常重要的事不要忘了,那就是重启电脑!!!
PlantUML有它自成体系的语法,学起来也是比较容易上手的,关键是多练就好了,在官方网站中列出了大量的用例,小伙伴们可尽情浏览学习。
PlantUML官方网站:https://plantuml.com/zh/
下面我们来编写一个简单的测试:
@startuml test
ClassTeacher ..|> ClassPerson
ClassStudent ..|> ClassPerson
@enduml
然后Alt+D即可在窗口右侧生成对应的UML图
接下来就是要将绘制好的UML图进行导出了,Ctrl+Shift+P打开主命令面板,输入Export,点击"Export Current Diagram"
可看到有多种格式进行导出,这里以图片形式导出作为示范,选中png
导出成功后在窗口右下角可看到以下提示
点击"View Report"可查看导出报告,一般包含导出时间、路径等信息。
打开目标文件的导出目录,即可看到对应的导出文件了。
要知道很难做到每次安装软件或配置环境都一路顺风的,难免会遇到各种各样的挫折。没关系问题就是为了解决问题而生的,出现了那就去解决它。
可能有些小伙伴按照上面的教程一步一步走下来发现到生成UML前都没问题,但是到了"Alt+D"时报错了,一般这种情况都是安装的版本不匹配,或者Graphviz安装不完整,就像衣服嘛,随手拿的衣服、裤子、鞋子等等穿起来也能凑成一身,但是这并不意味着就合穿了,是舒适的、好看的,对吧,软件也一样,配套的软件总有它需要配套的道理。
像如果安装的Graphviz是2.44版本,在https://plantuml.com/zh/graphviz-dot中就有说到需要多做一步完成安装。
"WIN+R"打开运行界面,输入cmd打开控制台窗口,然后cd到Graphviz安装目录下的bin目录中,然后输入dot -c
然后Enter执行一下完成Graphviz的安装,
一般报错的时候都会提到有相应的出错信息提示的,需要耐心点去找一下,一般都能找到问题的原因,只要原因清楚了,问题就好解决了。
很多信息可以在这里找到答案:https://plantuml.com/zh/sitemap-news-and-information
好了,到这里就结束了!加油!!!