{"id":2111,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-class-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-class-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","title":{"rendered":"Panduan Sintaks Diagram Kelas Mermaid.js"},"content":{"rendered":"

Apa itu Diagram Kelas?<\/h2>\n

Sebuah Diagram Kelas<\/strong> adalah struktur diagram UML<\/strong> yang memvisualisasikan arsitektur statis dari sistem perangkat lunak berorientasi objek. Sebagai jenis diagram UML yang tak tergantikan, jenis diagram UML<\/strong>, 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.<\/p>\n

Dengan Mermaid.js<\/strong>, 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.<\/p>\n

Panduan Sintaks Inti: Elemen dan Konstruksi<\/h2>\n

Untuk merancang diagram kelas UML yang akurat dan sesuai standar dalam Mermaid, Anda harus menguasai deklarasi anggota, modifer akses, dan panah hubungan struktural.<\/p>\n

1. Deklarasi Kelas dan Kompartemen Kelas<\/h3>\n

Anda dapat mendefinisikan sebuah kelas menggunakan dua format yang valid. Untuk kelas sederhana, gunakan kata kunci class<\/code>diikuti oleh nama kelas. Jika Anda ingin menyertakan bidang dan metode segera, gunakan kurung kurawal belakang untuk membuat blok tubuh yang jelas:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
classDiagram\r\n    class UserProfile {\r\n        +String username\r\n        +String email\r\n        +updateEmail(newEmail) void\r\n    }<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Menambahkan Visibilitas \/ Modifer Akses<\/h3>\n
Untuk mendokumentasikan aturan enkapsulasi UML standar, letakkan simbol tertentu tepat sebelum nama atribut atau metode Anda untuk menentukan tingkat visibilitasnya:<\/p>\n