使用 Sublime + PlantUML 高效地畫圖

什麼是 PlantUML

PlantUML 是一個畫圖腳本語言,用它能夠快速地畫出:node

  • 時序圖
  • 流程圖
  • 用例圖
  • 狀態圖
  • 組件圖

簡單地講,咱們使用 visio 畫圖時須要一個一個圖去畫,但使用 PlantUML 只須要用文字表達出圖的內容,而後就能夠直接生成圖片。看一個最簡單的例子:git

Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?

demo

軟件安裝

這些軟件所有是開源或共享軟件,不存在版權問題,能夠放心使用。github

  • 安裝 Sublime
    Sublime 是個強大的可擴展的文本編輯器。進入官網下載對應操做系統下的版本安裝便可。
  • 安裝 graphviz
    graphviz 是個開源的圖片渲染庫。安裝了這個庫才能在 Windows 下實現把 PlantUML 腳本轉換爲圖片。
  • 安裝 PlantUML for Sublime 插件
    有了這個插件後,咱們就能夠在 Sublime 裏寫 PlantUML 腳本,而後直接經過一個快捷鍵生成圖片。安裝步驟以下
    • 下載插件,並解壓
    • 經過 Preferences -> Browse Packages ... 打開 sublime 的 Packages 目錄,解壓後的插件放在 Packages 目錄下
    • 重啓 Sublime

爲了簡化使用,能夠在 Sublime 裏配置個快捷鍵。打開 Preferences -> Key Binding - User,添加一個快捷鍵:json

{ "keys": ["alt+d"], "command": "display_diagrams"}

上面的代碼配置成按住 Alt + d 來生成 PlantUML 圖片,你能夠修改爲你本身喜歡的按鍵。服務器

效果檢驗負載均衡

最後檢驗一下工做安裝是否正確。打開 Sublime 輸入:編輯器

Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?

選中這些文本內容,按 Alt + d 會在當前工做目錄下生成這個圖片文件,同時自動彈出窗口顯示圖片。ide

注意事項ui

  • Sublime Text 3 安裝失敗問題
    安裝plantUML插件時,出現 unable to load diagram plugin,check console for details. 把例子粘過來 alt+D 時顯示nothing to process. 剛剛找到了解決辦法:緣由是下載的插件裏沒法加載文件:Diagram.sublime-settings,其中第三行將編碼方式"charset": null改成"charset": "UTF-8",關掉sublime Text 3重啓便可。感謝 @niminote 提供的解決方案。
  • 按 Alt + d 前須要讓要生成圖片的 PlantUML 腳本處於選中狀態,不然會提示 No diagrams overlap selections 。留言裏有不止一位同窗犯了這個錯誤。

PlantULM 快速入門

時序圖

@startuml title 時序圖 == 鑑權階段 == Alice -> Bob: 請求 Bob -> Alice: 應答 == 數據上傳 == Alice -> Bob: 上傳數據 note left: 這是顯示在左邊的備註 Bob --> Canny: 轉交數據 ... 不超過 5 秒鐘 ... Canny --> Bob: 狀態返回 note right: 這是顯示在右邊的備註 Bob -> Alice: 狀態返回 == 狀態顯示 == Alice -> Alice: 給本身發消息 @enduml

sequence diagram

TIPS:編碼

  • 使用 title 來指定標題
  • '->' 和 '-->' 來指示線條的形式
  • 在每一個時序後面加冒號 : 來添加註釋
  • 使用 note 來顯示備註,備註能夠指定顯示在左邊或右邊
  • 使用 == xxx == 來分隔時序圖
  • 使用 ... 來表示延遲省略號
  • 節點能夠給本身發送消息,方法是發送方和接收方使用同一個主體便可

用例圖

@startuml left to right direction actor 消費者 actor 銷售員 rectangle 買單 { 消費者 -- (買單) (買單) .> (付款) : include (幫助) .> (買單) : extends (買單) -- 銷售員 } @enduml

use case

TIPS:

  • 用例圖
    • 用例圖是指由參與者(Actor)、用例(Use Case)以及它們之間的關係構成的用於描述系統功能的靜態視圖
    • 百度百科上有簡易的入門資料,其中用例之間的關係 (include, extends) 是關鍵
  • 使用 actor 來定義參與者
  • 使用括號 (xxx) 來表示用例,用例用橢圓形表達
  • 使用不一樣的線條表達不一樣的關係。包括參與者與用例的關係,用例與用例的關係

流程圖

