日常開發(fā)，一般在設(shè)計階段，我們都需要畫時序圖、用例圖等等。大家平時畫圖的時候，是用draw.io還是processOn呢？用它們畫出的圖，其實都很挺好看的。但是呢，今天田螺哥介紹一個款開源的，畫圖神器！用代碼就能畫圖，配合IDE使用，畫圖高效簡單，信手拈來,還挺美觀的。這個神奇就是PlantUML。

github地址

1. PlantUML 簡介

PlantUML是一個開源項目，可以快速編寫UML圖的工具。它可以支持編碼的方式來生成圖形。可以用來畫時序圖、UML用例圖、類圖、思維導圖、ER圖等等。

PlantUML 畫出來的圖，簡潔美觀，先給大家看看,一個用PlantUML畫出來的登錄時序圖,以及對應畫圖的代碼,如下：

@startuml
title Sequence Diagram of User login
actor User as user
participant "gateway" as gateway
participant "user-core" as userCore
database "MySQL" as mysql
database "Redis" as redis
autonumber
user-> gateway:login request，param：username，password
activate gateway
gateway-> userCore:forward the login request
activate userCore
userCore-> userCore :check the login param
userCore-> mysql:query user info from mysql by username
activate mysql
mysql-> userCore:response with username and password
deactivate mysql
userCore->userCore:compare the requested password with the DB's password
userCore-> userCore: generate an unique token
userCore--> redis: save the token to redis
userCore-> gateway: response with the token
deactivate userCore
gateway-> user: login success with the token
deactivate gateway
@enduml

登錄用例時序圖如下:

2. PlantUML的安裝使用

PlantUML的安裝很方便的.有個插件,名字是:PlantUML Integration,大家可以去IDE的插件市場,搜索安裝即可,如下:

安裝成功后,想快速體驗一般的話.可以新建一個項目,然后新建一個plantUML File文件,然后把我上個小節(jié),登錄時序圖那個代碼復制進去,就可以看到登錄時序圖啦.

3.如何用PlantUML 畫時序圖

什么是時序圖?

時序圖（Sequence Diagram），又名序列圖、循序圖，是一種UML交互圖。它通過描述對象之間發(fā)送消息的時間順序顯示多個對象之間的動態(tài)協(xié)作。它可以表示用例的行為順序，當執(zhí)行一個用例行為時，其中的每條消息對應一個類操作或狀態(tài)機中引起轉(zhuǎn)換的觸發(fā)事件。

如何用PlantUML畫時序圖呢?

你可以先新建一個PlantUML文件

然后選擇Sequence,并定義一個文件名稱

就會有默認的時序圖生成啦.

我們照著登錄時序圖的代碼,來大概說下每個關(guān)鍵詞的意思吧.

@startuml
title Sequence Diagram of User login
actor User as user
participant "gateway" as gateway
participant "user-core" as userCore
database "MySQL" as mysql
database "Redis" as redis
autonumber
user-> gateway:login request，param：username，password
activate gateway
gateway-> userCore:forward the login request
activate userCore
userCore-> userCore :check the login param
userCore-> mysql:query user info from mysql by username
activate mysql
mysql-> userCore:response with username and password
deactivate mysql
userCore->userCore:compare the requested password with the DB's password
userCore-> userCore: generate an unique token
userCore--> redis: save the token to redis
userCore-> gateway: response with the token
deactivate userCore
gateway-> user: login success with the token
deactivate gateway
@enduml

關(guān)鍵詞解釋如下:

title:表示該UML用例圖的標題
actor:表示人形的參與者
as: 使用as 關(guān)鍵字命名參與者。你可以把它理解成定義變量一樣,as后面跟著的就是變量,聲明后,我們后面就可以使用這個變量啦
participant:表示普通的參與者,它跟actor的主要區(qū)別是:形狀不一樣
database:表示參與者形狀是數(shù)據(jù)庫.
顯示的順序是怎么定義的:聲明的參與者順序?qū)⑹牵J的）顯示順序。
autonumber:可以給參與者添加順序
->:表示繪制兩個參與者之間的信息,如果你希望是虛線,可以使用-->.
activate和deactivate:表示參與者的生命線

