1 序言
所謂一圖勝千言，大家平日在作業中撰寫檔案時，往往都需要畫各種圖來表達中心思想，比如流程圖、時序圖、UML 圖，很多人選擇使用 Axure 、PrecessOn、Diagrams（darw.io）、XMind、Visio、yEd、Lucidchart、Astah 等軟體來畫圖，這些軟體功能豐富可定制化強，但是有時候會讓人局限在軟體提供的素材中，陷入滑鼠拖動繪制的泥潭，無形中浪費了寶貴時間；另一方面出于安全合規考慮，在線繪圖型別的軟體也存在資料隱私風險，
在此為大家推薦一個專注于“畫圖”本身的工具 PlantUML，通過寫代碼的方式完成滿足各種需求場景的畫圖作業，將人的精力集中到思想的表達與傳遞，避免無謂的圖形頁面樣式修改調整，進而提升作業效率，
2 工具介紹
PlantUML 是一個可以快速撰寫 UML 圖的開源組件（https://github.com/plantuml/plantuml ）， 始于2009 年，支持時序圖、用例圖、類圖、物件圖、活動圖等多種 UML 圖，也支持 JSON 資料、YAML 資料、網路圖、線框圖形界面、架構圖、甘特圖、思維導圖圖示等，PlantUML 采用 GPL 協議發布，在公司內部僅作為工具，不分發不修改的前提下軟體可以正常使用，
相較與其他工具的滑鼠拖拽繪圖方式，PlantUML 的圖不是“畫”出來的，而是“寫”出來的，PlantUML 同時支持多種主題，本地安裝即可渲染出圖形，樣式豐富可定制化，而且文本格式也便于保存到 git 實作歷史記錄 diff，最重要的是學習成本很低，
3 畫圖效果
下面展示使用PlantUML 繪制的各種型別圖例，
3.1 UML類圖
3.2 活動圖
3.3 流程圖
3.4 時序圖
3.5 腦圖
4 各種主題
PlantUML 內置了 30 多種主題，可以通過 help themes 命令查看內置主題串列，
@startuml
help themes
@enduml
在檔案開頭可以通過指令 !theme 來指定需要的主題名稱，
@startuml
!theme mars
title 這是圖的主題
header 頁眉內容
footer 頁腳內容
Alice -> Bob: 認證請求
Bob -> Bob: 認證處理
Bob -> Alice: 認證接受
@enduml
5 使用準備
PlantUML 支持各類常用開發軟體，比如 Eclipse、VS code、IntelliJ 系列軟體等，官網上也支持實時編輯；同時也支持命令列方式生成圖片，
5.1 VS code
安裝插件：
搜索安裝最新插件，然后編輯 .puml 檔案即可實時渲染出圖：
5.2 IntelliJ IDEA
安裝插件：
搜索安裝最新插件，然后編輯 .puml 檔案即可實時渲染出圖：
5.3 Eclipse
安裝插件：
搜索安裝最新插件，然后編輯 .puml 檔案即可實時渲染出圖：
5.4 命令列
從官網下載最新版 jar 包，然后執行如下命令:
# 決議 111.puml 檔案并生成 png 圖片
java -jar plantuml.jar 111.puml
5.5 在線編輯
本地渲染即可滿足使用要求，但是官網也支持在線模式，
6 語法簡介
官網上（https://plantuml.com/zh/） 提供了豐富的 demo 可供參考，基本滿足了日常的畫圖需求；頂部點擊導航欄可以查看各種圖的幫助檔案，左側導航欄提供了組件的特色設定項，
6.1 時序圖
可以使用關鍵字定義 UML 元素，如：actor（角色）、boundary（邊界）、control（控制）、entity（物體）、database（資料庫）、collections（集合）、queue（佇列），使用 as關鍵字重命名參與者，
支持使用關鍵字 autonumber 用于自動對訊息編號，title 關鍵字用于為頁面添加標題，頁面可以使用 header 和 footer 顯示頁眉和頁腳，
使用這些關鍵詞來組合訊息：alt/else、opt、loop、par、break、critical、group, 后面緊跟著訊息內容，關鍵詞 end 用來結束分組，分組是可以嵌套使用的，
6.2 用例圖
package 定義一個包，as 定義對應別名，usecase 定義用例，箭頭定義關系，
6.3 類圖
使用 class 定義類，默認會自動將屬性和方法分割開，也可以使用分隔符 --..==__. 分隔符中也可以添加文字，
6.4 部署圖
node 標識節點，file 標識檔案，cloud 定義云，效果如下：
7 標準庫
官方標準庫提供了一系列的圖例擴展功能，遵循 “C標準庫約定”，使用命令：stdlib 即可查看當前版本組件支持的標準庫，
基于這些標準庫，可以創建豐富型別的圖表，包括但不限于架構圖、AWS 部署圖、Azure 庫等等，
8 C4模型與C4PlantUML
8.1 C4 模型
為什么我們需要架構圖呢？這是因為整個產品不只是開發人員使用的，從開發，測驗，架構師，專案經理，產品經理，UI 互動設計師，用戶，這么多的人員，需要一種方式能夠讓團隊的每個人腦子里的架構可視化出來，形成統一的理解，這就是架構圖，
C4 模型一種架構設計的方法論，忽略不在同一個抽象層級的細節，從而可以更好的表達和可視化，是軟體系統建模的圖形表示技巧，C4 模型會用到一些現有的建模技巧，例如統一建模語言（UML）及 ER 模型（ERD），會將系統結構化分解，分解為容器（container）和組件（component），
可以類比地圖，地圖分 4 個級別，國家，省，市，街道；C4 模型也分 4 個層級，依其階層關系分類：
1.統背景關系圖（Context diagrams），第一層的圖，說明系統、和其使用者以及其他系統的關系，
2.容器圖（Container diagrams），第二層的圖，將系統分解為彼此相關的容器（container），容器可以是應用程式或是資料存盤，
3.組件圖（Component diagrams），第三層的圖，將容器分別為彼此相關的組件，也說明組件和其他組件（或是其他系統）的關系，
4.代碼圖（Code diagrams），第四層的圖，提供架構元素的設計細節，可以對應到程式碼，在此層級的 C4 模型會用到目前已有的標示方式，例如統一建模語言、ER 模型或是集成開發環境產生的示意圖，
C4 模型的第一層到第三層，用到五種基礎的圖示元素：人、軟體系統、容器、組件和關系，此技術沒有規定元素的布局、形狀、顏色或是風格，C4 模型建議以嵌套框為基礎的簡單圖表，方便互動式的協作繪圖，C4 模型也鼓勵良好的建模實務，例如在每一個圖都加上標題以及圖例，以及清楚的標示，以方便目標讀者的理解，
8.2 C4PlantUML
基于開源專案 C4-PlantUML 可以實作軟體模型圖制作，同時官方標準庫里也包括了這個組件，
@startuml "enterprise"
'!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
'!include C:/repo/C4-PlantUML/C4_Container.puml
!include <C4/C4_Container>
title 網銀系統容器圖
Person(customer, 客戶, "銀行客戶有自己的私人銀行賬號")
System_Boundary(c1, "網銀") {
Container(web_app, "Web 應用", "Java, Spring MVC", "傳遞靜態內容和網銀SPA")
Container(spa, "單頁應用", "JavaScript, Angular", "通過瀏覽器對用戶提供所有的網銀功能")
Container(mobile_app, "手機應用", "C#, Xamarin", "通過手機設備提供有限的網銀功能")
ContainerDb(database, "資料庫", "SQL 資料庫", "存盤用戶的注冊資訊，隨機認證密碼，訪問日志等")
Container(backend_api, "API應用", "Java, Docker容器", "通過API提供網銀功能")
}
System_Ext(email_system, "郵件系統", "網路軟體交換系統")
System_Ext(banking_system, "Mainframe銀行系統", "存盤所有的核心客戶，賬號，事務銀行資訊")
Rel(customer, web_app, "使用", "HTTPS")
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用")
Rel_Neighbor(web_app, spa, "傳輸")
Rel(spa, backend_api, "使用", "異步, JSON/HTTPS")
Rel(mobile_app, backend_api, "使用", "異步, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "讀寫", "同步, JDBC")
Rel_Back(customer, email_system, "發送郵件到")
Rel_Back(email_system, backend_api, "發送郵件", SMTP")
Rel_Neighbor(backend_api, banking_system, "使用", "同步/異步, XML/HTTPS")
效果如下：
9 小結
PlantUML 使用格式良好且可讀的代碼來呈現圖表，相比于其他工具，PlantUML 將目光聚焦到畫圖本身，用戶只需要根據規范去寫邏輯代碼就可以生成比較好看且整潔的圖表，簡單高效，大家不必刻意去記它的語法，在使用的程序中去查閱檔案參考，很快就可以上手，
最后，感謝你的閱讀，如果這篇文章讓你有所識訓，也歡迎你將它分享給更多的人，
作者：京東物流 高世雄
內容來源：京東云開發者社區
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/556780.html
標籤：其他
上一篇：中國對鎵和鍺實施出口管制：全球半導體行業的新挑戰與機遇
下一篇：返回列表