大家好，我是舒哥！

我們都知道在軟件工程中有各種各樣的UML圖，比如：用例圖、時序圖等等。 很多時候我們使用draw.io等繪圖工具進行繪圖，但是它們存在這樣的問題：各種樣式不規(guī)范，需要拖拽，效率低下。

雖然這種問題和我們用Word的時候差不多，所以就誕生了。 于是我想：能不能像寫代碼一樣畫圖呢？ 果然，你能想到的，古人或許早就想到了，甚至早就領(lǐng)悟到了！ 實際上有一個名為 的圖表組件，它允許您在代碼中繪制 UML 圖。

本文將做一個簡單的介紹，并介紹如何使用它進行繪圖intellij idea畫uml圖，最后介紹如何使用它來繪制幾個常見的UML圖。

哪個是？

是一個可以讓你快速編譯UML圖的組件，這是官網(wǎng)的介紹。 它可以讓您編寫常見的 UML 圖，例如：

除此之外，它還支持一些非 UML 圖，例如：

有關(guān)它的更多信息可以在官方網(wǎng)站上找到。

如何使用？

使用繪圖有兩種形式，一種是使用官網(wǎng)的在線編輯器，另一種是使用IDEA的插件進行編譯。 總的來說，使用起來比較方便。 可以保存繪圖代碼，實時查看療效，復制生成的圖片。 為此，我們這次將重點介紹如何使用IDEA來繪制UML圖。

安裝插件

使用繪圖只需要在IDEA中安裝插件即可，如右圖所示：

安裝完成后，重啟IDEA。

基本句型

該文件后綴為.puml，我們只需要新建一個.puml文件即可。 對于.puml 文件，其格式以@開頭并以@結(jié)尾。 也可以使用title設置UML圖的標題，使用'單冒號插入代碼注釋。 一個基本圖的代碼框架如下：

@startuml

title:?標題

'?注釋（用一個單引號標識）
'?UML?圖邏輯

@enduml

不同類型的 UML 圖有不同的句型。 建議使用相應的UML圖時瀏覽官網(wǎng)。 現(xiàn)在學習和使用的效率是最高的，不用逼我去記。

常見 UML 圖示例

這里放幾張我經(jīng)常用到的UML圖，分享一個代碼示例，可以方便大家的編繪。 對我來說，我經(jīng)常使用用例圖、序列圖和 ER 圖。

用例圖

用例圖是表達用戶與系統(tǒng)交互的最簡單方式，它顯示了用戶與其他相關(guān)用例之間的關(guān)系。 簡單地說，通過用例圖，我們可以知道用戶與系統(tǒng)之間、系統(tǒng)與系統(tǒng)之間的功能。 下面是一個博客系統(tǒng)管理后臺的用例圖：

對應代碼如下：

@startuml
'?https://plantuml.com/use-case-diagram
title?文章管理用例圖
left?to?right?direction
用戶?-->?文章管理
rectangle?文章管理{
????(文章管理)?-->?(查詢文章列表):<>
????(文章管理)?-->?(新增文章):<>
????(文章管理)?-->?(查看文章內(nèi)容):<>
????(文章管理)?-->?(修改文章內(nèi)容):<>
}
用戶?-->?分類管理
rectangle?分類管理{
????(分類管理)?-->?(查詢分類列表):<>
????(分類管理)?-->?(分類文章):<>
????(分類管理)?-->?(查看分類):<>
????(分類管理)?-->?(修改分類):<>
}
@enduml

請注意，您需要安裝軟件才能在 Mac 上使用它。 如果上述代碼難以正常渲染圖形，可能是機器沒有安裝軟件。 可以參考這篇文章解決：Can'-Stack

時序圖

時序圖用于標記一個操作的全過程。 通過時序圖，可以清楚的知道一個操作的全過程和相關(guān)的參與者。 下面是一個文章內(nèi)容改變的時序圖：

上圖對應的代碼如下：

@startuml
'https://plantuml.com/sequence-diagram

title?修改文章內(nèi)容時序圖
autonumber

participant?用戶
participant?前端頁面
participant?管理后臺

用戶?->?前端頁面:?點擊修改文章按鈕
前端頁面?->?前端頁面:?修改文章內(nèi)容
前端頁面?->?管理后臺:?發(fā)出請求
管理后臺?->?管理后臺:?業(yè)務邏輯操作
管理后臺?->?前端頁面:?返回請求結(jié)果
@enduml

ER圖

ER圖是用來表示數(shù)據(jù)庫實體之間關(guān)系的圖。 通過ER圖，可以快速理清實體之間的關(guān)系。 下面是文章、分類、標簽的ER圖。 如果有fork，則表示N，如果沒有fork，則表示1。比如與posts的關(guān)系就是1:N。

上圖對應的代碼如下：

@startuml
title?文章、分類、標簽?ER?圖

entity?category?{
????*?id:?number?<>
????---
????*?name:?varchar
}

entity?posts?{
????*?id:?number?<>
????---
????*?category_id?<>
}

entity?tags?{
????*?id:?number?<>
????---
????*?name:?varchar
}

'?category:posts?=?1:N
category?||--|{?posts
'?posts:tags?=?N:N
posts?}|--|{?tags
@enduml

對于ER圖來說，比較復雜的是實體之間關(guān)系的表示。 事實上，定義了幾個標志來實現(xiàn)此功能。 大致規(guī)則如下：

比如：它和posts是1:N的關(guān)系，用||--|{posts表示這么久。

總結(jié)

對于它intellij idea畫uml圖，一開始只需要安裝插件搭建本地運行環(huán)境，然后就可以掌握基本的句型。 然后根據(jù)自己的需要學習UML圖對應的句型，靈活運用即可。

如有侵權(quán)請聯(lián)系刪除！