plantuml畫圖實現程式碼畫時序圖UML用例圖

2022-07-19 14:03:26

引言

最近通過程式碼來畫時序圖，UML用例圖，感覺很不錯，所以給大家分享一下。

日常開發，一般在設計階段，我們都需要畫時序圖、用例圖等等。大家平時畫圖的時候，是用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檔案,然後把我上個小節,登入時序圖那個程式碼複製進去,就可以看到登入時序圖啦.

3.如何用PlantUML 畫時序圖

什麼是時序圖?

時序圖（Sequence Diagram），又名序列圖、循序圖，是一種UML互動圖。它通過描述物件之間傳送訊息的時間順序顯示多個物件之間的動態共同作業。它可以表示用例的行為順序，當執行一個用例行為時，其中的每條訊息對應一個類操作或狀態機中引起轉換的觸發事件。

如何用PlantUML畫時序圖呢?

你可以先新建一個PlantUML檔案

然後選擇Sequence,並定義一個檔名稱

就會有預設的時序圖生成啦.

我們照著登入時序圖的程式碼,來大概說下每個關鍵詞的意思吧.

@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

關鍵詞解釋如下:

title:表示該UML用例圖的標題
actor:表示人形的參與者
as: 使用as 關鍵字命名參與者。你可以把它理解成定義變數一樣,as後面跟著的就是變數,宣告後,我們後面就可以使用這個變數啦
participant:表示普通的參與者,它跟actor的主要區別是:形狀不一樣
database:表示參與者形狀是資料庫.
顯示的順序是怎麼定義的:宣告的參與者順序將是（預設的）顯示順序。
autonumber:可以給參與者新增順序
->:表示繪製兩個參與者之間的資訊,如果你希望是虛線,可以使用-->.
activate和deactivate:表示參與者的生命線

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

@startuml
Alice -> Bob: 認證請求
alt 登入成功
    Bob -> Alice: 認證接受
else 某種失敗情況
    Bob -> Alice: 認證失敗
    group 我自己的標籤
    Alice -> Log : 開始記錄攻擊紀錄檔
        loop 1000次
            Alice -> Bob: DNS 攻擊
        end
    Alice -> Log : 結束記錄攻擊紀錄檔
    end
else 另一種失敗
   Bob -> Alice: 請重複
end
@enduml

對應的時序圖如下:

4. 如何用PlantUML 畫UML用例圖

什麼是用例圖?

用例圖（英語：use case diagram）是使用者與系統互動的最簡表示形式，展現了使用者和與他相關的用例之間的關係。通過用例圖，人們可以獲知系統不同種類的使用者和用例。用例圖也經常和其他圖表配合使用。

如何用PlantUML畫UML用例圖呢?

你可以先新建一個PlantUML檔案,然後選擇user case,並定義個檔名

就會有預設的UNML用例圖生成啦

我挑官網一個用例圖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

對應生成的用例圖如下:

來看下每個關鍵詞的意思:

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

5. 如何用plantUML 畫思維導圖

什麼是思維導圖?

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

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

@startmindmap
* 
** 計算機網路面試題
*** TCP/IP十五連問
*** 兩萬字計算機面試題彙總
** MySQL面試題
** Redis面試題
** 大廠面試真題
*** 蝦皮十五連問
*** 五年Oppo後端面試真題
*** 騰訊雲十五連問
@endmindmap

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

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

什麼是活動圖?

動態圖（activity diagram，活動圖）是闡明瞭業務用例實現的工作流程。

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

@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

生成的流程圖如下: