Diagram Sankey adalah alat visualisasi yang sangat efektif yang digunakan untuk menggambarkan aliran arah kuantitas antara node-node yang berbeda dalam suatu sistem. Dengan menyesuaikan lebar fisik tautan penghubung secara proporsional terhadap volume aliran numerik, mereka memungkinkan insinyur, analis, dan tim operasional untuk langsung mengidentifikasi kontributor utama, alokasi sumber daya, ketidakefisienan, atau kebocoran dalam jaringan kompleks seperti jaringan listrik, rantai pasok, dan portofolio keuangan.
Struktur Sintaks Dasar
Definisi tata letak Sankey dibangun berdasarkan format struktural CSV (Nilai yang Dipisahkan Koma) 3 kolom yang dioptimalkan. Setiap file dimulai dengan “sankey atau sankey-beta deklarasi tipe header, diikuti oleh baris aliran individu yang mengikuti pola ketat Sumber,Tujuan,Nilai pola.
sankey
Node Sumber,Node Tujuan,150,50
Node Tujuan,Node Output Akhir,90,25
Referensi Sintaks
Tabel di bawah ini menjelaskan aturan dan parameter data utama yang diperlukan untuk menganalisis diagram Sankey secara benar di Mermaid.js.
| Elemen Sintaks | Persyaratan Tipe | Deskripsi & Aturan Penggunaan |
|---|---|---|
| Deklarasi | Identifikasi Kata Kunci | Menginisialisasi mesin tata letak rendering aliran. Menerima sankey atau yang kompatibel mundur sankey-beta string. |
| Node Sumber | Label String | Kategori asal tempat aliran sumber daya dimulai. identifikasi yang peka huruf besar-kecil. |
| Node Tujuan | Label String | Node penerima tempat volume tautan tertentu berakhir. |
| Nilai | Float / Bilangan Bulat Positif | Bobot numerik dari aliran. Ketebalan jalur yang dirender dihitung secara langsung berdasarkan nilai ini. |
| Baris Komentar | Indikator Sintaks | Setiap teks yang diawali dengan tanda persen ganda (“%%) diabaikan oleh kompilator, memungkinkan anotasi data yang bersih. |
Menangani Karakter Khusus dalam Label Node
Karena koma dan tanda kutipan berfungsi sebagai pembatas sistem struktural dalam mesin tata letak, input penamaan khusus memerlukan teknik pelarian tertentu untuk memastikan tampilan yang benar di kanvas frontend.
1. Koma dalam Nama
Jika label node tertentu memerlukan koma literal, bungkus seluruh kontainer string node dengan sepasang tanda kutip dua standar:
sankeyrnKumpulan Anggaran,"Operasi, Gaji & Administrasi",45000
2. Tanda Kutip dalam Nama
Untuk menampilkan tanda kutip ganda secara eksplisit di dalam nama label, bungkus parameter keseluruhan dengan tanda kutip luar, dan gunakan pasangan tanda kutip ganda yang digandakan (“"") di dalam string nilai target:
sankeyrnKelompok Server,"Internal ""Edge"" Node",850
Konfigurasi Tema Lanjutan (Petunjuk)
Anda dapat menyesuaikan tampilan diagram Anda dengan melewatkan blok konfigurasi frontmatter di bagian atas potongan dokumen Anda. Ini memungkinkan Anda mengendalikan gaya tautan, padding tata letak, gaya teks, dan penyelarasan elemen langsung dari editor teks mentah Anda.
Matriks Atribut Konfigurasi Sankey
| Nama Properti | Nilai yang Diterima | Hasil Visual |
|---|---|---|
tampilkanNilai |
benar | salah |
Mengaktifkan atau menonaktifkan apakah teks nilai aliran numerik dicetak langsung di dalam kotak label node. |
warnaTautan |
'sumber' | 'tujuan' | 'gradien' | '#hex' |
Menentukan pemetaan warna jalur tautan.'gradien' mencampur warna secara halus antara entitas yang terhubung. |
penyelarasanNode |
'justifikasi' | 'kiri' | 'kanan' | 'tengah' |
Menyelaraskan kolom struktural di seluruh kisi ruang kanvas. |
gayaLabel |
'warisan' | 'tercetak' |
'tercetak' menambahkan masker garis latar belakang di belakang teks untuk menjamin kemampuan pemindaian yang tinggi di atas tata letak yang kompleks. |
nodeWidth |
Bilangan Bulat (Pixel) | Menetapkan lebar persegi panjang node (Bawaan: 10). |
nodePadding |
Bilangan Bulat (Pixel) | Menetapkan parameter jarak pemisah vertikal antar baris yang ditumpuk (Bawaan: 12). |
Rancangan Dunia Nyata: Distribusi Jaringan Energi Bersih
Rancangan komprehensif ini melacak sistem manajemen jaringan listrik infrastruktur. Ini menampilkan konfigurasi frontmatter—menetapkan gradien warna tautan yang halus, gaya tipografi tepi, dan menonaktifkan hitungan metrik secara langsung—dipasangkan dengan struktur tata letak berjenjang.
---
konfigurasi:
sankey:
tampilkanNilai: false
warnaTautan: 'gradien'
penataanNode: 'justifikasi'
gayaLabel: 'tercetak'
nodeWidth: 15
nodePadding: 18
---
sankey
%% Baris Data Sumber
Pertanian Surya,Grid Penyimpanan Listrik,120.50
Turbin Angin,Grid Penyimpanan Listrik,180.75
Bendungan Hidroelektrik,Saluran Industri Langsung,210.00
Impor Bahan Bakar Hayati,Stasiun Cadangan Termal,45.25
%% Node Distribusi
Grid Penyimpanan Listrik,Saluran Konsumen Perumahan,145.00
Grid Penyimpanan Listrik,Saluran Industri Langsung,110.25
Grid Penyimpanan Listrik,Keausan & Disipasi Sistem,46.00
%% Node Akhir Pengiriman Akhir
Saluran Industri Langsung,Pusat Manufaktur Berat,295.00
Saluran Industri Langsung,Sektor Ritel Komersial,25.25
Stasiun Cadangan Termal,Sektor Ritel Komersial,45.25
Kesalahan Sintaks Umum & Kendala Sistem
Ketika mengompilasi array data yang sangat padat, beberapa kesalahan konfigurasi halus akan memicu gangguan analisis tata letak. Ingat aturan pemecahan masalah berikut:
- Verifikasi Kolom yang Tepat: Setiap baris item yang mengikuti deklarasi header utama harus berisi tepat tiga parameter yang dipisahkan koma. Menambahkan kolom keempat atau menghilangkan bobot nilai akan sepenuhnya menghentikan kompilasi diagram.
- Izinkan Baris Kosong: Berbeda dengan aturan pemrosesan data kaku tradisional, Mermaid memungkinkan Anda menambahkan baris kosong yang bersih di dalam blok kode untuk secara logis memisahkan tingkatan atau fase pemrosesan data model Anda.
- Blok Putaran Melingkar: Struktur Sankey dirancang secara ketat berdasarkan Graf Berarah Tanpa Siklus (DAG). Jika Anda menghubungkan Node A ke Node B, lalu mencoba menulis jalur baris yang menghubungkan Node B kembali ke Node A, mesin tata letak akan mengalami gangguan umpan balik dan mengalami kesalahan.
- Kendala Data Nilai: Bidang nilai hanya dapat memproses angka positif. Nilai negatif atau karakter alfabetik mentah tidak dapat diubah menjadi parameter lebar.