Diagram Kelas
Diagram kelas adalah blok bangunan utama untuk pemodelan berorientasi objek. Diagram ini digunakan untuk pemodelan konseptual umum struktur aplikasi, serta pemodelan terperinci untuk mengonversi model menjadi kode pemrograman. Diagram kelas juga dapat digunakan untuk pemodelan data. Kelas dalam diagram kelas merepresentasikan baik elemen utama dan interaksi dalam aplikasi, maupun kelas yang perlu diprogram.
Salin
Sematkan
---
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()
}
Sintaks
Kelas
UML menyediakan mekanisme untuk merepresentasikan anggota kelas, misalnya properti dan metode, beserta informasi tambahannya. Satu instance kelas terdiri dari tiga bagian:
- Bagian atas berisi nama kelas. Nama ini dicetak tebal dan rata tengah, dengan huruf awal kapital. Bagian ini juga dapat berisi teks komentar opsional yang mendeskripsikan sifat kelas.
- Bagian tengah berisi properti kelas. Properti ini rata kiri, dengan huruf awal kecil.
- Bagian bawah berisi operasi yang dapat dilakukan kelas. Operasi ini juga rata kiri dan huruf awalnya kecil.
Salin
Sematkan
---
title: Bank example
---
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
Mendefinisikan sebuah kelas
Ada dua cara untuk mendefinisikan kelas
- Secara eksplisit menggunakan sintaks class (seperti class Animal), yang akan mendefinisikan kelas Animal.
- Melalui suatu relasi, yang sekaligus mendefinisikan dua kelas beserta relasi di antara keduanya (seperti Vehicle <|-- Car).
Salin
Sematkan
classDiagram
class Animal
Vehicle <|-- Car
Aturan penamaan: nama kelas hanya dapat terdiri dari karakter alfanumerik (termasuk unicode), garis bawah (_), dan tanda hubung (-).
Label kelas
Jika Anda perlu memberikan label pada kelas, Anda dapat menggunakan sintaks berikut:
Salin
Sematkan
classDiagram
class Animal["Animal with a label"]
class Car["Car with *! symbols"]
Animal --> Car
Anda juga dapat menggunakan backtick (``) untuk meloloskan karakter khusus dalam label:
Salin
Sematkan
classDiagram
class `Animal Class!`
class `Car Class`
`Animal Class!` --> `Car Class`
Mendefinisikan anggota kelas
UML menyediakan mekanisme untuk merepresentasikan anggota kelas (seperti properti dan metode) beserta informasi tambahan tentangnya.
Mermaid membedakan properti dari fungsi atau metode berdasarkan ada tidaknya tanda kurung (). Yang memiliki () dianggap sebagai fungsi atau metode, sedangkan sisanya dianggap sebagai properti.
Ada dua cara untuk mendefinisikan anggota kelas; tidak peduli sintaks mana yang digunakan untuk mendefinisikan anggota, hasil keluarannya sama. Dua cara yang berbeda tersebut adalah:
1. Mengaitkan anggota kelas dengan menggunakan titik dua (:) diikuti nama anggota, ini berguna untuk mendefinisikan satu anggota sekaligus. Misalnya:
Salin
Sematkan
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
2. Mengaitkan anggota kelas dengan menggunakan kurung kurawal {}, di mana anggota dikelompokkan di dalam kurung kurawal. Cocok untuk mendefinisikan beberapa anggota sekaligus. Misalnya:
Salin
Sematkan
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
Jenis kembalian
Anda dapat menentukan jenis data yang akan dikembalikan di akhir definisi metode atau fungsi. Catatan: harus ada satu spasi antara ')' terakhir dan jenis kembalian. Sebuah contoh:
Salin
Sematkan
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawal(amount) int
}
Jenis generik
Jenis generik dapat direpresentasikan sebagai bagian dari definisi kelas, dan juga dapat digunakan untuk anggota kelas atau jenis kembalian. Untuk merepresentasikan suatu item sebagai jenis generik, bungkus jenis tersebut dengan tanda tilde (~). Deklarasi jenis bersarang didukung, misalnya List<List<int>>, tetapi jenis generik yang mengandung koma, seperti List<List<K, V>>, saat ini tidak didukung.
Salin
Sematkan
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~~
Visibilitas
Untuk mendeskripsikan visibilitas properti atau metode/fungsi, Anda dapat menggunakan simbol opsional sebelum nama anggota tersebut:
- + Publik
- - Privat
- # Terlindungi
- ~ Internal
Mendefinisikan relasi
Relasi adalah istilah umum yang mencakup jenis koneksi logis tertentu yang ditemukan pada diagram kelas dan diagram objek.
Salin
Sematkan
[classA][Arrow][ClassB]
UML为类定义了八种不同类型的关系：
| Jenis | Deskripsi |
|---|---|
| <|-- | Pewarisan |
| *-- | Komposisi |
| o-- | Agregasi |
| --> | Asosiasi |
| -- | Tautan (padat) |
| ..> | Dependensi |
| ..|> | Implementasi |
| .. | Tautan (putus-putus) |
Salin
Sematkan
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
Kita dapat menggunakan label untuk mendeskripsikan sifat relasi antara dua kelas. Selain itu, panah juga dapat digunakan secara terbalik:
Salin
Sematkan
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 relasi
Anda dapat menambahkan teks label pada relasi:
Salin
Sematkan
[classA][Arrow][ClassB]:LabelText
Salin
Sematkan
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
Relasi dua arah
Relasi dua arah secara logis dapat merepresentasikan asosiasi N:M:
Salin
Sematkan
classDiagram
Animal <|--|> Zebra
语法如下：
Salin
Sematkan
[Relation Type][Link][Relation Type]
其中 Relation Type 是以下之一：
| Jenis | Deskripsi |
|---|---|
| <| | Pewarisan |
| * | Komposisi |
| o | Agregasi |
| > | Asosiasi |
| < | Asosiasi |
| |> | Implementasi |
Link adalah salah satu dari berikut:
| Jenis | Deskripsi |
|---|---|
| -- | Garis padat |
| .. | Garis putus-putus |
Antarmuka lolipop
Kelas juga dapat diberi jenis relasi khusus, yang mendefinisikan antarmuka lolipop untuk kelas. Antarmuka lolipop didefinisikan menggunakan sintaks berikut:
- bar ()-- foo
- foo --() bar
Antarmuka dengan lolipop (bar) terhubung ke kelas (foo).
Catatan: setiap antarmuka yang didefinisikan bersifat unik, dengan tujuan agar tidak dibagikan antar kelas dan tidak mengizinkan beberapa koneksi mengarah padanya.
Salin
Sematkan
classDiagram
bar ()-- foo
Salin
Sematkan
classDiagram
class Class01 {
int amount
draw()
}
Class01 --() bar
Class02 --() bar
foo ()-- Class01
Mendefinisikan ruang nama
Ruang nama mengelompokkan kelas.
Salin
Sematkan
classDiagram
namespace BaseShapes {
class Triangle
class Rectangle {
double width
double height
}
}
Kardinalitas/multiplikitas relasi
Multiplikitas atau kardinalitas dalam diagram kelas menunjukkan jumlah instance suatu kelas yang dapat dikaitkan dengan instance kelas lain. Misalnya, setiap perusahaan akan memiliki satu atau lebih karyawan, tidak boleh nol, sedangkan setiap karyawan saat ini bekerja pada nol atau satu perusahaan.
Simbol multiplikitas ditempatkan di dekat ujung asosiasi.
Opsi kardinalitas yang berbeda adalah:
- 1 hanya 1
- 0..1 0 atau 1
- 1..* 1 atau lebih
- * 0 atau 1 atau lebih
- n n (dengan n>1)
- 0..n 0 hingga n (dengan n>1)
- 1..n 1 hingga n (dengan n>1)
Kardinalitas dapat didefinisikan dengan mudah dengan membungkus opsi teks menggunakan tanda kutip ganda "" di depan atau di belakang panah yang diberikan. Misalnya:
Salin
Sematkan
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
Salin
Sematkan
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
Anotasi kelas
Anda dapat memberi anotasi pada kelas menggunakan penanda, untuk memberikan metadata tambahan tentang kelas tersebut. Hal ini dapat lebih jelas menunjukkan sifat kelas. Beberapa anotasi umum meliputi:
- <<Interface>> merepresentasikan kelas antarmuka
- <<Abstract>> merepresentasikan kelas abstrak
- <<Service>> merepresentasikan kelas layanan
- <<Enumeration>> merepresentasikan enumerasi
Komentar didefinisikan di antara << di awal dan >> di akhir. Ada tiga cara untuk menambahkan komentar pada kelas, dan keluaran dari ketiga cara tersebut sama:
- Inline dengan definisi kelas
Salin
Sematkan
classDiagram
class Shape <<interface>>
Pada baris tersendiri setelah mendefinisikan kelas:
Salin
Sematkan
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
- Dalam struktur bersarang dari definisi kelas:
Salin
Sematkan
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
Komentar
Anda dapat memasukkan komentar dalam diagram kelas, dan editor akan mengabaikannya. Komentar harus menempati satu baris tersendiri dan harus diawali dengan dua tanda persen (%%). Semua teks hingga baris berikutnya akan dianggap sebagai komentar, termasuk sintaks diagram kelas apa pun.
Salin
Sematkan
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
<<interface>>
noOfVertices
draw()
}
Mengatur arah diagram
Anda dapat menggunakan pernyataan arah untuk mengatur arah rendering diagram kelas:
Salin
Sematkan
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
Interaksi
Anda dapat mengikat peristiwa klik pada simpul. Peristiwa klik dapat memicu fungsi callback JavaScript, atau membuka tautan yang akan dimuat di tab browser baru. Catatan: fitur ini dinonaktifkan saat menggunakan securityLevel='strict', dan diaktifkan saat menggunakan securityLevel='loose'.
Anda dapat mendefinisikan operasi ini pada baris tersendiri setelah semua deklarasi kelas.
Salin
Sematkan
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
- action adalah link atau callback, bergantung pada jenis interaksi yang ingin Anda panggil.
- className adalah id simpul yang terkait dengan operasi.
- reference dapat berupa tautan URL, atau dapat berupa nama fungsi callback.
- (Opsional) Tooltip adalah string yang ditampilkan saat kursor diarahkan ke atas elemen.
- Fungsi callback akan dipanggil dengan nodeId sebagai parameter.
Catatan
Anda dapat menggunakan note "line1 line2" untuk menambahkan komentar pada diagram. Anda dapat menggunakan note for <CLASS NAME> "line1 line2" untuk menambahkan komentar untuk kelas tertentu.
Contoh
Salin
Sematkan
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
Tautan URL:
Salin
Sematkan
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"
Konfigurasi
Kotak anggota
Anda dapat menyembunyikan kotak anggota kosong pada simpul kelas, hal ini dilakukan dengan mengubah nilai hideEmptyMembersBox pada konfigurasi diagram kelas.
Salin
Sematkan
---
config:
class:
hideEmptyMembersBox: true
---
classDiagram
class Duck