@startuml title 流程圖 (*) --> "步驟1處理" --> "步驟2處理" if "條件1判斷" then ->[true] "條件1成立時執行的動做" if "分支條件2判斷" then ->[no] "條件2不成立時執行的動做" -> === 中間流程彙總點1 === else -->[yes] === 中間流程彙總點1 === endif if "分支條件3判斷" then -->[yes] "分支條件3成立時執行的動做" --> "Page.onRender ()" as render --> === REDIRECT_CHECK === else -->[no] "分支條件3不成立時的動做" --> render endif else -->[false] === REDIRECT_CHECK === endif if "條件4判斷" then ->[yes] "條件4成立時執行的動做" --> "流程最後結點" else endif --> "流程最後結點" -->(*) @enduml

activity diagram

上面的流程圖寫的時候仍是挺直觀的,但畫出來的圖片渲染效果很差,對邏輯的顯示不清楚。因爲這個緣由 PlantUML 實現了另外版本的流程圖腳本。

下面是 PlantUML 支持的新版本的流程圖腳本,從使用角度來說,更直觀,畫出來的圖片也更漂亮,推薦使用。

@startuml start :"步驟1處理"; :"步驟2處理"; if ("條件1判斷") then (true) :條件1成立時執行的動做; if ("分支條件2判斷") then (no) :"條件2不成立時執行的動做"; else if ("條件3判斷") then (yes) :"條件3成立時的動做"; else (no) :"條件3不成立時的動做"; endif endif :"順序步驟3處理"; endif if ("條件4判斷") then (yes) :"條件4成立的動做"; else if ("條件5判斷") then (yes) :"條件5成立時的動做"; else (no) :"條件5不成立時的動做"; endif endif stop @enduml

active diagram 2

TIPS:

  • 使用 start 來表示流程開始,使用 stop 來表示流程結束
  • 順序流程使用冒號和分號 :xxx; 來表示
  • 條件語句使用 if ("condition 1") then (true/yes/false/no) 來表示
  • 條件語句能夠嵌套

組件圖

咱們常常使用組件圖來畫部署視圖,或者用來畫系統的拓撲結構圖。

@startuml

package "組件1" { ["組件1.1"] - ["組件1.2"] ["組件1.2"] -> ["組件2.1"] } node "組件2" { ["組件2.1"] - ["組件2.2"] ["組件2.2"] --> [負載均衡服務器] } cloud { [負載均衡服務器] -> [邏輯服務器1] [負載均衡服務器] -> [邏輯服務器2] [負載均衡服務器] -> [邏輯服務器3] } database "MySql" { folder "This is my folder" { [Folder 3] } frame "Foo" { [Frame 4] } } [邏輯服務器1] --> [Folder 3] [邏輯服務器2] --> [Frame 4] [邏輯服務器3] --> [Frame 4] @enduml

component diagram

TIPS:

  • 使用方括號 [xxx] 來表示組件
  • 能夠把幾個組件合併成一個包,可使用的關鍵字爲 package, node, folder, frame, cloud, database。不一樣的關鍵字圖形不同。
  • 能夠在包內部用不一樣的箭頭表達同一個包的組件之間的關係
  • 能夠在包內部直接表達到另一個包內部的組件的交互關係
  • 能夠在流程圖外部直接表達包之間或包的組件之間的交互關係

狀態圖

咱們通常使用狀態圖來畫狀態機。

@startuml scale 640 width [*] --> NotShooting state NotShooting { [*] --> Idle Idle --> Processing: SignalEvent Processing --> Idle: Finish Idle --> Configuring : EvConfig Configuring --> Idle : EvConfig } state Configuring { [*] --> NewValueSelection NewValueSelection --> NewValuePreview : EvNewValue NewValuePreview --> NewValueSelection : EvNewValueRejected NewValuePreview --> NewValueSelection : EvNewValueSaved state NewValuePreview { State1 -> State2 } } @enduml

State Diagram

TIPS:

  • 使用 [*] 來表示狀態的起點
  • 使用 state 來定義子狀態圖
  • 狀態圖能夠嵌套
  • 使用 scale 命令來指定生成的圖片的尺寸

總結

不須要去記這些標記,在須要的時候去使用它,經過不斷地使用來熟悉不一樣的圖的語法。能夠下載 PlanUML 官方文檔 做爲參考,遇到問題的時候翻一翻,這樣很快就能夠學會使用 PlantUML 高效地畫圖。

 

原文: http://www.jianshu.com/p/e92a52770832

相關文章
相關標籤/搜索