{"id":2090,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Gu\u00eda de sintaxis y configuraci\u00f3n de gr\u00e1ficos XY de Mermaid.js"},"content":{"rendered":"

Un gr\u00e1fico XY es un componente de visualizaci\u00f3n de datos completo utilizado para representar gr\u00e1ficos de l\u00edneas y gr\u00e1ficos de barras en una disposici\u00f3n est\u00e1ndar de cuadr\u00edcula bidimensional. Presentado para reemplazar y consolidar esquemas de gr\u00e1ficos independientes m\u00e1s antiguos, elxychart-beta<\/code>motor de renderizado procesa din\u00e1micamente conjuntos de datos num\u00e9ricos personalizados, escala autom\u00e1ticamente cuadr\u00edculas estructurales responsivas y permite mostrar m\u00faltiples series de datos independientes superpuestas al mismo tiempo.<\/p>\n

Estructura b\u00e1sica de sintaxis<\/h2>\n

Cada gr\u00e1fico XY comienza con elxychart-beta<\/code>encabezado de declaraci\u00f3n. A continuaci\u00f3n se configura una matriz de categor\u00edas del eje X horizontal, un t\u00edtulo del eje Y vertical o un l\u00edmite de rango de datos, y al menos una serie de trazado de datos expl\u00edcita (como un bloque del\u00ednea<\/code>obarra<\/code>bloque).<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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 rendimiento de ejemplo\"\r\n  eje-x [Ene, Feb, Mar, Abr]\r\n  eje-y \"Ingresos (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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Referencia de sintaxis<\/h2>\n
La tabla a continuaci\u00f3n desglosa las definiciones de datos principales y las claves de configuraci\u00f3n necesarias para estructurar correctamente un gr\u00e1fico XY en Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Componente de sintaxis<\/th>\nFormatos aceptados<\/th>\nDescripci\u00f3n y reglas de uso<\/th>\n<\/tr>\n<\/thead>\n
Declaraci\u00f3n<\/strong><\/td>\nPalabra clave<\/td>\nInicializa el espacio de trabajo del gr\u00e1fico con disposici\u00f3n 2D. Debe usar exactamente el bloque de textoxychart-beta<\/code>bloque de cadena.<\/td>\n<\/tr>\n
T\u00edtulo<\/strong><\/td>\nCadena entre comillas<\/td>\nUn encabezado global opcional que se muestra centrado inmediatamente encima de la cuadr\u00edcula del lienzo del gr\u00e1fico.<\/td>\n<\/tr>\n
Configuraci\u00f3n del eje X<\/strong><\/td>\nLista entre corchetes \/ Rango<\/td>\nDefine las etiquetas de escala horizontal. Acepta cadenas de texto categ\u00f3ricas dentro de corchetes[A, B, C]<\/code> o rangos de puntos num\u00e9ricos[100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Configuraci\u00f3n del eje Y<\/strong><\/td>\nCadena de t\u00edtulo \/ L\u00edmites de escala<\/td>\nConfigura los par\u00e1metros de escala vertical. Puede ser simplemente una cadena de t\u00edtulo del eje, o personalizarse para limitar los rangos de valores inferior\/superior usando\"T\u00edtulo\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
Serie de trazado de barras<\/strong><\/td>\nMatriz num\u00e9rica<\/td>\nRepresenta conjuntos de datos como barras verticales. La cantidad de elementos dentro del arreglo de datos debe coincidir perfectamente con la longitud de las categor\u00edas del eje X.<\/td>\n<\/tr>\n
Serie de trazado de l\u00edneas<\/strong><\/td>\nMatriz num\u00e9rica<\/td>\nRepresenta conjuntos de datos como l\u00edneas continuas que conectan puntos de datos a trav\u00e9s del \u00e1rea de trabajo de la cuadr\u00edcula.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Personalizaci\u00f3n avanzada de datos (Directivas)<\/h2>\n
Puedes ajustar finamente el aspecto visual de tu \u00e1rea de trabajo de gr\u00e1ficos insertando un bloque de configuraci\u00f3n de frontmatter en la parte superior absoluta de tu fragmento de c\u00f3digo del documento. Esto te da un control total sobre el dise\u00f1o, incluyendo colores hex personalizados, pesos de l\u00edneas de series de trazado y campos de visibilidad de la cuadr\u00edcula.<\/p>\n
Matriz de atributos de configuraci\u00f3n de gr\u00e1fico XY<\/h3>\n\n\n\n\n\n\n\n\n
Clave de configuraci\u00f3n de propiedad<\/th>\nOpciones de valor<\/th>\nResultado visual<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\nverdadero<\/code> | falso<\/code><\/td>\nAlterna si las l\u00edneas de cuadr\u00edcula estructurales del eje de fondo se muestran a lo largo de las coordenadas.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nEntero (p\u00edxeles)<\/td>\nEstablece el ancho fijo de la disposici\u00f3n de lienzo delimitado del sistema de cuadr\u00edcula.<\/td>\n<\/tr>\n
alturaGr\u00e1fico<\/code><\/td>\nEntero (p\u00edxeles)<\/td>\nEstablece la altura fija de la disposici\u00f3n de lienzo delimitado del sistema de cuadr\u00edcula.<\/td>\n<\/tr>\n
variablesTema.xyChart<\/code><\/td>\nMatrices de asignaci\u00f3n de colores<\/td>\nInyecta bloques de color hexadecimales expl\u00edcitos (por ejemplo, colorFondo<\/code>, colorTitulo<\/code>, o ranuras de lista de colores personalizados paletaColoresGrafico<\/code>) en sus gr\u00e1ficos.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Plano del mundo real: Comparaci\u00f3n t\u00e9cnica multiserie<\/h2>\n
Este plano completo rastrea una revisi\u00f3n del rendimiento de la infraestructura. Utiliza una directiva de configuraci\u00f3n personalizada para fijar los tama\u00f1os de las dimensiones del lienzo, mostrar las rutas de las l\u00edneas de cuadr\u00edcula de fondo e inyectar una paleta de colores hexadecimales expl\u00edcita. Mapea cuatro fases trimestrales distintas, represent\u00e1ndolas como un gr\u00e1fico visual combinado (gr\u00e1ficos de series de barras superpuestas y gr\u00e1ficos de series de l\u00edneas juntos).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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    anchoGr\u00e1fico: 700\r\n    alturaGr\u00e1fico: 400\r\n    mostrarLinea: true\r\n  variablesTema:\r\n    xychart:\r\n      colorTitulo: \"#0072B1\"\r\n      paletaColoresGrafico: \"#0072B1, #E06000\"\r\n---\r\nxychart-beta\r\n  t\u00edtulo \"M\u00e9tricas de Recursos vs Ejecuci\u00f3n Q1-Q4\"\r\n  eje-x [\"Trimestre 1\", \"Trimestre 2\", \"Trimestre 3\", \"Trimestre 4\"]\r\n  eje-y \"Unidades de M\u00e9trica de Rendimiento\" 0 --> 100\r\n  barra [45, 65, 80, 95]\r\n  l\u00ednea [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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Consejo de sintaxis:<\/strong> Al superponer m\u00faltiples gr\u00e1ficos de datos (por ejemplo, ejecutando un barra<\/code> conjunto de datos y un l\u00ednea<\/code> conjunto de datos dentro del mismo lienzo de disposici\u00f3n), el motor de renderizado los apilar\u00e1 o dibujar\u00e1 secuencialmente en el orden en que aparecen en el script de texto. Organice sus bloques de datos intencionalmente para evitar el recorte visual en las l\u00edneas del lienzo.<\/em><\/p>\n\n
Errores comunes de sintaxis y limitaciones del sistema<\/h2>\n
Al compilar rutas de matrices dimensionales, algunos errores sutiles de configuraci\u00f3n interrumpir\u00e1n los c\u00e1lculos de coordenadas. Tenga en cuenta estos par\u00e1metros de soluci\u00f3n de problemas:<\/p>\n
    \n
  • Desajuste de longitud de datos:<\/strong> Cada barra<\/code> o l\u00ednea<\/code> la matriz de series de datos *debe* contener el mismo n\u00famero exacto de elementos que el definido en tu eje x<\/code> par\u00e1metro de lista. Tener 4 categor\u00edas en tu eje X pero proporcionar una lista de datos con 5 n\u00fameros romper\u00e1 completamente la compilaci\u00f3n del gr\u00e1fico.<\/li>\n
  • L\u00edmites de comillas:<\/strong> Al especificar categor\u00edas dentro de corchetes de una lista de ejes, los bloques de texto que contienen espacios o caracteres especiales de puntuaci\u00f3n deben encerrarse limpiamente entre comillas dobles (por ejemplo, [\"Fase 1\", \"Fase 2\"]<\/code>).<\/li>\n
  • L\u00edmites de coordenadas num\u00e9ricas:<\/strong> Al establecer rangos manuales en una escala de eje (por ejemplo, 0 --> 500<\/code>), debes usar expl\u00edcitamente dos guiones seguidos por un s\u00edmbolo de mayor que (--><\/code>). Olvidar un gui\u00f3n o separar los caracteres del operador con espacios provocar\u00e1 un error de procesamiento en el dise\u00f1o.<\/li>\n
  • Pesos enteros positivos:<\/strong> Los valores de escala se asignan a bloques de espacio lineal. Aseg\u00farate de que los valores pasados a tus series no contengan elementos de car\u00e1cter no escapados ni valores nulos vac\u00edos dentro de los arreglos.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Un gr\u00e1fico XY es un componente de visualizaci\u00f3n de datos completo utilizado para representar gr\u00e1ficos de l\u00edneas y gr\u00e1ficos de barras en una disposici\u00f3n est\u00e1ndar de cuadr\u00edcula bidimensional. Presentado para reemplazar y consolidar esquemas de gr\u00e1ficos independientes m\u00e1s antiguos, elxychart-betamotor…<\/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-2090","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\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Tiempo de lectura\" \/>\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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda de sintaxis y configuraci\u00f3n de gr\u00e1ficos XY de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/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\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/es\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda de sintaxis y configuraci\u00f3n de gr\u00e1ficos XY de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2090"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}