แผนภาพคลาส
แผนภาพคลาสเป็นส่วนประกอบหลักของการสร้างแบบจำลองเชิงวัตถุ ใช้สำหรับการสร้างแบบจำลองแนวคิดทั่วไปของโครงสร้างแอปพลิเคชัน ตลอดจนการสร้างแบบจำลองโดยละเอียดเพื่อแปลงแบบจำลองเป็นโค้ดโปรแกรม แผนภาพคลาสยังใช้สำหรับการสร้างแบบจำลองข้อมูลได้ด้วย คลาสในแผนภาพคลาสแสดงทั้งองค์ประกอบหลักและการโต้ตอบในแอปพลิเคชัน และคลาสที่ต้องเขียนโปรแกรม
คัดลอก
ฝัง
---
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
คุณยังสามารถใช้เครื่องหมาย backtick (``) เพื่อหลีกอักขระพิเศษในป้ายกำกับได้:
คัดลอก
ฝัง
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>> แสดง enum
คำอธิบายประกอบถูกกำหนดใน << ที่ต้นและ >> ที่ท้าย มีสามวิธีในการเพิ่มคำอธิบายประกอบให้กับคลาส โดยผลลัพธ์ของทั้งสามวิธีเหมือนกัน:
- แบบอินไลน์กับการกำหนดคลาส
คัดลอก
ฝัง
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
การโต้ตอบ
สามารถผูกเหตุการณ์คลิกให้กับโหนดได้ เหตุการณ์คลิกสามารถเรียกใช้ฟังก์ชัน callback ของ 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 หรือชื่อของฟังก์ชัน callback ก็ได้
- (ตัวเลือก) tooltip เป็นสตริงที่แสดงเมื่อวางเมาส์เหนือองค์ประกอบ
- ฟังก์ชัน callback จะถูกเรียกโดยมี 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
