還能這麼玩？用VsCode畫類圖、流程圖、時序圖、狀態圖...不要太爽！

文章每週持續更新，各位的「三連」是對我最大的確定。能夠微信搜索公衆號「 後端技術學堂 」第一時間閱讀（通常比博客早更新一到兩篇）

軟件設計中，有好幾種圖須要畫，好比流程圖、類圖、組件圖等，我知道大部分人畫流程圖通常都會用微軟的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百科

主角出場

PlantUML

PlantUML是一個開源項目，支持快速繪製：

時序圖
用例圖
類圖
活動圖 (舊版語法在此處)
組件圖
狀態圖
對象圖
部署圖
定時圖
...

同時還支持如下非UML圖:

線框圖形界面
架構圖
規範和描述語言 (SDL)
Ditaa diagram
甘特圖
MindMap diagram
以 AsciiMath 或 JLaTeXMath 符號的數學公式

經過簡單直觀的語言來定義這些示意圖,與MarkDown有類似的做用，這兩種語言一個主要面向文本渲染一個主要用於圖形繪製。

語法

語法簡單明瞭，查看如下官方教程
我截取幾個官網的事例圖片在這裏：

• 活動圖
  
• 類圖
  
• 時序圖
  
• 用例圖
  
• 狀態圖
  

圖中的圖片都是用源代碼' '寫'' 出來的哦！是否是很cool

PlantUML趕上VsCode

安裝

• 安裝graphviz-2.38.msi
• 安裝2個vscode插件:

PlantUML、Graphviz Preview

例子

@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；導出便可。

好了，這麼好用工具趕忙用起來吧！

更多

能夠微信搜索公衆號「 後端技術學堂 」回覆「資料」有我給你準備的各類編程學習資料。文章每週持續更新，咱們下期見！