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

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

Sebuah Diagram Kuadran<\/strong>adalah alat visualisasi strategis yang digunakan untuk mengkategorikan item ke dalam empat zona yang berbeda berdasarkan dua variabel kontinu (misalnya, Usaha vs. Dampak, atau Penting vs. Mendesak). Dengan menempatkan titik data pada bidang koordinat 2D yang dibagi oleh sumbu X dan Y, Anda dapat dengan jelas membedakan \u201ckemenangan cepat\u201d berprioritas tinggi dari \u201cgangguan\u201d berprioritas rendah atau \u201ctaruhan strategis jangka panjang.\u201d<\/p>\n

Dengan Mermaid.js<\/strong>, Anda dapat menentukan kuadran Anda, judul sumbu, dan posisi titik data menggunakan blok deklaratif sederhana, memungkinkan Anda membuat matriks keputusan profesional secara instan.<\/p>\n

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

Untuk merancang diagram kuadran yang valid dan sepenuhnya dapat dijalankan di Mermaid, Anda harus menguasai sistem koordinat, penandaan sumbu, dan penempatan titik data.<\/p>\n

1. Menginisialisasi Kanvas Kuadran<\/h3>\n

Anda menginisialisasi kanvas diagram kuadran pada baris pertama menggunakan quadrantChart<\/code>kata kunci. Kemudian Anda menentukan label untuk keempat kuadran Anda dan judul untuk sumbu X dan Y Anda.<\/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 
quadrantChart\r\n    judul Matriks Prioritas Proyek\r\n    sumbu-x \"Usaha Rendah\" --> \"Usaha Tinggi\"\r\n    sumbu-y \"Dampak Rendah\" --> \"Dampak Tinggi\"\r\n    kuadran-1 \"Taruhannya Strategis\"\r\n    kuadran-2 \"Kemenangan Cepat\"\r\n    kuadran-3 \"Gangguan\"\r\n    kuadran-4 \"Proyek Besar\"<\/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. Menempatkan Titik Data<\/h3>\n
Anda menambahkan item ke dalam diagram dengan menyertakan nama tampilan mereka diikuti oleh koordinat X dan Y mereka (dinormalisasi antara 0 dan 1).<\/p>\n