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

?

PlantUML簡(jiǎn)介

PlantUML是一款開(kāi)源的UML圖繪制工具，支持通過(guò)文本來(lái)生成圖形，使用起來(lái)非常高效。可以支持時(shí)序圖、類圖、對(duì)象圖、活動(dòng)圖、思維導(dǎo)圖等圖形的繪制。

下面使用PlantUML來(lái)繪制一張流程圖，可以實(shí)時(shí)預(yù)覽，速度也很快！

?

安裝

通過(guò)在IDEA中安裝插件來(lái)使用PlantUML無(wú)疑是最方便的，接下來(lái)我們來(lái)安裝下IDEA的PlantUML插件。

• 首先在IDEA的插件市場(chǎng)中搜索PlantUML，安裝這個(gè)排名第一的插件；

• 有時(shí)候網(wǎng)絡(luò)不好的話可能下載不下來(lái)，可以點(diǎn)擊Plguin homepage按鈕訪問(wèn)插件主頁(yè)，然后選擇合適的版本下載壓縮包；

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

?

使用

接下來(lái)我們使用PlantUML插件分別繪制時(shí)序圖、用例圖、類圖、活動(dòng)圖、思維導(dǎo)圖，來(lái)體驗(yàn)下PlantUML是不是真的好用！

時(shí)序圖

時(shí)序圖（Sequence Diagram），是一種UML交互圖。它通過(guò)描述對(duì)象之間發(fā)送消息的時(shí)間順序顯示多個(gè)對(duì)象之間的動(dòng)態(tài)協(xié)作。我們?cè)趯W(xué)習(xí)Oauth2的時(shí)候，第一步就是要搞懂Oauth2的流程，這時(shí)候有個(gè)時(shí)序圖幫助可就大了。下面我們使用PlantUML來(lái)繪制Oauth2中使用授權(quán)碼模式頒發(fā)令牌的時(shí)序圖。

• 首先我們需要新建一個(gè)PlantUML文件，選擇時(shí)序圖；

• 我們可以通過(guò)PlantUML提供的語(yǔ)法來(lái)生成Oauth2的時(shí)序圖，語(yǔ)法還是非常簡(jiǎn)單的，具體內(nèi)容如下；

@startuml title Oauth2令牌頒發(fā)之授權(quán)碼模式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:訪問(wèn)客戶端 activate userAgent userAgent->login:重定向到授權(quán)頁(yè)面+clientId+redirectUrl activate login login->server:用戶名+密碼+clientId+redirectUrl activate server server-->login:返回授權(quán)碼 login-->userAgent:重定向到redirectUrl+授權(quán)碼code deactivate login userAgent->client:使用授權(quán)碼code換取令牌 activate client client->server:授權(quán)碼code+clientId+clientSecret server-->client:頒發(fā)訪問(wèn)令牌accessToken+refreshToken deactivate server client-->userAgent:返回訪問(wèn)和刷新令牌 deactivate client userAgent--> user:令牌頒發(fā)完成 deactivate userAgent @enduml

• 該代碼將生成如下時(shí)序圖，用寫代碼的方式來(lái)畫時(shí)序圖，是不是夠炫酷；

• 本時(shí)序圖關(guān)鍵說(shuō)明如下：

  • title可以用于指定UML圖的標(biāo)題；

  • 通過(guò)actor可以聲明人形的參與者；

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

  • 通過(guò)as可以給參與者取別名；

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

  • 在每個(gè)參與者關(guān)系后面，可以使用:給關(guān)系添加說(shuō)明；

  • 通過(guò)autonumber我們可以給參與者關(guān)系自動(dòng)添加序號(hào)；

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

• 這里還有個(gè)比較神奇的功能，當(dāng)我們右鍵時(shí)序圖時(shí)，可以生成一個(gè)在線訪問(wèn)的鏈接；

• 直接訪問(wèn)這個(gè)鏈接，可以在線訪問(wèn)UML時(shí)序圖，并進(jìn)行編輯，是不是很酷！

用例圖

用例圖（Usecase Diagram）是用戶與系統(tǒng)交互的最簡(jiǎn)表示形式，展現(xiàn)了用戶和與他相關(guān)的用例之間的關(guān)系。通過(guò)用例圖，我們可以很方便地表示出系統(tǒng)中各個(gè)角色與用例之間的關(guān)系，下面我們用PlantUML來(lái)畫個(gè)用例圖。

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

@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

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

