Apa itu Diagram Kelas?
Sebuah Diagram Kelas adalah struktur diagram UML yang memvisualisasikan arsitektur statis dari sistem perangkat lunak berorientasi objek. Sebagai jenis diagram UML yang tak tergantikan, jenis diagram UML, diagram ini memetakan kelas-kelas individu, antarmuka, dan model data dalam aplikasi Anda, secara eksplisit mendokumentasikan bidang internal mereka (atribut), fungsi operasional (metode), dan hubungan struktural yang menghubungkan mereka. Rancangan ini sangat penting bagi insinyur perangkat lunak yang perlu menerjemahkan desain domain tingkat tinggi menjadi struktur objek yang bersih dan dapat dipelihara.
Dengan Mermaid.js, Anda dapat menggambarkan model data dan layanan sistem Anda menggunakan definisi berbasis teks yang intuitif. Mesin tata letak secara otomatis menghitung ukuran kotak, menyusun kompartemen data UML standar, dan menyesuaikan panah relasional di seluruh kanvas Anda tanpa beban format manual.
Panduan Sintaks Inti: Elemen dan Konstruksi
Untuk merancang diagram kelas UML yang akurat dan sesuai standar dalam Mermaid, Anda harus menguasai deklarasi anggota, modifer akses, dan panah hubungan struktural.
1. Deklarasi Kelas dan Kompartemen Kelas
Anda dapat mendefinisikan sebuah kelas menggunakan dua format yang valid. Untuk kelas sederhana, gunakan kata kunci classdiikuti oleh nama kelas. Jika Anda ingin menyertakan bidang dan metode segera, gunakan kurung kurawal belakang untuk membuat blok tubuh yang jelas:
classDiagram
class UserProfile {
+String username
+String email
+updateEmail(newEmail) void
}
2. Menambahkan Visibilitas / Modifer Akses
Untuk mendokumentasikan aturan enkapsulasi UML standar, letakkan simbol tertentu tepat sebelum nama atribut atau metode Anda untuk menentukan tingkat visibilitasnya:
+**Publik:** Dapat diakses dari kelas lainnya.-**Pribadi:** Hanya dapat diakses dalam kelas yang mendeklarasikannya.#**Terlindungi:** Dapat diakses dalam kelas dan kelas turunannya.~**Paket / Internal:** Dapat diakses dalam batas paket yang sama.
classDiagram
class BankAccount {
-double balance
#String accountHolder
+getBalance() double
}
3. Menguasai Panah Hubungan dan Tautan Pewarisan
Untuk menunjukkan bagaimana kelas berinteraksi dalam model diagram UML Anda, sambungkan ID mereka menggunakan string hubungan khusus. Dalam Mermaid, arah garis penting: ujung panah mengarah ke kelas induk atau kelas kontainer.
- Pewarisan / Generalisasi (Panah Putus-putus atau Padat):
Anak --|> Induk(Mewakili hubungan ‘adalah’). - Realisasi / Implementasi:
Kelas ..|> Antarmuka(Mewakili kelas yang memenuhi kontrak antarmuka). - Komposisi (Berlian Padat):
Anak --* Induk(Mewakili kepemilikan ketat; jika induk mati, anak juga mati). - Agregasi (Berlian Jernih):
Anak --o Induk(Mewakili hubungan koleksi longgar; anak dapat ada secara mandiri). - Ketergantungan:
KelasA ..> KelasB(Mewakili referensi runtime sementara).
classDiagram
Mobil --|> Kendaraan : "Mewarisi dari"
Mesin --* Mobil : "Bagian dari"
Praktik Terbaik untuk Tata Letak Arsitektur Kelas yang Bersih
- Kelompokkan Anggota Kelas Secara Visual: Selalu kelompokkan variabel kelas Anda di bagian atas blok tubuh dan fungsi Anda di bagian bawah. Tata letak ini sesuai dengan struktur kelas standar di IDE dan membuat diagram Anda langsung mudah dibaca.
- Tentukan Tipe Pengembalian: Saat mendeklarasikan metode, tambahkan tipe pengembalian di akhir baris metode (misalnya,
+fetchData() DataSet). Ini memberikan konteks implementasi yang tepat bagi tim rekayasa Anda. - Jaga Klaritas Multiplicity: Untuk menunjukkan jumlah array atau ukuran koleksi, tambahkan string teks multiplicity langsung ke pembungkus baris hubungan (misalnya,
Customer "1" --o "banyak" Order).
Contoh Diagram Kelas Mermaid.js Dunia Nyata
Contoh 1: Subsistem Domain Gateway Pembayaran (Enkapsulasi & Antarmuka)
Rancangan fungsional ini memodelkan layanan domain checkout online. Ini menunjukkan cara menggunakan modifier akses, mengelompokkan anggota kelas, dan menerapkan hubungan antarmuka secara bersih.
classDiagram
class PaymentProcessor {
<<interface>>
+processPayment(amount) boolean
+refundPayment(txnId) boolean
}
class StripeGateway {
-String apiKey
-String endpointUrl
+processPayment(amount) boolean
+refundPayment(txnId) boolean
-logTransaction(status) void
}
class PayPalGateway {
-String merchantId
+processPayment(amount) boolean
+refundPayment(txnId) boolean
}
StripeGateway ..|> PaymentProcessor : "Mengimplementasikan"
PayPalGateway ..|> PaymentProcessor : "Mengimplementasikan"
Analisis Sintaks: Tag <<interface>> dengan jelas menandai `PaymentProcessor` sebagai kontrak arsitektur tingkat tinggi. Dua kelas implementasi gateway konkret menggunakan bidang pribadi (-apiKey) untuk kredensial sensitif, sementara mengekspos rutin pembayaran publik (+processPayment) yang terhubung melalui panah realisasi (..|>).
Contoh 2: Mesin Pemrosesan Pesanan Perusahaan (Komposisi & Multiplicity)
Rancangan sistem canggih ini memetakan skema manajemen pesanan e-commerce yang kompleks, menunjukkan cara mendokumentasikan kepemilikan struktural dan jumlah objek di antara berbagai kelas yang saling terhubung.
classDiagram
class Customer {
+int customerId
+String name
+placeOrder() Order
}
class Order {
+int orderId
+Date dateCreated
-String internalStatus
+calculateTotal() double
}
class OrderItem {
+int itemId
+int quantity
+double pricePerUnit
}
class Address {
+String street
+String city
+String postalCode
}
Customer "1" --o "banyak" Order : "memiliki"
OrderItem "1..*" --* "1" Order : "mengandung"
Address "1" --> Order : "dikirim ke"
Analisis Sintaks:Contoh ini menggambarkan perbedaan antara agregasi dan komposisi. Panah berlian padat (--*) menunjukkan bahwa `OrderItem` terikat erat dengan `Order` (jika pesanan dihapus, item baris individu yang terkait juga akan dihancurkan). Sebaliknya, panah berlian jelas (--o) menunjukkan bahwa `Customer` memiliki beberapa pesanan, tetapi kedua entitas tersebut dapat ada secara independen. String multiplicity (seperti "1..*") mendefinisikan persyaratan hubungan sistem.