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

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

 

檸檬橙1024 2020-03-11 13:36:23 2855 收藏 14 原力計劃

分類專欄： 工具

版權

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

預覽

Alt+D

文件格式

.wsd, .pu, .puml, .plantuml, .iuml

如何導出

F1/ctrl+shift+p; PlantUML:導出當前圖表；選擇導出格式png；導出即可。

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