• 本用例圖關(guān)鍵說(shuō)明如下：

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

  • 通過(guò)package可以對(duì)角色和用例進(jìn)行分組；

  • 通過(guò)actor可以定義用戶；

  • 通過(guò)usecase可以定義用例；

  • 角色和用例之間的關(guān)系可以使用-->來(lái)表示。

類圖

類圖（Class Diagram）可以表示類的靜態(tài)結(jié)構(gòu)，比如類中包含的屬性和方法，還有類的繼承結(jié)構(gòu)。下面我們用PlantUML來(lái)畫個(gè)類圖。

• 首先我們需要新建一個(gè)PlantUML文件，選擇類圖，該圖用于表示Person、Student、Teacher類的結(jié)構(gòu)，具體內(nèi)容如下；

@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

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

• 本類圖關(guān)鍵說(shuō)明如下：

  • 通過(guò)class可以定義類；

  • 通過(guò)在屬性和方法左邊加符號(hào)可以定義可見(jiàn)性，-表示private，#表示protected，+表示public；

  • 通過(guò)<|--表示類之間的繼承關(guān)系。

活動(dòng)圖

活動(dòng)圖（Activity Diagram）是我們用的比較多的UML圖，經(jīng)常用于表示業(yè)務(wù)流程，比如電商中的下單流程就可以用它來(lái)表示。下面我們用PlantUML來(lái)畫個(gè)活動(dòng)圖。

• 首先我們需要新建一個(gè)PlantUML文件，選擇活動(dòng)圖，這里使用了mall項(xiàng)目中購(gòu)物車中生成確認(rèn)單的流程，具體內(nèi)容如下；

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

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

• 本活動(dòng)圖關(guān)鍵說(shuō)明如下：

  • 通過(guò)start和stop可以表示流程的開(kāi)始和結(jié)束；

  • 通過(guò):和;中間添加文字來(lái)定義活動(dòng)流程節(jié)點(diǎn)；

  • 通過(guò)if+then+endif定義條件判斷；

  • 通過(guò)switch+case+endswitch定義switch判斷。

思維導(dǎo)圖

思維導(dǎo)圖（Mind Map），是表達(dá)發(fā)散性思維的有效圖形工具，它簡(jiǎn)單卻又很有效，是一種實(shí)用性的思維工具。之前在我的mall學(xué)習(xí)教程中就有很多地方用到了，下面我們用PlantUML來(lái)畫個(gè)思維導(dǎo)圖。

• 首先我們需要新建一個(gè)PlantUML文件，選擇思維導(dǎo)圖，這里使用了mall學(xué)習(xí)路線中的大綱視圖，具體內(nèi)容如下；

@startmindmap +[#17ADF1] mall學(xué)習(xí)路線 ++[#lightgreen] 推薦資料 ++[#lightblue] 后端技術(shù)棧 +++_ 項(xiàng)目框架 +++_ 數(shù)據(jù)存儲(chǔ) +++_ 運(yùn)維部署 +++_ 其他 ++[#orange] 搭建項(xiàng)目骨架 ++[#1DBAAF] 項(xiàng)目部署 +++_ Windows下的部署 +++_ Linux下使用Docker部署 +++_ Linux下使用Docker Compose部署 +++_ Linux下使用Jenkins自動(dòng)化部署 --[#1DBAAF] 電商業(yè)務(wù) ---_ 權(quán)限管理模塊 ---_ 商品模塊 ---_ 訂單模塊 ---_ 營(yíng)銷模塊 --[#orange] 技術(shù)要點(diǎn) --[#lightblue] 前端技術(shù)棧 --[#lightgreen] 進(jìn)階微服務(wù) ---_ Spring Cloud技術(shù)棧 ---_ 項(xiàng)目部署 ---_ 技術(shù)要點(diǎn) --[#yellow] 開(kāi)發(fā)工具 --[#lightgrey] 擴(kuò)展學(xué)習(xí) @endmindmap

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

• 本思維導(dǎo)圖關(guān)鍵說(shuō)明如下：

  • 通過(guò)+和-可以表示思維導(dǎo)圖中的節(jié)點(diǎn)，具有方向性；

  • 通過(guò)[#顏色]可以定義節(jié)點(diǎn)的邊框顏色；

  • 通過(guò)_可以去除節(jié)點(diǎn)的邊框；

?

總結(jié)

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

參考資料

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

有道無(wú)術(shù)，術(shù)可成；有術(shù)無(wú)道，止于術(shù)

歡迎大家關(guān)注Java之道公眾號(hào)

好文章，我在看??

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。