> 文章每週持續更新，各位的「三連」是對我最大的肯定。可以微信搜尋公眾號「 後端技術學堂 」第一時間閱讀（一般比部落格早更新一到兩篇） 軟體設計中，有好幾種圖需要畫，比如流程圖、類圖、元件圖等，我知道大部分人畫流程圖一般都會用微軟的viso繪製，我之前也是這個習慣。 viso畫圖有個不好的地方是需要時刻去調整線條和邊框已達到簡潔美觀，今天我給大家介紹一款程式設計師畫圖神器PlantUML，一款你用了就愛上的畫圖軟體！ VsCode以外掛的形式支援了這款畫圖神器，還不知道VsCode？ > VsCode 強大地自定義功能，已經成為程式設計師最愛編輯器。 > Microsoft在2015年4月30日Build 開發者大會上正式宣佈了 Visual Studio Code 專案:一個運行於 Mac OS X、Windows和Linux之上的，針對於編寫現代 Web 和雲應用的跨平臺原始碼編輯器。 > 該編輯器也集成了所有一款現代編輯器所應該具備的特性，包括語法高亮(syntax high lighting)，可定製的熱鍵繫結(customizable keyboard bindings)，括號匹配(bracket matching)以及程式碼片段收集(snippets)。Somasegar 也告訴筆者這款編輯器也擁有對 Git 的開箱即用的支援。引用[360百科](https://baike.so.com/doc/24428308-25261478.html) ## 主角出場 ### PlantUML **PlantUML是一個開源專案，支援快速繪製：** >時序圖 用例圖 類圖 活動圖 (舊版語法在此處) 元件圖 狀態圖 物件圖 部署圖 定時圖 ... **同時還支援以下非UML圖:** >線框圖形介面 架構圖 規範和描述語言 (SDL) Ditaa diagram 甘特圖 MindMap diagram 以 AsciiMath 或 JLaTeXMath 符號的數學公式 通過簡單直觀的語言來定義這些示意圖,與MarkDown有相似的作用，這兩種語言一個主要面向文字渲染一個主要用於圖形繪製。 #### 語法 語法簡單明瞭，檢視以下[官方教程](http://plantuml.com/zh/sequence-diagram) **我擷取幾個官網的事例圖片在這裡：** - 活動圖  - 類圖  - 時序圖  - 用例圖  - 狀態圖  #### 圖中的圖片都是用原始碼' '寫'' 出來的哦！是不是很cool ### PlantUML遇上VsCode #### 安裝 - 安裝graphviz-2.38.msi - 安裝2個vscode外掛: > PlantUML、Graphviz Preview #### 例子 ```plantUML @startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response @enduml ``` #### 預覽 > Alt+D #### 檔案格式 > .wsd, .pu, .puml, .plantuml, .iuml #### 如何匯出 > F1/ctrl+shift+p; PlantUML:匯出當前圖表；選擇匯出格式png；匯出即可。 #### 好了，這麼好用工具趕緊用起來吧！ ## 更多 > 可以微信搜尋公眾號「 後端技術學堂 」回覆「資料」有我給你準備的各種程式設計學習資料。文章每週持續更新，我們下期見！