類別圖
類別圖是物件導向建模的主要建構區塊。它用於應用結構的一般概念建模,以及將模型轉換為程式碼的詳細建模。 類別圖也可用於資料建模。類別圖中的類別既表示應用程式中的主要元素和互動,也表示需要程式設計的類別。
複製
嵌入
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly
can swim
can dive
can help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
語法
類別
UML 提供了表示類別成員(例如屬性和方法)及其附加資訊的機制。類別的單一執行個體包含三個部分:
- 頂部包含類別的名稱。它以粗體居中列印,首字母大寫。它也可能包含選用的註解文字,描述類別的性質。
- 中間包含類別的屬性。它們靠左對齊,且首字母小寫。
- 底部包含類別可以執行的操作。它們也是靠左對齊的,並且首字母小寫。
複製
嵌入
---
title: Bank example
---
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
定義一個類別
定義類別有兩種方法
- 明確使用 class 語法(如 class Animal),這將定義 Animal 類別。
- 透過一種關係,它同時定義兩個類別及它們之間的關係(如 Vehicle <|-- Car)。
複製
嵌入
classDiagram
class Animal
Vehicle <|-- Car
命名規範:類別名稱只能由英數字元(包括 unicode)、底線(_)和連字號 (-) 組成。
類別標籤
如果你需要為類別提供標籤,可以使用以下語法:
複製
嵌入
classDiagram
class Animal["Animal with a label"]
class Car["Car with *! symbols"]
Animal --> Car
你還可以使用反引號 (``) 來逸出標籤中的特殊字元:
複製
嵌入
classDiagram
class `Animal Class!`
class `Car Class`
`Animal Class!` --> `Car Class`
定義類別的成員
UML 提供了表示類別成員(如屬性和方法)以及關於它們的附加資訊的機制。
Mermaid 會根據是否存在小括號 () 來區分屬性和函式或方法。帶有 () 的會被視為函式或方法,其餘的都被視為屬性。
有兩種方法可以定義類別的成員,無論使用哪種語法來定義成員,輸出結果都是相同的。兩種不同的方式是:
1、使用冒號(:)後跟成員名稱來關聯類別的成員,這對於一次定義一個成員很有用。例如:
複製
嵌入
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
2、使用大括號 {} 關聯類別的成員,其中成員分組在大括號內。適合一次定義多個成員。例如:
複製
嵌入
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
傳回類型
你可以在方法或函式定義的末尾指定將傳回的資料類型。注意:最後的 ')' 和傳回類型之間必須有一個空格。一個例子:
複製
嵌入
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawal(amount) int
}
泛型
泛型可以作為類別定義的一部分表示,也可以用於類別成員或傳回類型。為了將一個項目表示為泛型,請將該類型用波浪號(~)括起來。支援巢狀類型宣告,例如 List<List<int>>,但目前不支援包含逗號的泛型,如 List<List<K, V>>。
複製
嵌入
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
Square : +getDistanceMatrix() List~List~int~~
可見性
為了描述屬性 或方法/函式的可見性,可以在該成員名稱之前使用選用符號表示:
- + 公開
- - 私有
- # 受保護
- ~ 內部
定義關係
關係是一個通用術語,涵蓋類別圖和物件圖上發現的特定類型的邏輯連接。
複製
嵌入
[classA][Arrow][ClassB]
UML为类定义了八种不同类型的关系:
| 類型 | 描述 |
|---|---|
| <|-- | 繼承 |
| *-- | 組合 |
| o-- | 聚合 |
| --> | 關聯 |
| -- | 連結(實心) |
| ..> | 相依性 |
| ..|> | 實現 |
| .. | 連結(虛線) |
複製
嵌入
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
我們可以使用標籤來描述兩個類別之間關係的性質。此外,箭頭也可以反向使用:
複製
嵌入
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
關係標籤
可以為關係新增標籤文字:
複製
嵌入
[classA][Arrow][ClassB]:LabelText
複製
嵌入
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
雙向關係
雙向關係在邏輯上可以表示 N:M 關聯:
複製
嵌入
classDiagram
Animal <|--|> Zebra
语法如下:
複製
嵌入
[Relation Type][Link][Relation Type]
其中 Relation Type 是以下之一:
| 類型 | 描述 |
|---|---|
| <| | 繼承 |
| * | 組合 |
| o | 聚合 |
| > | 關聯 |
| < | 關聯 |
| |> | 實現 |
Link 是以下之一:
| 類型 | 描述 |
|---|---|
| -- | 實線 |
| .. | 虛線 |
棒棒糖介面
類別還可以被賦予一個特殊的關係類型,該類型為類別定義了一個棒棒糖介面。棒棒糖介面使用以下語法定義:
- bar ()-- foo
- foo --() bar
帶有棒棒糖的介面(bar)連接到類別(foo)。
注意:每個定義的介面都是唯一的,目的是不在類別之間共用,也不允許多個連接指向它。
複製
嵌入
classDiagram
bar ()-- foo
複製
嵌入
classDiagram
class Class01 {
int amount
draw()
}
Class01 --() bar
Class02 --() bar
foo ()-- Class01
定義命名空間
命名空間對類別進行分組。
複製
嵌入
classDiagram
namespace BaseShapes {
class Triangle
class Rectangle {
double width
double height
}
}
關係的基數/多重性
類別圖中的多重性或基數表示一個類別的執行個體可以與另一個類別的執行個體關聯的數量。例如,每個公司都會有一名或多名員工,不能是零,而每個員工目前任職於零個或一個公司。
多重性符號放置在關聯的末尾附近。
不同的基數選項是:
- 1 只有 1 個
- 0..1 0 個或 1 個
- 1..* 1 個或多個
- * 0 個或 1 個或多個
- n n(其中 n>1)
- 0..n 0 到 n(其中 n>1)
- 1..n 1 到 n(其中 n>1)
基數可以透過在給定箭頭的前面或後面將文字選項用雙引號「」括起來來輕鬆定義。例如:
複製
嵌入
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
複製
嵌入
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
類別的註解
可以使用標記對類別進行註解,以提供有關該類別的附加中繼資料。這可以更清楚地表明類別的性質。一些常見的註解包括:
- <<Interface>> 表示一個介面類別
- <<Abstract>> 表示一個抽象類別
- <<Service>> 表示一個服務類別
- <<Enumeration>> 表示列舉
註解在開頭的 << 和結尾的 >> 中進行定義。有三種方法可以向類別新增註解,三種方法的輸出都是相同的:
- 內嵌與類別定義
複製
嵌入
classDiagram
class Shape <<interface>>
在定義類別之後的單獨一行中:
複製
嵌入
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
- 在類別定義的巢狀結構中:
複製
嵌入
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
註解
可以在類別圖中輸入註解,編輯器將忽略該註解。註解需要獨佔一行,並且必須以雙百分比符號 (%%) 開頭。直到下一行的所有文字都會被視為註解,包括任何類別圖語法。
複製
嵌入
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
<<interface>>
noOfVertices
draw()
}
設定圖表的方向
你可以使用方向陳述式來設定類別圖渲染的方向:
複製
嵌入
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
互動
可以為節點繫結點擊事件。點擊事件可以觸發 JavaScript 回呼函式,也可以開啟一個將在新瀏覽器分頁中載入的連結。注意:使用 securityLevel='strict' 時停用此功能,使用 securityLevel='loose' 時啟用此功能。
你可以在所有類別宣告之後的單獨一行上定義這些操作。
複製
嵌入
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
- action 是 link 或 callback,具體取決於你想要呼叫的互動類型。
- className 是與操作關聯的節點 id。
- reference 可以是 URL 連結,也可以是回呼函式的名稱。
- (選用) 工具提示是當滑鼠停留在元素上時顯示的字串。
- 回呼函式將以 nodeId 作為參數被呼叫。
注意
可以使用 note "line1 line2" 在圖表上新增註解。可以使用 note for <CLASS NAME> "line1 line2" 為特定類別新增註解。
範例
複製
嵌入
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
網址連結:
複製
嵌入
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
設定
成員框
可以隱藏類別節點的空成員框,這是透過變更類別圖設定的 hideEmptyMembersBox 值來完成的。
複製
嵌入
---
config:
class:
hideEmptyMembersBox: true
---
classDiagram
class Duck