Mengenal Class Diagram di Mermaid.js

Mermaid.js adalah pustaka JavaScript untuk membuat diagram hanya dari teks — tanpa perlu menggambar manual di alat desain. Salah satu jenis diagram yang paling sering dipakai di dokumentasi teknis adalah class diagram, bagian dari notasi UML yang menggambarkan struktur kelas dalam pemrograman berorientasi objek: atributnya apa saja, method-nya apa saja, dan bagaimana hubungan antar kelas.

Setiap kotak kelas pada diagram ini terbagi jadi tiga bagian: nama kelas di bagian atas (dicetak tebal), daftar atribut di bagian tengah, dan daftar method di bagian bawah. Mermaid otomatis membedakan atribut dan method — kalau di belakang nama ada tanda kurung (), itu dianggap method; kalau tidak ada, dianggap atribut.

Mendefinisikan kelas

Ada dua cara membuat kelas: pakai kata kunci class secara eksplisit, atau otomatis lewat penulisan relasi antar dua kelas sekaligus. Contoh sederhana:

classDiagram
  class Produk {
    +String nama
    +int harga
    +tampilkanDetail()
  }
  class ProdukDiving {
    +String ketebalan
    +cekStok()
  }
  Produk <|-- ProdukDiving

Simbol visibilitas anggota kelas

Di depan nama atribut atau method, kamu bisa menambahkan simbol untuk menandai tingkat aksesnya — mirip modifier akses di bahasa pemrograman berorientasi objek:

• + Public
• - Private
• # Protected
• ~ Package / Internal

Ada juga penanda tambahan di akhir definisi: tanda bintang * untuk method abstrak, dan tanda dolar $ untuk method atau atribut static.

Jenis relasi antar kelas

Hubungan antar kelas digambarkan lewat notasi panah. Delapan jenis relasi yang didukung Mermaid:

Kardinalitas & anotasi

Untuk relasi seperti "satu kategori punya banyak produk", kardinalitas bisa dituliskan dalam tanda kutip di dekat panah, misalnya "1" --> "0..n". Mermaid juga mendukung anotasi seperti <<Interface>>, <<Abstract>>, atau <<Enumeration>> di atas nama kelas untuk menjelaskan sifat kelas tersebut secara lebih spesifik.

Class diagram cocok dipakai saat mendokumentasikan struktur modul yang sudah cukup kompleks — misalnya relasi antara model Produk, Kategori, dan Pesanan pada sistem backend — supaya tim lebih mudah memahami hubungan antar bagian tanpa harus membaca seluruh kode satu per satu.