VS Code + PlantUML搭建UML編寫環境

笨小孩要多學習發表於2020-10-10

1.VS Code安裝

VS Code是微軟的一款輕量級編輯器，甚至可以算的上一款輕量級的IDE，支援大量的外掛工具，除了可以用來寫程式碼外，用來寫各種技術文件也是極為方便。

VS code 下載地址：https://code.visualstudio.com/

VS code 安裝沒什麼比較複雜的步驟，直接小白式安裝，不想自定義一些配置的話一直下一步到結束即可。

2.PlantUML安裝

PlantUML不需要額外進行下載安裝，可在VS Code的擴充套件市場中直接搜尋進行安裝。

Ctrl+Shift+X開啟擴充套件市場搜尋頁面，輸入PlantUML，點選一下即可看其相關介紹，然後點選“Install”進行安裝即可。（對安裝路徑沒什麼要求）

搜尋PlantUML

3.JAVA安裝

安裝PlantUML時氣門可以看到Details中說到需要安裝Java以及Graphviz以支援PlantUML的使用。

Details_img

可點選Details頁面中的高亮“Java”，也可以點選該連結:https://java.com/en/download/

進入下載頁面

javaDownload_img

下載完後直接進行安裝即可，直接小白式安裝，不想自定義一些如安裝路徑配置的話一直下一步到結束即可。（對安裝路徑沒什麼要求）

4.Graphviz安裝

可點選Details頁面中的高亮“Graphviz”，也可以點選該連結:http://www.graphviz.org/download/

進入下載頁面

GraphvizDownload_img

然後根據自己的作業系統進行選擇合適的版本，例如博主的是win10系統，就選擇windows系列的版本進行下載，博主選擇的是Development Windows install packages中的版本進行下載，

GraphvizDownload_img2

GraphvizDownload_img3

GraphvizDownload_img4

GraphvizDownload_img5

GraphvizDownload_img6

下載完後直接手動進行安裝即可，安裝路徑也沒什麼要求，其中有一步會問是否配置到系統環境變數中，

GraphvizDownload_img9

這裡不配置後面進行手動配置也是可以的，一開始時博主想偷個懶，選擇自動新增到環境變數中，但是很遺憾自動配置失敗，不過沒關係，後面進行統一手動配置就好了。

5.環境變數配置

需要配置的環境變數有三個，分別是：

①PlantUML的plantuml.jar路徑

②Java的安裝路徑

③Graphviz的dot.exe路徑

WIN+R快速開啟執行介面，輸入sysdm.cpl進入到系統屬性頁面：

path_img1

然後“高階”——>“環境變數”，進入到環境變數配置頁面

path_img2

在這裡可以進行系統變數或使用者變數配置，博主這裡是配置到了使用者變數中

path_img3

可能有些小夥伴在到了這步時會一臉懵逼，因為安裝時都沒留意過究竟安裝在了哪裡，現在不知道去哪找這些路徑。沒關係，這裡推薦一款神器，搜一下立馬知道在哪裡了。這款神器叫做Everything，下載地址：https://everything.en.softonic.com/

everything_img

everything_img2

配置好環境變數後，有一件非常重要的事不要忘了，那就是重啟電腦！！！

6.小試牛刀

PlantUML有它自成體系的語法，學起來也是比較容易上手的，關鍵是多練就好了，在官方網站中列出了大量的用例，小夥伴們可盡情瀏覽學習。

PlantUML官方網站：https://plantuml.com/zh/

PlantUML_com_1

下面我們來編寫一個簡單的測試：

@startuml test
ClassTeacher ..|> ClassPerson
ClassStudent ..|> ClassPerson
@enduml

test_1

然後Alt+D即可在視窗右側生成對應的UML圖

test_2

接下來就是要將繪製好的UML圖進行匯出了，Ctrl+Shift+P開啟主命令皮膚，輸入Export，點選"Export Current Diagram"

test_3

可看到有多種格式進行匯出，這裡以圖片形式匯出作為示範，選中png

test_4

匯出成功後在視窗右下角可看到以下提示

test_5

點選"View Report"可檢視匯出報告，一般包含匯出時間、路徑等資訊。

開啟目標檔案的匯出目錄，即可看到對應的匯出檔案了。

test_6

7.錯誤解決指南

要知道很難做到每次安裝軟體或配置環境都一路順風的，難免會遇到各種各樣的挫折。沒關係問題就是為了解決問題而生的，出現了那就去解決它。

可能有些小夥伴按照上面的教程一步一步走下來發現到生成UML前都沒問題，但是到了"Alt+D"時報錯了，一般這種情況都是安裝的版本不匹配，或者Graphviz安裝不完整，就像衣服嘛，隨手拿的衣服、褲子、鞋子等等穿起來也能湊成一身，但是這並不意味著就合穿了，是舒適的、好看的，對吧，軟體也一樣，配套的軟體總有它需要配套的道理。

像如果安裝的Graphviz是2.44版本，在https://plantuml.com/zh/graphviz-dot中就有說到需要多做一步完成安裝。

version_1