{"id":2087,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"},"modified":"2026-07-07T07:02:01","modified_gmt":"2026-07-07T07:02:01","slug":"mermaid-js-sankey-diagram-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Panduan Sintaks dan Konfigurasi Diagram Sankey Mermaid.js"},"content":{"rendered":"

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.<\/p>\n

Struktur Sintaks Dasar<\/h2>\n

Definisi tata letak Sankey dibangun berdasarkan format struktural CSV (Nilai yang Dipisahkan Koma) 3 kolom yang dioptimalkan. Setiap file dimulai dengan “sankey<\/code> atau sankey-beta<\/code> deklarasi tipe header, diikuti oleh baris aliran individu yang mengikuti pola ketat Sumber,Tujuan,Nilai<\/code> pola.<\/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 
sankey\r\nNode Sumber,Node Tujuan,150,50\r\nNode Tujuan,Node Output Akhir,90,25<\/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
Referensi Sintaks<\/h2>\n
Tabel di bawah ini menjelaskan aturan dan parameter data utama yang diperlukan untuk menganalisis diagram Sankey secara benar di Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
Elemen Sintaks<\/th>\nPersyaratan Tipe<\/th>\nDeskripsi & Aturan Penggunaan<\/th>\n<\/tr>\n<\/thead>\n
Deklarasi<\/strong><\/td>\nIdentifikasi Kata Kunci<\/td>\nMenginisialisasi mesin tata letak rendering aliran. Menerima sankey<\/code> atau yang kompatibel mundur sankey-beta<\/code> string.<\/td>\n<\/tr>\n
Node Sumber<\/strong><\/td>\nLabel String<\/td>\nKategori asal tempat aliran sumber daya dimulai. identifikasi yang peka huruf besar-kecil.<\/td>\n<\/tr>\n
Node Tujuan<\/strong><\/td>\nLabel String<\/td>\nNode penerima tempat volume tautan tertentu berakhir.<\/td>\n<\/tr>\n
Nilai<\/strong><\/td>\nFloat \/ Bilangan Bulat Positif<\/td>\nBobot numerik dari aliran. Ketebalan jalur yang dirender dihitung secara langsung berdasarkan nilai ini.<\/td>\n<\/tr>\n
Baris Komentar<\/strong><\/td>\nIndikator Sintaks<\/td>\nSetiap teks yang diawali dengan tanda persen ganda (“%%<\/code>) diabaikan oleh kompilator, memungkinkan anotasi data yang bersih.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Menangani Karakter Khusus dalam Label Node<\/h2>\n
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.<\/p>\n
1. Koma dalam Nama<\/h3>\n
Jika label node tertentu memerlukan koma literal, bungkus seluruh kontainer string node dengan sepasang tanda kutip dua standar:<\/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                    
sankeyrnKumpulan Anggaran,\"Operasi, Gaji & Administrasi\",45000<\/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. Tanda Kutip dalam Nama<\/h3>\n
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 (“\"\"<\/code>) di dalam string nilai target:<\/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                    
sankeyrnKelompok Server,\"Internal \"\"Edge\"\" Node\",850<\/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\n
Konfigurasi Tema Lanjutan (Petunjuk)<\/h2>\n
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.<\/p>\n
Matriks Atribut Konfigurasi Sankey<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Nama Properti<\/th>\nNilai yang Diterima<\/th>\nHasil Visual<\/th>\n<\/tr>\n<\/thead>\n
tampilkanNilai<\/code><\/td>\nbenar<\/code> | salah<\/code><\/td>\nMengaktifkan atau menonaktifkan apakah teks nilai aliran numerik dicetak langsung di dalam kotak label node.<\/td>\n<\/tr>\n
warnaTautan<\/code><\/td>\n'sumber'<\/code> | 'tujuan'<\/code> | 'gradien'<\/code> | '#hex'<\/code><\/td>\nMenentukan pemetaan warna jalur tautan.'gradien'<\/code> mencampur warna secara halus antara entitas yang terhubung.<\/td>\n<\/tr>\n
penyelarasanNode<\/code><\/td>\n'justifikasi'<\/code> | 'kiri'<\/code> | 'kanan'<\/code> | 'tengah'<\/code><\/td>\nMenyelaraskan kolom struktural di seluruh kisi ruang kanvas.<\/td>\n<\/tr>\n
gayaLabel<\/code><\/td>\n'warisan'<\/code> | 'tercetak'<\/code><\/td>\n'tercetak'<\/code> menambahkan masker garis latar belakang di belakang teks untuk menjamin kemampuan pemindaian yang tinggi di atas tata letak yang kompleks.<\/td>\n<\/tr>\n
nodeWidth<\/code><\/td>\nBilangan Bulat (Pixel)<\/td>\nMenetapkan lebar persegi panjang node (Bawaan: 10<\/code>).<\/td>\n<\/tr>\n
nodePadding<\/code><\/td>\nBilangan Bulat (Pixel)<\/td>\nMenetapkan parameter jarak pemisah vertikal antar baris yang ditumpuk (Bawaan: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Rancangan Dunia Nyata: Distribusi Jaringan Energi Bersih<\/h2>\n
Rancangan komprehensif ini melacak sistem manajemen jaringan listrik infrastruktur. Ini menampilkan konfigurasi frontmatter\u2014menetapkan gradien warna tautan yang halus, gaya tipografi tepi, dan menonaktifkan hitungan metrik secara langsung\u2014dipasangkan dengan struktur tata letak berjenjang.<\/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                    
---\r\nkonfigurasi:\r\n  sankey:\r\n    tampilkanNilai: false\r\n    warnaTautan: 'gradien'\r\n    penataanNode: 'justifikasi'\r\n    gayaLabel: 'tercetak'\r\n    nodeWidth: 15\r\n    nodePadding: 18\r\n---\r\nsankey\r\n%% Baris Data Sumber\r\nPertanian Surya,Grid Penyimpanan Listrik,120.50\r\nTurbin Angin,Grid Penyimpanan Listrik,180.75\r\nBendungan Hidroelektrik,Saluran Industri Langsung,210.00\r\nImpor Bahan Bakar Hayati,Stasiun Cadangan Termal,45.25\r\n\r\n%% Node Distribusi\r\nGrid Penyimpanan Listrik,Saluran Konsumen Perumahan,145.00\r\nGrid Penyimpanan Listrik,Saluran Industri Langsung,110.25\r\nGrid Penyimpanan Listrik,Keausan & Disipasi Sistem,46.00\r\n\r\n%% Node Akhir Pengiriman Akhir\r\nSaluran Industri Langsung,Pusat Manufaktur Berat,295.00\r\nSaluran Industri Langsung,Sektor Ritel Komersial,25.25\r\nStasiun Cadangan Termal,Sektor Ritel Komersial,45.25<\/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\n
Kesalahan Sintaks Umum & Kendala Sistem<\/h2>\n
Ketika mengompilasi array data yang sangat padat, beberapa kesalahan konfigurasi halus akan memicu gangguan analisis tata letak. Ingat aturan pemecahan masalah berikut:<\/p>\n
    \n
  • Verifikasi Kolom yang Tepat:<\/strong> 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.<\/li>\n
  • Izinkan Baris Kosong:<\/strong> 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.<\/li>\n
  • Blok Putaran Melingkar:<\/strong> 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.<\/li>\n
  • Kendala Data Nilai:<\/strong> Bidang nilai hanya dapat memproses angka positif. Nilai negatif atau karakter alfabetik mentah tidak dapat diubah menjadi parameter lebar.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":15,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2087","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Sankey Diagram | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"name\":\"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"datePublished\":\"2026-07-07T07:02:01+00:00\",\"description\":\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Panduan Sintaks dan Konfigurasi Diagram Sankey Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","og_description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","name":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","datePublished":"2026-07-07T07:02:01+00:00","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Panduan Sintaks dan Konfigurasi Diagram Sankey Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2087"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}