{"id":2090,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Mermaid.js XY-Chart-Syntax- & Konfigurationsleitfaden"},"content":{"rendered":"

Ein XY-Chart ist eine umfassende Komponente zur Datenvisualisierung, die verwendet wird, um sowohl Liniendiagramme als auch Balkendiagramme in einer standardm\u00e4\u00dfigen zweidimensionalen Gitterkoordinatenanordnung darzustellen. Eingef\u00fchrt, um \u00e4ltere eigenst\u00e4ndige Diagrammschemata zu ersetzen und zu vereinen, der xychart-beta<\/code> Rendering-Engine verarbeitet dynamisch benutzerdefinierte numerische Datens\u00e4tze, skaliert responsive Struktur-Gitter automatisch und unterst\u00fctzt die gleichzeitige Darstellung mehrerer unabh\u00e4ngiger \u00fcberlagerter Datens\u00e4tze.<\/p>\n

Grundlegende Syntaxstruktur<\/h2>\n

Jeder XY-Chart beginnt mit der xychart-beta<\/code> Deklarationskopf. Danach folgt die Konfiguration eines horizontalen X-Achsen-Kategorien-Arrays, eines vertikalen Y-Achsen-Titels oder eines Datenbereichs-Limits sowie mindestens einer expliziten Datenplottingserie (z. B. einer line<\/code> oder bar<\/code> Block).<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/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 \"Beispiel-Leistungsdiagramm\"\r\n  x-axis [Jan, Feb, M\u00e4r, Apr]\r\n  y-axis \"Umsatz (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>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Syntaxreferenz<\/h2>\n
Die folgende Tabelle zeigt die wichtigsten Datendefinitionen und Konfigurationsschl\u00fcssel auf, die erforderlich sind, um einen XY-Chart korrekt in Mermaid.js zu strukturieren.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Syntaxkomponente<\/th>\nAkzeptierte Formate<\/th>\nBeschreibung & Nutzungsvorschriften<\/th>\n<\/tr>\n<\/thead>\n
Deklaration<\/strong><\/td>\nSchl\u00fcsselwort<\/td>\nInitialisiert den 2D-Layout-Diagrammbereich. Muss genau das xychart-beta<\/code> Zeichenfolgenblock verwenden.<\/td>\n<\/tr>\n
Titel<\/strong><\/td>\nAngef\u00fchrte Zeichenfolge<\/td>\nEin optionaler globaler \u00dcberschrift, der zentriert unmittelbar \u00fcber dem Diagramm-Gitter angezeigt wird.<\/td>\n<\/tr>\n
X-Achsen-Konfiguration<\/strong><\/td>\nListe in eckigen Klammern \/ Bereich<\/td>\nDefiniert die Beschriftungen der horizontalen Skala. Akzeptiert kategorische Textzeichenfolgen in eckigen Klammern[A, B, C]<\/code> oder numerische Punktbereiche[100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Y-Achsen-Konfiguration<\/strong><\/td>\nTitelzeichenfolge \/ Skalenbegrenzungen<\/td>\nRichtet die vertikalen Skaleneinstellungen ein. Kann einfach eine Achsentitelzeichenfolge sein oder angepasst werden, um die unteren\/oberen Wertebereiche mithilfe von\"Titel\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
S\u00e4ulen-Darstellungsserie<\/strong><\/td>\nNumerisches Array<\/td>\nRendert Datens\u00e4tze als senkrechte S\u00e4ulen. Die Anzahl der Elemente im Datenarray muss genau der L\u00e4nge Ihrer X-Achsen-Kategorie entsprechen.<\/td>\n<\/tr>\n
Linien-Darstellungsserie<\/strong><\/td>\nNumerisches Array<\/td>\nRendert Datens\u00e4tze als kontinuierliche Linien, die die Datenpunkte \u00fcber den Gitterarbeitsbereich verbinden.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Erweiterte Datenanpassung (Anweisungen)<\/h2>\n
Sie k\u00f6nnen das visuelle Erscheinungsbild Ihres Diagrammarbeitsbereichs verfeinern, indem Sie eine Frontmatter-Konfigurationsbl\u00f6cke am absoluten Anfang Ihres Dokumentcode-Ausschnitts einbetten. Dadurch erhalten Sie vollst\u00e4ndige Layoutkontrolle \u00fcber benutzerdefinierte Hex-Farben, Linienst\u00e4rken der Plot-Serien und Sichtbarkeitsfelder f\u00fcr das Gitter.<\/p>\n
XY-Diagramm-Konfigurations-Attribut-Matrix<\/h3>\n\n\n\n\n\n\n\n\n
Eigenschaftskonfigurations-Schl\u00fcssel<\/th>\nWertoptionen<\/th>\nVisueller Ergebnis<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\nwahr<\/code> | falsch<\/code><\/td>\nSchaltet ein, ob die Hintergrundstrukturachsen-Gitterlinien \u00fcber die Koordinaten angezeigt werden.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nGanzzahl (Pixel)<\/td>\nLegt die feste Begrenzungs-Breite der Canvas-Anordnung des Gittersystems fest.<\/td>\n<\/tr>\n
chartHeight<\/code><\/td>\nGanzzahl (Pixel)<\/td>\nLegt die feste Begrenzungs-H\u00f6he der Canvas-Anordnung des Gittersystems fest.<\/td>\n<\/tr>\n
themeVariables.xyChart<\/code><\/td>\nFarbzuordnungs-Arrays<\/td>\nF\u00fcgt explizite hexadezimale Stilfarbbl\u00f6cke (z.\u202fB. backgroundColor<\/code>, titleColor<\/code>, oder benutzerdefinierte Farblistenpl\u00e4tze plotColorPalette<\/code>) in Ihre Diagramme ein.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Realit\u00e4tsnahes Blueprint: Mehrreihiger technischer Vergleich<\/h2>\n
Dieses umfassende Blueprint verfolgt eine Bewertung der Infrastrukturleistung. Es nutzt eine benutzerdefinierte Konfigurationsanweisung, um die Canvas-Abmessungen festzulegen, Hintergrund-Gitterlinienpfade anzuzeigen und eine explizite hexadezimale Farbpalette einzuf\u00fcgen. Es ordnet vier unterschiedliche Quartalsphasen zu und stellt sie als kombiniertes visuelles Kombinationsdiagramm dar (\u00fcberlappende Balkenreihen und Linienreihen zusammen).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/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 \"Ressourcen- vs. Ausf\u00fchrungs-Metriken Q1-Q4\"\r\n  x-axis [\"Quartal 1\", \"Quartal 2\", \"Quartal 3\", \"Quartal 4\"]\r\n  y-axis \"Leistungs-Metrik-Einheiten\" 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>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Syntax-Tipp:<\/strong> Wenn mehrere Datendiagramme \u00fcberlagert werden (z.\u202fB. beim Ausf\u00fchren eines bar<\/code> Datensatzes und eines line<\/code> Datensatzes innerhalb derselben Layout-Canvas), wird der Rendering-Engine sie stapeln oder nacheinander in der Reihenfolge zeichnen, in der sie im Text-Skript geschrieben sind. Ordnen Sie Ihre Datensbl\u00f6cke bewusst an, um visuelle Ausschnitte an den Canvas-Linien zu vermeiden.<\/em><\/p>\n\n
H\u00e4ufige Syntax-Fehler & Systembeschr\u00e4nkungen<\/h2>\n
Beim Kompilieren von dimensionsbasierten Matrixpfaden k\u00f6nnen einige subtile Konfigurationsfehler die Koordinatenberechnungen st\u00f6ren. Behalten Sie diese Fehlerbehebungsparameter im Auge:<\/p>\n
    \n
  • Datentypenl\u00e4nge nicht \u00fcbereinstimmend:<\/strong> Jeder einzelne bar<\/code> oder Linie<\/code>Das Datenreihen-Array *muss* genau die gleiche Anzahl von Eintr\u00e4gen enthalten wie in Ihrem X-Achse<\/code> Listenparameter. Wenn Sie 4 Kategorien auf Ihrer X-Achse haben, aber eine Datenliste mit 5 Zahlen bereitstellen, wird die Diagrammerstellung vollst\u00e4ndig fehlschlagen.<\/li>\n
  • Anf\u00fchrungszeichen-Grenzen:<\/strong> Wenn Sie Kategorien innerhalb der eckigen Klammern einer Achsenliste angeben, m\u00fcssen Textbl\u00f6cke, die Leerzeichen oder Sonderzeichen enthalten, sauber in doppelte Anf\u00fchrungszeichen gesetzt werden (z.\u202fB. [\"Phase 1\", \"Phase 2\"]<\/code>).<\/li>\n
  • Numerische Koordinaten-Grenzen:<\/strong> Wenn Sie manuelle Bereiche auf einer Achsenskala festlegen (z.\u202fB. 0 --> 500<\/code>), m\u00fcssen Sie explizit zwei Bindestriche gefolgt von einem Gr\u00f6\u00dfer-als-Zeichen verwenden (--><\/code>). Wenn Sie einen Bindestrich vergessen oder die Operatorzeichen durch Leerzeichen trennen, wird ein Verarbeitungslayout-Fehler ausgel\u00f6st.<\/li>\n
  • Positive Ganzzahl-Gewichte:<\/strong> Skalenwerte werden linearen Raumbl\u00f6cken zugeordnet. Stellen Sie sicher, dass die an Ihre Reihe \u00fcbergebenen Werte keine nicht-escaped Zeicheninhalte oder leere Parameter-Null-Pl\u00e4tze innerhalb von Arrays enthalten.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Ein XY-Chart ist eine umfassende Komponente zur Datenvisualisierung, die verwendet wird, um sowohl Liniendiagramme als auch Balkendiagramme in einer standardm\u00e4\u00dfigen zweidimensionalen Gitterkoordinatenanordnung darzustellen. Eingef\u00fchrt, um \u00e4ltere eigenst\u00e4ndige Diagrammschemata zu ersetzen und zu vereinen, der xychart-beta Rendering-Engine verarbeitet dynamisch benutzerdefinierte numerische…<\/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\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js XY-Chart-Syntax- & Konfigurationsleitfaden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/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\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/de\/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\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js XY-Chart-Syntax- & Konfigurationsleitfaden"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/2090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2090"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}