Dayagram ng klase
Ang class diagram ay ang pangunahing building block ng object-oriented modeling. Ginagamit ito sa pangkalahatang conceptual modeling ng application structure, at sa detalyadong modeling na nagko-convert ng modelo sa programming code. Ang class diagram ay maaari ding gamitin sa data modeling. Ang mga class sa class diagram ay kumakatawan sa mga pangunahing elemento at interaksyon sa application, at gayundin sa mga class na kailangang i-program.
Kopyahin
Embed
---
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()
}
Syntax
Class
Nagbibigay ang UML ng mekanismo upang katawanin ang mga class member, tulad ng property at method, at ang kanilang karagdagang impormasyon. Ang isang instance ng class ay binubuo ng tatlong bahagi:
- Ang tuktok ay naglalaman ng pangalan ng class. Nakasentro itong naka-print nang bold, na may malaking unang titik. Maaari rin itong maglaman ng opsyonal na comment text na naglalarawan sa katangian ng class.
- Ang gitna ay naglalaman ng mga property ng class. Nakahanay sila sa kaliwa, at maliit ang unang titik.
- Ang ibaba ay naglalaman ng mga operasyong maaaring isagawa ng class. Nakahanay din sila sa kaliwa, at maliit ang unang titik.
Kopyahin
Embed
---
title: Bank example
---
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
Tukuyin ang isang class
May dalawang paraan upang tukuyin ang isang class
- Tahasan na gamitin ang class syntax (tulad ng class Animal), tutukuyin nito ang class na Animal.
- Sa pamamagitan ng isang relasyon, sabay nitong tinutukoy ang dalawang class at ang relasyon sa pagitan nila (tulad ng Vehicle <|-- Car).
Kopyahin
Embed
classDiagram
class Animal
Vehicle <|-- Car
Convention sa pagpapangalan: ang pangalan ng class ay maaari lamang binubuo ng alphanumeric na karakter (kabilang ang unicode), underscore (_), at gitling (-).
Label ng class
Kung kailangan mong magbigay ng label para sa class, maaari mong gamitin ang sumusunod na syntax:
Kopyahin
Embed
classDiagram
class Animal["Animal with a label"]
class Car["Car with *! symbols"]
Animal --> Car
Maaari mo ring gamitin ang backtick (``) upang i-escape ang mga espesyal na karakter sa label:
Kopyahin
Embed
classDiagram
class `Animal Class!`
class `Car Class`
`Animal Class!` --> `Car Class`
Tukuyin ang mga member ng class
Nagbibigay ang UML ng mekanismo upang katawanin ang mga class member (tulad ng property at method) at ang karagdagang impormasyon tungkol sa kanila.
Kinikilala ng Mermaid ang property at function o method batay sa pagkakaroon ng parenthesis (). Ang may () ay itinuturing na function o method, at ang iba ay itinuturing na property.
May dalawang paraan upang tukuyin ang mga member ng class, anuman ang syntax na gamitin upang tukuyin ang member, ang resultang output ay pareho. Ang dalawang magkaibang paraan ay:
1. Gumamit ng colon (:) na sinusundan ng pangalan ng member upang iugnay ang member ng class, kapaki-pakinabang ito para sa pagtukoy ng isang member sa isang pagkakataon. Halimbawa:
Kopyahin
Embed
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
2. Gumamit ng curly braces {} upang iugnay ang mga member ng class, kung saan ang mga member ay nakapangkat sa loob ng curly braces. Angkop para sa pagtukoy ng maraming member nang sabay. Halimbawa:
Kopyahin
Embed
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
Return type
Maaari mong tukuyin ang uri ng data na ibabalik sa dulo ng depinisyon ng method o function. Tandaan: dapat may espasyo sa pagitan ng huling ')' at ng return type. Isang halimbawa:
Kopyahin
Embed
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawal(amount) int
}
Generic type
Ang generic type ay maaaring katawanin bilang bahagi ng class definition, o gamitin sa class member o return type. Upang kumatawan sa isang item bilang generic type, ilagay ang type sa loob ng tilde (~). Sinusuportahan ang nested type declaration, tulad ng List<List<int>> , ngunit kasalukuyang hindi sinusuportahan ang generic type na naglalaman ng kuwit, tulad ng List<List<K, V>> .
Kopyahin
Embed
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~~
Visibility
Upang ilarawan ang visibility ng property o method/function, maaari kang gumamit ng opsyonal na simbolo bago ang pangalan ng member:
- + Public
- - Private
- # Protected
- ~ Internal
Tukuyin ang relasyon
Ang relasyon ay isang pangkalahatang termino na sumasaklaw sa mga partikular na uri ng logical na koneksyon na matatagpuan sa class diagram at object diagram.
Kopyahin
Embed
[classA][Arrow][ClassB]
UML为类定义了八种不同类型的关系：
| Uri | Paglalarawan |
|---|---|
| <|-- | Inheritance |
| *-- | Composition |
| o-- | Aggregation |
| --> | Association |
| -- | Link (solid) |
| ..> | Dependency |
| ..|> | Realization |
| .. | Link (dashed) |
Kopyahin
Embed
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
Maaari nating gamitin ang label upang ilarawan ang katangian ng relasyon sa pagitan ng dalawang class. Bukod dito, ang arrow ay maaari ring gamitin nang baligtad:
Kopyahin
Embed
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)
Label ng relasyon
Maaari kang magdagdag ng label text sa relasyon:
Kopyahin
Embed
[classA][Arrow][ClassB]:LabelText
Kopyahin
Embed
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
Bidirectional na relasyon
Ang bidirectional na relasyon ay lohikal na maaaring kumatawan sa N:M association:
Kopyahin
Embed
classDiagram
Animal <|--|> Zebra
语法如下：
Kopyahin
Embed
[Relation Type][Link][Relation Type]
其中 Relation Type 是以下之一：
| Uri | Paglalarawan |
|---|---|
| <| | Inheritance |
| * | Composition |
| o | Aggregation |
| > | Association |
| < | Association |
| |> | Realization |
Ang Link ay isa sa mga sumusunod:
| Uri | Paglalarawan |
|---|---|
| -- | Solid na linya |
| .. | Dashed na linya |
Lollipop interface
Ang class ay maaari ring bigyan ng isang espesyal na uri ng relasyon, na tumutukoy ng lollipop interface para sa class. Ang lollipop interface ay tinutukoy gamit ang sumusunod na syntax:
- bar ()-- foo
- foo --() bar
Ang interface (bar) na may lollipop ay konektado sa class (foo).
Tandaan: ang bawat tinukoy na interface ay natatangi, ang layunin ay hindi ibahagi sa pagitan ng mga class, at hindi pinapayagan ang maraming koneksyon na tumuturo dito.
Kopyahin
Embed
classDiagram
bar ()-- foo
Kopyahin
Embed
classDiagram
class Class01 {
int amount
draw()
}
Class01 --() bar
Class02 --() bar
foo ()-- Class01
Tukuyin ang namespace
Ang namespace ay nagpapangkat ng mga class.
Kopyahin
Embed
classDiagram
namespace BaseShapes {
class Triangle
class Rectangle {
double width
double height
}
}
Cardinality/multiplicity ng relasyon
Ang multiplicity o cardinality sa class diagram ay kumakatawan sa bilang ng mga instance ng isang class na maaaring maiugnay sa mga instance ng isa pang class. Halimbawa, ang bawat kumpanya ay may isa o higit pang empleyado, hindi maaaring zero, at ang bawat empleyado ay kasalukuyang nagtatrabaho sa zero o isang kumpanya.
Ang multiplicity notation ay inilalagay malapit sa dulo ng association.
Ang iba't ibang opsyon sa cardinality ay:
- 1 Isa lamang
- 0..1 0 o 1
- 1..* 1 o higit pa
- * 0 o 1 o higit pa
- n n (kung saan n>1)
- 0..n 0 hanggang n (kung saan n>1)
- 1..n 1 hanggang n (kung saan n>1)
Ang cardinality ay maaaring madaling tukuyin sa pamamagitan ng paglalagay ng text option sa double quotes "" bago o pagkatapos ng isang ibinigay na arrow. Halimbawa:
Kopyahin
Embed
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
Kopyahin
Embed
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
Annotation ng class
Maaari mong i-annotate ang isang class gamit ang marker, upang magbigay ng karagdagang metadata tungkol sa class. Ito ay maaaring mas malinaw na magpahiwatig ng katangian ng class. Kabilang sa ilang karaniwang annotation ang:
- <<Interface>> kumakatawan sa isang interface class
- <<Abstract>> kumakatawan sa isang abstract class
- <<Service>> kumakatawan sa isang service class
- <<Enumeration>> kumakatawan sa enumeration
Ang annotation ay tinutukoy sa pagitan ng << sa simula at >> sa dulo. May tatlong paraan upang magdagdag ng annotation sa class, ang output ng tatlong paraan ay pareho:
- Inline sa class definition
Kopyahin
Embed
classDiagram
class Shape <<interface>>
Sa hiwalay na linya pagkatapos tukuyin ang class:
Kopyahin
Embed
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
- Sa nested na structure ng class definition:
Kopyahin
Embed
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
Komento
Maaari kang maglagay ng komento sa class diagram, at hindi papansinin ng editor ang komentong ito. Ang komento ay kailangang sumakop sa isang buong linya, at dapat magsimula sa double percent sign (%%). Ang lahat ng teksto hanggang sa susunod na linya ay ituturing na komento, kabilang ang anumang class diagram syntax.
Kopyahin
Embed
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
<<interface>>
noOfVertices
draw()
}
Itakda ang direksyon ng chart
Maaari mong gamitin ang direction statement upang itakda ang rendering direction ng class diagram:
Kopyahin
Embed
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
Interaction
Maaari kang mag-bind ng click event sa node. Ang click event ay maaaring mag-trigger ng JavaScript callback function, o magbukas ng link na maglo-load sa bagong browser tab. Tandaan: hindi pinapagana ang feature na ito kapag gumagamit ng securityLevel='strict', at pinapagana kapag gumagamit ng securityLevel='loose'.
Maaari mong tukuyin ang mga operasyong ito sa isang hiwalay na linya pagkatapos ng lahat ng class declaration.
Kopyahin
Embed
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
- Ang action ay link o callback, depende sa uri ng interaksyon na gusto mong tawagin.
- Ang className ay ang node id na nauugnay sa operasyon.
- Ang reference ay maaaring URL link, o pangalan ng callback function.
- (opsyonal) Ang tooltip ay isang string na ipinapakita kapag nag-hover ang mouse sa elemento.
- Ang callback function ay tatawagin gamit ang nodeId bilang parameter.
Tandaan
Maaari mong gamitin ang note "line1 line2" upang magdagdag ng komento sa chart. Maaari mong gamitin ang note for <CLASS NAME> "line1 line2" upang magdagdag ng komento para sa partikular na class.
Halimbawa
Kopyahin
Embed
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
URL link:
Kopyahin
Embed
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"
Configuration
Member box
Maaari mong itago ang empty member box ng class node, ito ay ginagawa sa pamamagitan ng pagbabago ng hideEmptyMembersBox value sa class diagram configuration.
Kopyahin
Embed
---
config:
class:
hideEmptyMembersBox: true
---
classDiagram
class Duck
