程序員在工作中，經常會有繪制時序圖、流程圖的需求，尤其是在寫文檔的時候。平時我們會選擇ProcessOn這類工具來繪制，但有時候用代碼來畫圖可能會更高效一點，畢竟沒有比程序員更熟悉代碼的了。今天給大家推薦一款畫圖工具PlantUML，可以配合IDEA使用，畫圖更高效！

?

PlantUML簡介

PlantUML是一款開源的UML圖繪制工具，支持通過文本來生成圖形，使用起來非常高效。可以支持時序圖、類圖、對象圖、活動圖、思維導圖等圖形的繪制。

下面使用PlantUML來繪制一張流程圖，可以實時預覽，速度也很快！

?

安裝

通過在IDEA中安裝插件來使用PlantUML無疑是最方便的，接下來我們來安裝下IDEA的PlantUML插件。

• 首先在IDEA的插件市場中搜索PlantUML，安裝這個排名第一的插件；

• 有時候網絡不好的話可能下載不下來，可以點擊Plguin homepage按鈕訪問插件主頁，然后選擇合適的版本下載壓縮包；

• 下載成功后，選擇從本地安裝即可。

?

使用

接下來我們使用PlantUML插件分別繪制時序圖、用例圖、類圖、活動圖、思維導圖，來體驗下PlantUML是不是真的好用！

時序圖

時序圖（Sequence Diagram），是一種UML交互圖。它通過描述對象之間發送消息的時間順序顯示多個對象之間的動態協作。我們在學習Oauth2的時候，第一步就是要搞懂Oauth2的流程，這時候有個時序圖幫助可就大了。下面我們使用PlantUML來繪制Oauth2中使用授權碼模式頒發令牌的時序圖。

• 首先我們需要新建一個PlantUML文件，選擇時序圖；

• 我們可以通過PlantUML提供的語法來生成Oauth2的時序圖，語法還是非常簡單的，具體內容如下；

@startuml title Oauth2令牌頒發之授權碼模式actor User as user participant "User Agent" as userAgent participant "Client" as client participant "Auth Login" as login participant "Auth Server" as serverautonumber user->userAgent:訪問客戶端 activate userAgent userAgent->login:重定向到授權頁面+clientId+redirectUrl activate login login->server:用戶名+密碼+clientId+redirectUrl activate server server-->login:返回授權碼 login-->userAgent:重定向到redirectUrl+授權碼code deactivate login userAgent->client:使用授權碼code換取令牌 activate client client->server:授權碼code+clientId+clientSecret server-->client:頒發訪問令牌accessToken+refreshToken deactivate server client-->userAgent:返回訪問和刷新令牌 deactivate client userAgent--> user:令牌頒發完成 deactivate userAgent @enduml

• 該代碼將生成如下時序圖，用寫代碼的方式來畫時序圖，是不是夠炫酷；

• 本時序圖關鍵說明如下：

  • title可以用于指定UML圖的標題；

  • 通過actor可以聲明人形的參與者；

  • 通過participant可以聲明普通類型的參與者；

  • 通過as可以給參與者取別名；

  • 通過->可以繪制參與者之間的關系，虛線箭頭可以使用-->；

  • 在每個參與者關系后面，可以使用:給關系添加說明；

  • 通過autonumber我們可以給參與者關系自動添加序號；

  • 通過activate和deactivate可以指定參與者的生命線。

• 這里還有個比較神奇的功能，當我們右鍵時序圖時，可以生成一個在線訪問的鏈接；

• 直接訪問這個鏈接，可以在線訪問UML時序圖，并進行編輯，是不是很酷！

用例圖

用例圖（Usecase Diagram）是用戶與系統交互的最簡表示形式，展現了用戶和與他相關的用例之間的關系。通過用例圖，我們可以很方便地表示出系統中各個角色與用例之間的關系，下面我們用PlantUML來畫個用例圖。

• 首先我們需要新建一個PlantUML文件，選擇用例圖，該用例圖用于表示顧客、主廚、美食家與餐館中各個用例之間的關系，具體內容如下；

@startuml left to right direction actor Guest as g package Professional {actor Chief as cactor "Food Critic" as fc } package Restaurant {usecase "Eat Food" as uc1usecase "Pay For Food" as uc2usecase "Drink" as uc3usecase "Review" as uc4 } g--> uc1 g--> uc2 g--> uc3 fc--> uc4 @enduml

• 該代碼將生成如下用例圖；

• 本用例圖關鍵說明如下：

  • left to right direction表示按從左到右的順序繪制用例圖，默認是從上到下；

  • 通過package可以對角色和用例進行分組；

  • 通過actor可以定義用戶；

  • 通過usecase可以定義用例；

  • 角色和用例之間的關系可以使用-->來表示。

類圖

