大家好，我是舒哥！

我們都知道軟件工程中有各種各樣的UML圖，比如用例圖、序列圖等，很多時(shí)候我們使用draw.io或者draw.io等繪圖工具來畫圖，但是它們都存在這樣的問題：樣式多樣、不標(biāo)準(zhǔn)化，需要拖拽，效率低下。

其實(shí)這些問題和我們使用Word時(shí)遇到的問題類似，所以. 于是我想：我能像寫代碼一樣畫圖嗎？ 果然，你能想到的事情intellij idea畫uml圖，可能古人都想到過，甚至實(shí)現(xiàn)過！ 實(shí)際上有一個(gè)名為 的繪圖組件，它允許您在代碼中繪制 UML 圖。

本文將簡(jiǎn)單介紹一下，并介紹如何使用它來畫圖。 最后介紹如何使用它來繪制幾種常見的UML圖。

什么是？

它是一個(gè)允許您快速編寫 UML 圖的組件。 這是官網(wǎng)上的介紹。 它允許您編寫常見的 UML 圖，如下所示：

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

更多相關(guān)信息可以咨詢官方網(wǎng)站獲取。

如何使用？

使用繪圖有兩種方式，一種是使用官網(wǎng)的在線編輯器，另一種是使用IDEA插件來編寫。 一般來說，使用起來比較方便。 您可以保存繪圖代碼，實(shí)時(shí)查看效果，并復(fù)制生成的圖像。 因此，這次我們重點(diǎn)討論如何使用IDEA來繪制UML圖。

安裝插件

使用Paint只需要在IDEA中安裝插件即可，如下圖：

安裝完成后，重啟IDEA即可。

基本語法

該文件有.puml后綴，我們只需要新建一個(gè).puml文件即可。 對(duì)于 .puml 文件，格式以 @ 開頭并以 @ 結(jié)尾。 還可以使用title設(shè)置UML圖的標(biāo)題，并使用'單引號(hào)插入代碼注釋。 一個(gè)基本的圖代碼框架如下：

@startuml

title:?標(biāo)題

'?注釋（用一個(gè)單引號(hào)標(biāo)識(shí)）
'?UML?圖邏輯

@enduml

不同類型的 UML 圖具有不同的語法。 使用相應(yīng)的UML圖時(shí)建議閱讀官網(wǎng)。 現(xiàn)在學(xué)習(xí)和使用它們是最有效的。 沒有必要強(qiáng)迫我記住它們。

常用UML圖示例

下面是我常用的幾張UML圖，分享一個(gè)代碼示例，方便大家寫圖。 對(duì)我來說，我通常使用用例圖、序列圖和 ER 圖。

用例圖

用例圖是用戶與系統(tǒng)交互的最簡(jiǎn)單的表達(dá)。 它顯示了用戶和其他相關(guān)用例之間的關(guān)系。 簡(jiǎn)單來說，通過用例圖我們可以了解用戶與系統(tǒng)、系統(tǒng)與系統(tǒng)之間的功能。 以下是博客系統(tǒng)管理后端的用例圖：

對(duì)應(yīng)的代碼如下：

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

請(qǐng)注意，需要安裝軟件才能在 Mac 上使用。 如果以上代碼無法正常渲染圖形，可能是機(jī)器上沒有安裝該軟件。 可以參考這篇文章解決問題：Can't with in - Stack

時(shí)序圖

序列圖用于標(biāo)識(shí)操作的整個(gè)過程。 通過時(shí)序圖，您可以清楚地了解一次操作的整個(gè)流程以及相關(guān)參與者。 以下是修改文章內(nèi)容的界面時(shí)序圖：

上圖對(duì)應(yīng)的代碼如下：

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

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

participant?用戶
participant?前端頁面
participant?管理后臺(tái)

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

ER圖

ER圖是用來表示數(shù)據(jù)庫實(shí)體之間關(guān)系的圖。 ER圖可以快速理清實(shí)體之間的關(guān)系。 以下是文章、類別和標(biāo)簽的 ER 圖。 如果線有分叉，則代表N，如果沒有分叉intellij idea畫uml圖，則代表1。例如與posts的關(guān)系是1:N。

上圖對(duì)應(yīng)的代碼如下：

@startuml
title?文章、分類、標(biāo)簽?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

對(duì)于ER圖來說，更復(fù)雜的是實(shí)體之間關(guān)系的表示。 事實(shí)上，定義了幾個(gè)標(biāo)志來實(shí)現(xiàn)此功能。 一般規(guī)則如下：

例如：與posts的關(guān)系是1:N，所以使用||--|{ posts。

總結(jié)

對(duì)于你來說，一開始只需要安裝插件搭建好本地運(yùn)行環(huán)境，然后掌握基本語法即可。 然后，根據(jù)自己的需要學(xué)習(xí)UML圖對(duì)應(yīng)的語法，學(xué)而用之。

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