當然,PlantUML功能挺豐富的,它還可以組合消息,雖然在我的登錄時序圖還沒體現(xiàn)出來. 它提供了alt/else、opt、loop來組合消息.如下:

@startuml
Alice -> Bob: 認證請求
alt 登錄成功
    Bob -> Alice: 認證接受
else 某種失敗情況
    Bob -> Alice: 認證失敗
    group 我自己的標簽
    Alice -> Log : 開始記錄攻擊日志
        loop 1000次
            Alice -> Bob: DNS 攻擊
        end
    Alice -> Log : 結(jié)束記錄攻擊日志
    end
else 另一種失敗
   Bob -> Alice: 請重復
end
@enduml

對應的時序圖如下:

4. 如何用PlantUML 畫UML用例圖

什么是用例圖?

用例圖（英語：use case diagram）是用戶與系統(tǒng)交互的最簡表示形式，展現(xiàn)了用戶和與他相關(guān)的用例之間的關(guān)系。通過用例圖，人們可以獲知系統(tǒng)不同種類的用戶和用例。用例圖也經(jīng)常和其他圖表配合使用。

如何用PlantUML畫UML用例圖呢?

你可以先新建一個PlantUML文件,然后選擇user case,并定義個文件名

就會有默認的UNML用例圖生成啦

我挑官網(wǎng)一個用例圖demo來介紹吧,代碼如下:

@startuml
left to right direction
actor Guest as g
package Professional {
  actor Chef as c
  actor "Food Critic" as fc
}
package Restaurant {
  usecase "Eat Food" as UC1
  usecase "Pay for Food" as UC2
  usecase "Drink" as UC3
  usecase "Review" as UC4
}
fc --> UC4
g --> UC1
g --> UC2
g --> UC3
@enduml

對應生成的用例圖如下:

來看下每個關(guān)鍵詞的意思:

left to right direction:表示從左到右繪制用例圖
actor Guest as g:定義一個人形參與者,變量別名是g.
package Professional:定義一個包package,名字為Professional.package可以用來對用例和角色分組.
usecase "Eat Food" as UC1:定義一個用例,別名為UC1.
fc --> UC4:表示角色fc和用例UC4關(guān)聯(lián)起來.角色和用例之間的關(guān)系,用-->來表示。

5. 如何用plantUML 畫思維導圖

什么是思維導圖?

英文是The Mind Map，又名心智導圖，是表達發(fā)散性思維的有效圖形思維工具，它簡單卻又很有效同時又很高效，是一種實用性的思維工具。

寫了一個簡單的思維導圖,代碼如下:

@startmindmap
* 
** 計算機網(wǎng)絡(luò)面試題
*** TCP/IP十五連問
*** 兩萬字計算機面試題匯總
** MySQL面試題
** Redis面試題
** 大廠面試真題
*** 蝦皮十五連問
*** 五年Oppo后端面試真題
*** 騰訊云十五連問
@endmindmap

plantUML畫思維導圖,還是挺簡單的,大家可以看下效果

6. 如何用planUML 畫活動流程圖

什么是活動圖?

動態(tài)圖（activity diagram，活動圖）是闡明了業(yè)務(wù)用例實現(xiàn)的工作流程。

我畫了一個簡單版的登錄活動流程圖:

@startuml
title Activity Diagram of User login
start
:user request login;
if (is request param null？) then (N)
  :query user info by username;
  if (is user info  null ?) then (N)
    :compare the password;
    if (Is password right?) then (Y)
      :generate a token ,and set it to redis;
      :response with login success;
    else(N)
       :response with wrong password code;
       stop
    endif
  else(Y)
    :response with error userinfo;
    stop
  endif
else(Y)
  :response with error param;
  stop
  endif
stop
@enduml

生成的流程圖如下: