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

檸檬橙1024發表於2020-07-08
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；匯出即可。

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

更多

可以微信搜尋公眾號「 後端技術學堂 」回覆「資料」有我給你準備的各種程式設計學習資料。文章每週持續更新，我們下期見！

相關文章