{"id":2086,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-xy-chart-syntax-configuration-guide\/"},"modified":"2026-07-07T08:59:56","modified_gmt":"2026-07-07T08:59:56","slug":"mermaid-js-xy-chart-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Panduan Sintaks dan Konfigurasi Grafik XY Mermaid.js"},"content":{"rendered":"

Grafik XY adalah komponen visualisasi data yang komprehensif yang digunakan untuk menampilkan grafik garis dan grafik batang pada tata letak koordinat dua dimensi standar. Diperkenalkan untuk menggantikan dan mengintegrasikan skema grafik berdiri lama, yaituxychart-beta<\/code>mesin rendering secara dinamis memproses dataset numerik khusus, menyesuaikan skala grid struktural responsif secara otomatis, dan mendukung tampilan beberapa seri data independen yang tumpang tindih secara bersamaan.<\/p>\n

Struktur Sintaks Dasar<\/h2>\n

Setiap Grafik XY dimulai denganxychart-beta<\/code>header deklarasi. Diikuti dengan mengkonfigurasi array kategori sumbu X horizontal, judul sumbu Y vertikal atau batas rentang data, serta setidaknya satu seri pemetaan data eksplisit (seperti blokline<\/code>ataubar<\/code>blok).<\/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 
xychart-beta\r\n  title \"Grafik Kinerja Contoh\"\r\n  x-axis [Jan, Feb, Mar, Apr]\r\n  y-axis \"Pendapatan (USD)\"\r\n  bar [4500, 5200, 6100, 5800]<\/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 definisi data utama dan kunci konfigurasi yang diperlukan untuk membuat struktur Grafik XY dengan benar di Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Komponen Sintaks<\/th>\nFormat yang Diterima<\/th>\nDeskripsi & Aturan Penggunaan<\/th>\n<\/tr>\n<\/thead>\n
Deklarasi<\/strong><\/td>\nKata Kunci<\/td>\nMenginisialisasi ruang kerja grafik tata letak 2D. Harus menggunakan blok string tepatxychart-beta<\/code>blok string.<\/td>\n<\/tr>\n
Judul<\/strong><\/td>\nString yang Diberi Tanda Kutip<\/td>\nJudul global opsional yang ditampilkan di tengah tepat di atas kanvas grid grafik.<\/td>\n<\/tr>\n
Konfigurasi Sumbu X<\/strong><\/td>\nDaftar Berkurung \/ Rentang<\/td>\nMenentukan label skala horizontal. Menerima string teks kategorikal di dalam kurung[A, B, C]<\/code> atau rentang titik numerik [100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Konfigurasi Sumbu Y<\/strong><\/td>\nString Judul \/ Batas Skala<\/td>\nMengatur parameter skala vertikal. Bisa berupa string judul sumbu saja, atau disesuaikan untuk membatasi rentang nilai bawah\/atas menggunakan\"Judul\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
Serangkaian Plot Batang<\/strong><\/td>\nArray Numerik<\/td>\nMenggambar dataset sebagai batang vertikal. Jumlah elemen di dalam array data harus sesuai persis dengan panjang kategori sumbu X Anda.<\/td>\n<\/tr>\n
Serangkaian Plot Garis<\/strong><\/td>\nArray Numerik<\/td>\nMenggambar dataset sebagai garis kontinu yang menghubungkan titik-titik data di seluruh ruang kerja kisi.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Kustomisasi Data Lanjutan (Petunjuk)<\/h2>\n
Anda dapat menyempurnakan tampilan visual ruang kerja grafik Anda dengan menyematkan blok konfigurasi frontmatter di bagian paling atas potongan kode dokumen Anda. Ini memberi Anda kendali penuh atas tata letak, termasuk warna heksadesimal khusus, ketebalan garis serangkaian plot, dan bidang visibilitas tampilan kisi.<\/p>\n
Matriks Atribut Konfigurasi Grafik XY<\/h3>\n\n\n\n\n\n\n\n\n
Kunci Konfigurasi Properti<\/th>\nPilihan Nilai<\/th>\nHasil Visual<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\nbenar<\/code> | salah<\/code><\/td>\nMengaktifkan atau menonaktifkan tampilan garis struktural sumbu latar belakang grid di seluruh koordinat.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nBilangan Bulat (Pixel)<\/td>\nMenetapkan lebar tata letak kanvas batas tetap dari sistem grid.<\/td>\n<\/tr>\n
chartHeight<\/code><\/td>\nBilangan Bulat (Pixel)<\/td>\nMenetapkan tinggi tata letak kanvas batas tetap dari sistem grid.<\/td>\n<\/tr>\n
themeVariables.xyChart<\/code><\/td>\nArray Pemetaan Warna<\/td>\nMenyisipkan blok warna gaya heksadesimal eksplisit (misalnya, backgroundColor<\/code>, titleColor<\/code>, atau slot daftar warna kustom plotColorPalette<\/code>) ke dalam plot Anda.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Rancangan Dunia Nyata: Perbandingan Teknis Multi-Seri<\/h2>\n
Rancangan komprehensif ini melacak tinjauan kinerja infrastruktur. Ini menggunakan petunjuk konfigurasi khusus untuk menetapkan ukuran dimensi kanvas, menampilkan jalur garis grid latar belakang, dan menyisipkan palet warna heksadesimal eksplisit. Ini memetakan empat fase kuartalan yang berbeda, menggambarkannya sebagai grafik kombinasi visual yang digabungkan (grafik seri batang yang tumpang tindih dan grafik seri garis bersamaan).<\/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\nconfig:\r\n  xychart:\r\n    chartWidth: 700\r\n    chartHeight: 400\r\n    showLine: true\r\n  themeVariables:\r\n    xychart:\r\n      titleColor: \"#0072B1\"\r\n      plotColorPalette: \"#0072B1, #E06000\"\r\n---\r\nxychart-beta\r\n  title \"Metrik Sumber Daya vs Eksekusi Q1-Q4\"\r\n  x-axis [\"Kuartal 1\", \"Kuartal 2\", \"Kuartal 3\", \"Kuartal 4\"]\r\n  y-axis \"Satuan Metrik Kinerja\" 0 --> 100\r\n  bar [45, 65, 80, 95]\r\n  line [55, 60, 72, 88]<\/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
Kiat Sintaks:<\/strong> Saat menumpangkan beberapa plot data (seperti menjalankan data bar<\/code> dataset dan sebuah line<\/code> dataset di dalam kanvas tata letak yang sama), mesin rendering akan menumpuk atau menggambar mereka secara berurutan sesuai urutan penulisan dalam skrip teks. Susun blok data Anda secara sengaja untuk menghindari pemotongan visual pada garis kanvas.<\/em><\/p>\n\n
Kesalahan Sintaks Umum & Kendala Sistem<\/h2>\n
Saat mengkompilasi jalur matriks dimensi, beberapa kesalahan konfigurasi halus akan mengganggu perhitungan koordinat. Pertimbangkan parameter pemecahan masalah ini:<\/p>\n
    \n
  • Ketidaksesuaian Panjang Data:<\/strong> Setiap data tunggal bar<\/code> atau baris<\/code> array seri data *harus* berisi jumlah entri yang persis sama dengan yang ditentukan dalam sumbu-x<\/code> parameter daftar. Memiliki 4 kategori pada sumbu X tetapi memberikan daftar data berisi 5 angka akan sepenuhnya mengganggu kompilasi grafik.<\/li>\n
  • Batasan Kutipan:<\/strong> Saat menentukan kategori di dalam tanda kurung daftar sumbu, blok teks yang berisi spasi atau karakter tanda baca khusus harus dikelilingi dengan bersih menggunakan tanda kutip ganda (misalnya, [\"Fase 1\", \"Fase 2\"]<\/code>).<\/li>\n
  • Batas Koordinat Numerik:<\/strong> Saat menetapkan rentang manual pada skala sumbu (seperti 0 --> 500<\/code>), Anda harus secara eksplisit menggunakan dua tanda hubung diikuti oleh simbol lebih besar (--><\/code>). Melewatkan satu tanda hubung atau memisahkan karakter operator dengan spasi akan memicu kesalahan tata letak pemrosesan.<\/li>\n
  • Bobot Bilangan Bulat Positif:<\/strong> Nilai skala dipetakan ke blok ruang linier. Pastikan nilai yang dilewatkan ke seri Anda tidak mengandung elemen karakter yang tidak di-escape atau nilai kosong null di dalam array.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Grafik XY adalah komponen visualisasi data yang komprehensif yang digunakan untuk menampilkan grafik garis dan grafik batang pada tata letak koordinat dua dimensi standar. Diperkenalkan untuk menggantikan dan mengintegrasikan skema grafik berdiri lama, yaituxychart-betamesin rendering secara dinamis memproses dataset numerik…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":16,"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-2086","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid XY Chart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free 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-xy-chart-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 XY Chart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-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_6a4cc0702c7c7.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-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"name\":\"Mermaid XY Chart 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-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"datePublished\":\"2026-07-07T08:59:56+00:00\",\"description\":\"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-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 Grafik XY 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 XY Chart Syntax | VPasCode Text to Diagram Guide","description":"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free 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-xy-chart-syntax-configuration-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid XY Chart Syntax | VPasCode Text to Diagram Guide","og_description":"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.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-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","name":"Mermaid XY Chart 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-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png","datePublished":"2026-07-07T08:59:56+00:00","description":"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-xy-chart-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 Grafik XY 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\/2086","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=2086"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}