{"id":2089,"date":"2026-07-03T09:26:10","date_gmt":"2026-07-03T09:26:10","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-treemap-diagram-syntax-layout-guide\/"},"modified":"2026-07-03T09:26:10","modified_gmt":"2026-07-03T09:26:10","slug":"mermaid-js-treemap-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","title":{"rendered":"Panduan Sintaks dan Tata Letak Diagram Treemap Mermaid.js"},"content":{"rendered":"

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

Struktur Sintaks Dasar<\/h2>\n

Setiap diagram treemap dimulai dengan treemap-beta<\/code> 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.<\/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 
treemap-beta\r\n\"Nama Kategori Utama\"\r\n  \"Kategori Bawah A\": 45\r\n  \"Kategori Bawah B\": 30\r\n  \"Kategori Bawah C\": 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 persyaratan format utama yang digunakan untuk membuat tata letak Treemap di Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n
Komponen<\/th>\nDeskripsi<\/th>\nAturan Sintaks<\/th>\n<\/tr>\n<\/thead>\n
Deklarasi<\/strong><\/td>\nMenginisialisasi mesin struktur tata letak untuk dataset persegi panjang bersarang.<\/td>\ntreemap-beta<\/code><\/td>\n<\/tr>\n
Node Induk<\/strong><\/td>\nMenentukan batas pengelompokan atau kategori induk. Teks harus selalu dikelilingi tanda kutip ganda.<\/td>\n\"Infrastruktur Cloud\"<\/code><\/td>\n<\/tr>\n
Node Daun<\/strong><\/td>\nElemen data bersarang yang membawa bobot nilai tertentu.<\/td>\nDitambahkan di bawah induk menggunakan tanda titik dua di akhir dan angka positif.<\/td>\n<\/tr>\n
Data Hierarki<\/strong><\/td>\nMenentukan elemen mana yang termasuk dalam kelompok tertentu menggunakan kedalaman teks.<\/td>\nDikendalikan sepenuhnya melalui tingkat indentasi standar (spasi atau tab).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Format Data Lanjutan (Petunjuk)<\/h2>\n
Secara default, Mermaid menampilkan jumlah numerik mentah. Namun, Anda dapat melewatkan blok konfigurasi frontmatter menggunakan valueFormat<\/code> properti untuk memformat angka sebagai mata uang, desimal, atau persentase.<\/p>\n
Pola Format Umum<\/h3>\n\n\n\n\n\n\n\n
String Format<\/th>\nJenis Hasil<\/th>\nContoh Output<\/th>\n<\/tr>\n<\/thead>\n
'$0,0'<\/code><\/td>\nTanda dolar dengan pemisah ribuan standar.<\/td>\n$400,000<\/td>\n<\/tr>\n
'.1f'<\/code><\/td>\nMenampilkan angka dengan tepat satu tempat desimal.<\/td>\n45.2<\/td>\n<\/tr>\n
'.1%'<\/code><\/td>\nMengonversi nilai berat mentah menjadi tampilan persentase.<\/td>\n35.4%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Rancangan Data Keuangan<\/h3>\n
Rancangan ini menunjukkan cara memformat anggaran perusahaan operasional dengan menggunakan parameter string keuangan khusus:<\/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  treemap:\r\n    valueFormat: '$0,0'\r\n---\r\ntreemap-beta\r\n\"Anggaran Perusahaan\"\r\n  \"Operasi Teknik\"\r\n    \"Infrastruktur Inti\": 500000\r\n    \"Alat Pengembang\": 150000\r\n  \"Pemasaran Pertumbuhan\"\r\n    \"Kampanye Iklan Berbayar\": 350000\r\n    \"Sponsor Acara\": 80000<\/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
Pengaturan Gaya Node Khusus (Kelas)<\/h2>\n
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<\/code> aturan.<\/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                    
treemap-beta\r\n\"Penggunaan Sumber Daya Sistem\"\r\n  \"Layanan Web\"\r\n    \"API Gateway\": 45\r\n    \"Layanan Autentikasi\": 95:::critical\r\n  \"Penyimpanan Basis Data\"\r\n    \"Cache DB Utama\": 60\r\n    \"Node Sinkronisasi Replika\": 25\r\n\r\nclassDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;<\/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
Kiat Sintaks:<\/strong> Untuk menerapkan definisi kelas ke node daun yang berisi nilai numerik, tambahkan nama kelas menggunakan tiga titik dua (:::className<\/code>) segera setelah nama label tetapi *sebelum* pemisah nilai titik dua.<\/em><\/p>\n\n
Kesalahan Sintaks Umum & Keterbatasan<\/h2>\n
Karena skema treemap menggunakan indentasi teks struktural, kesalahan format kecil dapat menyebabkan masalah tata letak. Pertimbangkan parameter berikut:<\/p>\n
    \n
  • Nilai Negatif Dilarang:<\/strong>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.<\/li>\n
  • Penutupan Kutipan:<\/strong> Setiap deskripsi node\u2014tidak peduli apakah itu cabang induk atau elemen daun kecil\u2014harus dibungkus dengan bersih menggunakan tanda petik ganda. Menghilangkan tanda kurung petik menyebabkan kesalahan sintaks segera.<\/li>\n
  • Keseragaman Spasi Kosong:<\/strong> 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.<\/li>\n
  • Visibilitas Label:<\/strong> 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’.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":14,"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-2089","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Treemap Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online 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-treemap-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Treemap Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-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_6a47814e082dc.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=\"3 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-treemap-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\",\"name\":\"Mermaid Treemap Syntax | 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-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"datePublished\":\"2026-07-03T09:26:10+00:00\",\"description\":\"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a47814e082dc.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-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 Tata Letak Diagram Treemap 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 Treemap Syntax | VPasCode Text to Diagram Guide","description":"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online 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-treemap-diagram-syntax-layout-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid Treemap Syntax | VPasCode Text to Diagram Guide","og_description":"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","name":"Mermaid Treemap Syntax | 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-treemap-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png","datePublished":"2026-07-03T09:26:10+00:00","description":"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-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 Tata Letak Diagram Treemap 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\/2089","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=2089"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}