Diagram Treemap menampilkan data hierarkis sebagai sekumpulan persegi panjang bersarang. Setiap cabang pohon diwakili oleh persegi panjang, yang kemudian diposisikan dengan persegi panjang kecil lainnya yang mewakili cabang bawah. Ukuran setiap persegi panjang secara sempurna proporsional terhadap nilai numeriknya, menjadikannya pilihan yang sangat baik untuk mengubah teks menjadi diagram dalam membandingkan bagian-bagian dari keseluruhan di dalam tingkat kategori yang kompleks.
Struktur Sintaks Dasar
Setiap diagram treemap dimulai dengan treemap-beta deklarasi. Kemudian Anda mendeklarasikan node induk struktural menggunakan nama dalam tanda kutip, dan memetakan node daun anak secara individual dengan mengelompokkannya di bawahnya menggunakan spasi indentasi standar dan menambahkan tanda titik dua diikuti oleh bobot numeriknya.
treemap-beta
"Nama Kategori Utama"
"Kategori Bawah A": 45
"Kategori Bawah B": 30
"Kategori Bawah C": 25
Referensi Sintaks
Tabel di bawah ini menjelaskan persyaratan format utama yang digunakan untuk membuat tata letak Treemap di Mermaid.js.
| Komponen | Deskripsi | Aturan Sintaks |
|---|---|---|
| Deklarasi | Menginisialisasi mesin struktur tata letak untuk dataset persegi panjang bersarang. | treemap-beta |
| Node Induk | Menentukan batas pengelompokan atau kategori induk. Teks harus selalu dikelilingi tanda kutip ganda. | "Infrastruktur Cloud" |
| Node Daun | Elemen data bersarang yang membawa bobot nilai tertentu. | Ditambahkan di bawah induk menggunakan tanda titik dua di akhir dan angka positif. |
| Data Hierarki | Menentukan elemen mana yang termasuk dalam kelompok tertentu menggunakan kedalaman teks. | Dikendalikan sepenuhnya melalui tingkat indentasi standar (spasi atau tab). |
Format Data Lanjutan (Petunjuk)
Secara default, Mermaid menampilkan jumlah numerik mentah. Namun, Anda dapat melewatkan blok konfigurasi frontmatter menggunakan valueFormat properti untuk memformat angka sebagai mata uang, desimal, atau persentase.
Pola Format Umum
| String Format | Jenis Hasil | Contoh Output |
|---|---|---|
'$0,0' |
Tanda dolar dengan pemisah ribuan standar. | $400,000 |
'.1f' |
Menampilkan angka dengan tepat satu tempat desimal. | 45.2 |
'.1%' |
Mengonversi nilai berat mentah menjadi tampilan persentase. | 35.4% |
Rancangan Data Keuangan
Rancangan ini menunjukkan cara memformat anggaran perusahaan operasional dengan menggunakan parameter string keuangan khusus:
---
konfigurasi:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Anggaran Perusahaan"
"Operasi Teknik"
"Infrastruktur Inti": 500000
"Alat Pengembang": 150000
"Pemasaran Pertumbuhan"
"Kampanye Iklan Berbayar": 350000
"Sponsor Acara": 80000
Pengaturan Gaya Node Khusus (Kelas)
Untuk menekankan node penting, pencilan, atau area berisiko tinggi dalam dokumentasi Anda, Anda dapat mendefinisikan dan menerapkan gaya CSS khusus secara langsung dalam blok kode menggunakanclassDef aturan.
treemap-beta
"Penggunaan Sumber Daya Sistem"
"Layanan Web"
"API Gateway": 45
"Layanan Autentikasi": 95:::critical
"Penyimpanan Basis Data"
"Cache DB Utama": 60
"Node Sinkronisasi Replika": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Kiat Sintaks: Untuk menerapkan definisi kelas ke node daun yang berisi nilai numerik, tambahkan nama kelas menggunakan tiga titik dua (:::className) segera setelah nama label tetapi *sebelum* pemisah nilai titik dua.
Kesalahan Sintaks Umum & Keterbatasan
Karena skema treemap menggunakan indentasi teks struktural, kesalahan format kecil dapat menyebabkan masalah tata letak. Pertimbangkan parameter berikut:
- Nilai Negatif Dilarang:Treemap bergantung pada pengisian ruang proporsional dan secara matematis tidak mampu menampilkan angka negatif atau bobot nol. Pastikan semua nilai data adalah bilangan bulat positif atau desimal.
- Penutupan Kutipan: Setiap deskripsi node—tidak peduli apakah itu cabang induk atau elemen daun kecil—harus dibungkus dengan bersih menggunakan tanda petik ganda. Menghilangkan tanda kurung petik menyebabkan kesalahan sintaks segera.
- Keseragaman Spasi Kosong: Hubungan induk-anak bersarang ditentukan semata-mata oleh berapa banyak spasi yang berada di depan baris. Patuhi aturan panjang tab atau spasi yang konsisten (seperti dua spasi per tingkat) untuk mencegah node berakhir di kelompok yang salah.
- Visibilitas Label: Nilai yang sangat kecil dalam struktur hierarkis yang dalam dapat menghasilkan ubin persegi panjang kecil di mana teks meluap atau menjadi sama sekali tidak terbaca. Pertimbangkan mengelompokkan item kecil bersama di bawah kategori ‘Lainnya’.