{"id":2085,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Guia de Sintaxe e Configura\u00e7\u00e3o do Gr\u00e1fico XY do Mermaid.js"},"content":{"rendered":"

Um Gr\u00e1fico XY \u00e9 um componente abrangente de visualiza\u00e7\u00e3o de dados usado para renderizar gr\u00e1ficos de linhas e gr\u00e1ficos de barras em um layout padr\u00e3o de grade coordenada bidimensional. Introduzido para substituir e consolidar esquemas de gr\u00e1ficos antigos e independentes, o xychart-beta<\/code>motor de renderiza\u00e7\u00e3o processa dinamicamente conjuntos de dados num\u00e9ricos personalizados, escala automaticamente grades estruturais responsivas e suporta a exibi\u00e7\u00e3o de m\u00faltiplas s\u00e9ries de dados independentes e sobrepostas ao mesmo tempo.<\/p>\n

Estrutura B\u00e1sica de Sintaxe<\/h2>\n

Todo Gr\u00e1fico XY come\u00e7a com o xychart-beta<\/code>cabe\u00e7alho de declara\u00e7\u00e3o. \u00c9 seguido pela configura\u00e7\u00e3o de uma matriz de categorias do eixo X horizontal, um t\u00edtulo do eixo Y vertical ou limite de faixa de dados, e pelo menos uma s\u00e9rie expl\u00edcita de plotagem de dados (como um bloco de linha<\/code> ou barra<\/code> bloco).<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o Mermaid no 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  t\u00edtulo \"Gr\u00e1fico de Desempenho de Exemplo\"\r\n  eixo-x [Jan, Fev, Mar, Abr]\r\n  eixo-y \"Receita (USD)\"\r\n  barra [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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Refer\u00eancia de Sintaxe<\/h2>\n
A tabela abaixo detalha as defini\u00e7\u00f5es de dados principais e chaves de configura\u00e7\u00e3o necess\u00e1rias para estruturar corretamente um Gr\u00e1fico XY no Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Componente de Sintaxe<\/th>\nFormatos Aceitos<\/th>\nDescri\u00e7\u00e3o e Regras de Uso<\/th>\n<\/tr>\n<\/thead>\n
Declara\u00e7\u00e3o<\/strong><\/td>\nPalavra-chave<\/td>\nInicializa o espa\u00e7o de trabalho do gr\u00e1fico com layout bidimensional. Deve usar exatamente o bloco de string xychart-beta<\/code> bloco de string.<\/td>\n<\/tr>\n
T\u00edtulo<\/strong><\/td>\nString entre aspas<\/td>\nUm t\u00edtulo global opcional exibido centralizado imediatamente acima da grade da tela do gr\u00e1fico.<\/td>\n<\/tr>\n
Configura\u00e7\u00e3o do Eixo X<\/strong><\/td>\nLista entre colchetes \/ Faixa<\/td>\nDefine r\u00f3tulos da escala horizontal. Aceita strings de texto categ\u00f3rico entre colchetes[A, B, C]<\/code> ou faixas de pontos num\u00e9ricos [100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Configura\u00e7\u00e3o do Eixo Y<\/strong><\/td>\nString do T\u00edtulo \/ Limites da Escala<\/td>\nConfigura os par\u00e2metros da escala vertical. Pode ser simplesmente uma string de t\u00edtulo do eixo, ou personalizada para limitar os intervalos de valores inferior\/superior usando\"T\u00edtulo\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
S\u00e9rie de Gr\u00e1ficos de Barras<\/strong><\/td>\nArray Num\u00e9rico<\/td>\nRenderiza conjuntos de dados como barras verticais. A quantidade de elementos dentro do array de dados deve corresponder exatamente ao comprimento das categorias do eixo X.<\/td>\n<\/tr>\n
S\u00e9rie de Gr\u00e1ficos de Linha<\/strong><\/td>\nArray Num\u00e9rico<\/td>\nRenderiza conjuntos de dados como linhas cont\u00ednuas que conectam pontos de dados ao longo da \u00e1rea de trabalho da grade.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Personaliza\u00e7\u00e3o Avan\u00e7ada de Dados (Diretivas)<\/h2>\n
Voc\u00ea pode ajustar com precis\u00e3o a apar\u00eancia visual do seu espa\u00e7o de trabalho do gr\u00e1fico incorporando um bloco de configura\u00e7\u00e3o de frontmatter na parte superior absoluta do trecho de c\u00f3digo do seu documento. Isso lhe d\u00e1 controle total sobre o layout, incluindo cores hex personalizadas, espessuras de linhas das s\u00e9ries de plotagem e campos de visibilidade da grade.<\/p>\n
Matriz de Atributos de Configura\u00e7\u00e3o do Gr\u00e1fico XY<\/h3>\n\n\n\n\n\n\n\n\n
Chave de Configura\u00e7\u00e3o da Propriedade<\/th>\nOp\u00e7\u00f5es de Valor<\/th>\nResultado Visual<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\nverdadeiro<\/code> | falso<\/code><\/td>\nAtiva ou desativa se os tra\u00e7os da grade estrutural do eixo de fundo s\u00e3o exibidos em coordenadas.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nInteiro (Pixels)<\/td>\nDefine a largura fixa de layout de canvas delimitado do sistema de grade.<\/td>\n<\/tr>\n
alturaDoGr\u00e1fico<\/code><\/td>\nInteiro (Pixels)<\/td>\nDefine uma altura fixa de layout de canvas delimitado do sistema de grade.<\/td>\n<\/tr>\n
variaveisDoTema.xyChart<\/code><\/td>\nArrays de Mapeamento de Cores<\/td>\nInsere blocos de cor expl\u00edcitos em hex (por exemplo, corDeFundo<\/code>, corDoT\u00edtulo<\/code>, ou slots de lista de cores personalizadas paletaDeCoresDoGr\u00e1fico<\/code>) em seus gr\u00e1ficos.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Plano Real: Compara\u00e7\u00e3o T\u00e9cnica Multisserie<\/h2>\n
Este plano abrangente rastreia uma revis\u00e3o de desempenho de infraestrutura. Utiliza uma diretiva de configura\u00e7\u00e3o personalizada para fixar os tamanhos das dimens\u00f5es do canvas, exibir os caminhos das linhas de grade de fundo e injetar uma paleta de cores hexadecimais expl\u00edcita. Mapeia quatro fases trimestrais distintas, representando-as como um gr\u00e1fico combinado visual (gr\u00e1ficos de barras e linhas sobrepostos juntos).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite Mermaid no 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    larguraDoGr\u00e1fico: 700\r\n    alturaDoGr\u00e1fico: 400\r\n    mostrarLinha: true\r\n  variaveisDoTema:\r\n    xychart:\r\n      corDoT\u00edtulo: \"#0072B1\"\r\n      paletaDeCoresDoGr\u00e1fico: \"#0072B1, #E06000\"\r\n---\r\nxychart-beta\r\n  t\u00edtulo \"M\u00e9tricas de Recursos vs Execu\u00e7\u00e3o Q1-Q4\"\r\n  eixo-x [\"Trimestre 1\", \"Trimestre 2\", \"Trimestre 3\", \"Trimestre 4\"]\r\n  eixo-y \"Unidades de M\u00e9trica de Desempenho\" 0 --> 100\r\n  barra [45, 65, 80, 95]\r\n  linha [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>
\nEdite Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Dica de Sintaxe:<\/strong> Ao sobrepor m\u00faltiplos gr\u00e1ficos de dados (como executar um barra<\/code> conjunto de dados e um linha<\/code> conjunto de dados dentro do mesmo canvas de layout), o motor de renderiza\u00e7\u00e3o empilhar\u00e1 ou desenhar\u00e1 eles sequencialmente na ordem em que s\u00e3o escritos no script de texto. Organize seus blocos de dados intencionalmente para evitar cortes visuais nas linhas do canvas.<\/em><\/p>\n\n
Armadilhas Comuns de Sintaxe e Restri\u00e7\u00f5es do Sistema<\/h2>\n
Ao compilar caminhos de matriz dimensional, alguns pequenos erros de configura\u00e7\u00e3o sutil ir\u00e3o interromper os c\u00e1lculos de coordenadas. Mantenha esses par\u00e2metros de solu\u00e7\u00e3o de problemas em mente:<\/p>\n
    \n
  • Descompasso de Comprimento de Dados:<\/strong> Cada barra<\/code> ou linha<\/code> a matriz de s\u00e9ries de dados *deve* conter exatamente o mesmo n\u00famero de entradas definidas no seu eixo x<\/code> par\u00e2metro de lista. Ter 4 categorias no seu eixo X, mas fornecer uma lista de dados com 5 n\u00fameros, ir\u00e1 quebrar completamente a compila\u00e7\u00e3o do gr\u00e1fico.<\/li>\n
  • Limites de aspas:<\/strong> Ao especificar categorias dentro dos colchetes de uma lista de eixos, blocos de texto que contenham espa\u00e7os ou caracteres especiais de pontua\u00e7\u00e3o devem ser cercados limpidamente por aspas duplas (por exemplo, [\"Fase 1\", \"Fase 2\"]<\/code>).<\/li>\n
  • Limites de coordenadas num\u00e9ricas:<\/strong> Ao definir intervalos manuais na escala de um eixo (como 0 --> 500<\/code>), voc\u00ea deve usar explicitamente dois tra\u00e7os seguidos por um s\u00edmbolo de maior que (--><\/code>). Esquecer um tra\u00e7o ou separar os caracteres do operador com espa\u00e7os acionar\u00e1 um erro de processamento de layout.<\/li>\n
  • Pesos inteiros positivos:<\/strong> Os valores de escala mapeiam para blocos de espa\u00e7o linear. Certifique-se de que os valores passados para suas s\u00e9ries n\u00e3o contenham elementos de caracteres n\u00e3o escapados ou vazios nulos de par\u00e2metros dentro de arrays.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Um Gr\u00e1fico XY \u00e9 um componente abrangente de visualiza\u00e7\u00e3o de dados usado para renderizar gr\u00e1ficos de linhas e gr\u00e1ficos de barras em um layout padr\u00e3o de grade coordenada bidimensional. Introduzido para substituir e consolidar esquemas de gr\u00e1ficos antigos e independentes,…<\/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-2085","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\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\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\/pt\/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=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guia de Sintaxe e Configura\u00e7\u00e3o do Gr\u00e1fico XY do Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/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\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_locale":"pt_PT","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\/pt\/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":{"Tempo estimado de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/pt\/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\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Guia de Sintaxe e Configura\u00e7\u00e3o do Gr\u00e1fico XY do Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2085"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}