類圖（Class Diagram）可以表示類的靜態結構，比如類中包含的屬性和方法，還有類的繼承結構。下面我們用PlantUML來畫個類圖。

• 首先我們需要新建一個PlantUML文件，選擇類圖，該圖用于表示Person、Student、Teacher類的結構，具體內容如下；

@startuml class Person {# String name# Integer age+ void move()+ void say() } class Student {- String studentNo+ void study() } class Teacher {- String teacherNo+ void teach() } Person <|-- Student Person <|-- Teacher @enduml

• 該代碼將生成如下類圖，看下代碼和類圖，是不是發現和我們用代碼定義類還挺像的；

• 本類圖關鍵說明如下：

  • 通過class可以定義類；

  • 通過在屬性和方法左邊加符號可以定義可見性，-表示private，#表示protected，+表示public；

  • 通過<|--表示類之間的繼承關系。

活動圖

活動圖（Activity Diagram）是我們用的比較多的UML圖，經常用于表示業務流程，比如電商中的下單流程就可以用它來表示。下面我們用PlantUML來畫個活動圖。

• 首先我們需要新建一個PlantUML文件，選擇活動圖，這里使用了mall項目中購物車中生成確認單的流程，具體內容如下；

@startuml title 生成確認單流程 start :獲取購物車信息并計算好優惠; :從ums_member_receive_address表中\n獲取會員收貨地址列表; :獲取該會員所有優惠券信息; switch(根據use_type判斷每個優惠券是否可用) case(0):全場通用;if (判斷所有商品總金額是否\n滿足使用起點金額) then (否):得到用戶不可用優惠券列表;stopendif case(-1):指定分類;if (判斷指定分類商品總金額\n是否滿足使用起點金額) then (否):得到用戶不可用優惠券列表;stopendif case(-2):判斷指定商品總金額是否滿足使用起點金額;if (判斷指定分類商品總金額\n是否滿足使用起點金額) then (否):得到用戶不可用優惠券列表;stopendif endswitch :得到用戶可用優惠券列表; :獲取用戶積分; :獲取積分使用規則; :計算總金額，活動優惠，應付金額; stop @enduml

• 該代碼將生成如下活動圖，在活動圖中我們既可以用if else，又可以使用switch，甚至還可以使用while循環，功能還是挺強大的；

• 本活動圖關鍵說明如下：

  • 通過start和stop可以表示流程的開始和結束；

  • 通過:和;中間添加文字來定義活動流程節點；

  • 通過if+then+endif定義條件判斷；

  • 通過switch+case+endswitch定義switch判斷。

思維導圖

思維導圖（Mind Map），是表達發散性思維的有效圖形工具，它簡單卻又很有效，是一種實用性的思維工具。之前在我的mall學習教程中就有很多地方用到了，下面我們用PlantUML來畫個思維導圖。

• 首先我們需要新建一個PlantUML文件，選擇思維導圖，這里使用了mall學習路線中的大綱視圖，具體內容如下；

@startmindmap +[#17ADF1] mall學習路線 ++[#lightgreen] 推薦資料 ++[#lightblue] 后端技術棧 +++_ 項目框架 +++_ 數據存儲 +++_ 運維部署 +++_ 其他 ++[#orange] 搭建項目骨架 ++[#1DBAAF] 項目部署 +++_ Windows下的部署 +++_ Linux下使用Docker部署 +++_ Linux下使用Docker Compose部署 +++_ Linux下使用Jenkins自動化部署 --[#1DBAAF] 電商業務 ---_ 權限管理模塊 ---_ 商品模塊 ---_ 訂單模塊 ---_ 營銷模塊 --[#orange] 技術要點 --[#lightblue] 前端技術棧 --[#lightgreen] 進階微服務 ---_ Spring Cloud技術棧 ---_ 項目部署 ---_ 技術要點 --[#yellow] 開發工具 --[#lightgrey] 擴展學習 @endmindmap

• 該代碼將生成如下思維導圖，其實使用PlantUML我們可以自己定義圖形的樣式，這里我自定義了下顏色；

• 本思維導圖關鍵說明如下：

  • 通過+和-可以表示思維導圖中的節點，具有方向性；

  • 通過[#顏色]可以定義節點的邊框顏色；

  • 通過_可以去除節點的邊框；

?

總結

雖然目前可以繪制UML圖的圖形化工具很多，但是對于程序員來說，使用代碼來繪圖可能更直接，效率更高，尤其是配合IDEA使用。如果你想使用代碼來繪圖，不妨嘗試下PlantUML吧。

參考資料

官方文檔：https://plantuml.com/zh/

有道無術，術可成；有術無道，止于術

歡迎大家關注Java之道公眾號

好文章，我在看??

總結

以上是生活随笔為你收集整理的横空出世！IDEA画图神器来了，比Visio快10倍！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。