Lewati ke konten utama

Mermaid 11.15.0

Contekan diagram kelas Mermaid

Diagram kelas menjelaskan tipe statis, anggota, dan hubungan. Gunakan diagram urutan untuk pesan saat program berjalan atau diagram alur untuk keputusan dan langkah proses.

Buat dengan Editor Mermaid →

Mulai cepat

Metode menggunakan tanda kurung; atribut tidak. Letakkan tipe hasil metode setelah spasi.

Mermaid
Buka di editor → 
classDiagram
  class Document {
    +String title
    -bool published
    +publish() bool
  }
  class Reader
  Reader --> Document : membaca

Memuat…

Referensi sintaks

Referensi sintaks
SintaksArti
classDiagram / class Id / class Id["Label"]Deklarasikan diagram, ID kelas, dan label tampilan opsional.
class Id { members } / Id : memberTambahkan atribut dan metode dalam kurung kurawal atau dengan notasi titik dua.
+ / - / # / ~Visibilitas publik, privat, terlindungi, dan paket/internal.
+method(arg) ReturnType / method()* / member$Tipe hasil mengikuti spasi; * menandai metode abstrak dan $ anggota statis.
List~T~ / Box~List~T~~Tilde membatasi parameter generik; argumen generik yang dipisahkan koma tidak didukung.
<|-- / *-- / o-- / --> / -- / ..> / ..|> / ..Pewarisan, komposisi, agregasi, asosiasi, tautan utuh, dependensi, realisasi, dan tautan putus-putus.
A "1" --> "0..*" B : labelMultiplisitas dalam tanda kutip muncul di ujung hubungan; titik dua menambahkan label.
<<interface>> / <<abstract>> / <<service>> / <<enumeration>>Tambahkan stereotipe pada kelas.
namespace Name { class A }Kelompokkan kelas; namespace bertitik dan bersarang didukung pada 11.15.
note "Text" / note for A "Text"Tambahkan catatan umum atau catatan pada kelas.
direction LR / RL / TB / BTAtur arah tata letak.
style A fill:#d3e5ff / classDef / cssClass / :::Beri gaya langsung pada kelas atau terapkan kelas gaya yang dapat digunakan ulang.
click A href "URL" / click A call callback()Tautan dan callback interaktif memerlukan pengaturan keamanan host yang sesuai.
%% / accTitle: / accDescr:Komentar dan deskripsi aksesibel.

Visibilitas, metode, dan generik

Visibilitas ditandai simbol awal. Metode dikenali dari tanda kurung dan tipe hasil mengikuti kurung penutup. Gunakan tilde untuk generik. Argumen generik yang memuat koma belum didukung.

Mermaid
Buka di editor → 
classDiagram
  class Repository~T~ {
    -List~T~ items
    #int count
    ~String scope
    +find(id) T
    +create() T*
    +int total$
  }

Memuat…

Delapan bentuk hubungan dan multiplisitas

Segitiga menandai pewarisan atau realisasi; belah ketupat menandai kepemilikan. Kardinalitas adalah teks dalam tanda kutip, bukan batasan basis data yang divalidasi. Balik arah panah jika penanda diperlukan di ujung lain.

Mermaid
Buka di editor → 
classDiagram
  Base <|-- Derived
  Whole *-- Part
  Group o-- Member
  Reader --> Document
  A -- B
  Client ..> Service
  Contract <|.. Implementation
  X .. Y
  Reader "1" --> "0..*" Document : membaca

Memuat…

Stereotipe, namespace, dan catatan

Namespace mengelompokkan kelas secara visual, bukan memvalidasi cakupan bahasa pemrograman. Catatan dapat menjelaskan seluruh diagram atau satu kelas. Tempatkan stereotipe dekat kelas terkait.

Mermaid
Buka di editor → 
classDiagram
  direction LR
  namespace Publishing {
    class Store {
      <<interface>>
      +save() bool
    }
    class Archive
  }
  Store <|.. Archive
  note for Store "Batas persistensi"
  note "Struktur statis"

Memuat…

Gaya langsung dan gaya yang dapat digunakan ulang

classDef mendefinisikan kelas visual dan cssClass menerapkannya ke kelas model. Notasi ::: menerapkannya saat deklarasi. Gaya langsung hanya mengubah elemen bernama.

Mermaid
Buka di editor → 
classDiagram
  classDef important fill:#d3e5ff,stroke:#0070f3,color:#171717
  class Guide:::important
  class Archive
  cssClass "Archive" important
  style Guide fill:#d3e5ff,stroke:#0070f3,stroke-width:2px
  Guide --> Archive

Memuat…

Tata letak namespace

Namespace hierarkis merender kelompok induk secara bawaan. Atur hierarchicalNamespaces ke false untuk label namespace lengkap yang ringkas. Opsi ini mengubah tata letak tanpa mengganti ID kelas.

Mermaid
Buka di editor → 
---
config:
  class:
    hierarchicalNamespaces: false
---
classDiagram
  namespace Docs.Public {
    class Guide
  }
  namespace Docs.Internal {
    class Draft
  }
  Draft ..> Guide

Memuat…

Kesalahan umum

Lupa menutup kurung kurawal

Tutup blok anggota sebelum menambahkan hubungan.

Sintaks tidak valid — contoh perbaikan di bawah

classDiagram
  class Guide {
    +String title

Menggunakan kurung sudut biasa untuk generik

Gunakan List~T~. Hindari parameter generik dipisahkan koma karena notasi ini tidak mendukungnya.

Keterbatasan

  • Notasi ini tidak memvalidasi sistem tipe atau menghasilkan kelas yang dapat dijalankan.
  • Argumen generik yang dipisahkan koma tidak didukung.
  • Tata letak otomatis menentukan posisi simpul; hubungan adalah dokumentasi, bukan batasan yang diberlakukan.

Pertanyaan yang sering diajukan

Bagaimana cara menulis tipe hasil metode?
Tulis metode dengan tanda kurung, lalu spasi dan tipe hasil, misalnya +find(id) Document.
Bagaimana cara menampilkan komposisi?
Gunakan *-- dengan belah ketupat terisi pada kelas pemilik. Agregasi menggunakan o-- dengan belah ketupat kosong.
Apakah kelas dapat dikelompokkan?
Ya. Letakkan deklarasi kelas dalam blok namespace. Namespace bertitik dan bersarang didukung pada Mermaid 11.15.