{"id":2089,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Guide de syntaxe et de configuration des graphiques XY de Mermaid.js"},"content":{"rendered":"

Un graphique XY est un composant de visualisation de donn\u00e9es complet utilis\u00e9 pour afficher \u00e0 la fois des graphiques lin\u00e9aires et des graphiques \u00e0 barres sur une disposition standard en grille bidimensionnelle. Introduit pour remplacer et regrouper les anciens sch\u00e9mas de graphiques autonomes, le xychart-beta<\/code> moteur de rendu traite dynamiquement des jeux de donn\u00e9es num\u00e9riques personnalis\u00e9s, met automatiquement \u00e0 l’\u00e9chelle des grilles structurelles r\u00e9actives et permet d’afficher simultan\u00e9ment plusieurs s\u00e9ries de donn\u00e9es ind\u00e9pendantes et superpos\u00e9es.<\/p>\n

Structure de syntaxe de base<\/h2>\n

Chaque graphique XY commence par le xychart-beta<\/code> en-t\u00eate de d\u00e9claration. Il est suivi de la configuration d’un tableau de cat\u00e9gories de l’axe X horizontal, d’un titre de l’axe Y vertical ou d’une limite de plage de donn\u00e9es, et d’au moins une s\u00e9rie de trac\u00e9 de donn\u00e9es explicite (telle qu’une ligne<\/code> ou barre<\/code> bloc).<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans 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  titre \"Graphique de performance d'exemple\"\r\n  axe-x [Jan, F\u00e9v, Mar, Avr]\r\n  axe-y \"Chiffre d'affaires (USD)\"\r\n  barre [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>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
R\u00e9f\u00e9rence de syntaxe<\/h2>\n
Le tableau ci-dessous d\u00e9taille les d\u00e9finitions de donn\u00e9es principales et les cl\u00e9s de configuration n\u00e9cessaires pour structurer correctement un graphique XY dans Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Composant de syntaxe<\/th>\nFormats accept\u00e9s<\/th>\nDescription et r\u00e8gles d’utilisation<\/th>\n<\/tr>\n<\/thead>\n
D\u00e9claration<\/strong><\/td>\nMot-cl\u00e9<\/td>\nInitialise l’espace de travail du graphique en disposition 2D. Doit utiliser exactement le bloc de cha\u00eene xychart-beta<\/code> bloc de cha\u00eene.<\/td>\n<\/tr>\n
Titre<\/strong><\/td>\nCha\u00eene entre guillemets<\/td>\nUn titre global facultatif affich\u00e9 centr\u00e9 imm\u00e9diatement au-dessus de la grille du canevas du graphique.<\/td>\n<\/tr>\n
Configuration de l’axe X<\/strong><\/td>\nListe entre crochets \/ Plage<\/td>\nD\u00e9finit les \u00e9tiquettes d’\u00e9chelle horizontale. Accepte des cha\u00eenes de texte cat\u00e9goriques entre crochets[A, B, C]<\/code> ou des plages de points num\u00e9riques[100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Configuration de l’axe Y<\/strong><\/td>\nCha\u00eene de titre \/ Limites d’\u00e9chelle<\/td>\nConfigure les param\u00e8tres d’\u00e9chelle verticale. Peut simplement \u00eatre une cha\u00eene de titre d’axe, ou personnalis\u00e9e pour limiter les plages de valeurs inf\u00e9rieures\/sup\u00e9rieures en utilisant\"Titre\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
S\u00e9rie de trac\u00e9s en barres<\/strong><\/td>\nTableau num\u00e9rique<\/td>\nAffiche les jeux de donn\u00e9es sous forme de barres verticales. Le nombre d’\u00e9l\u00e9ments dans le tableau de donn\u00e9es doit correspondre exactement \u00e0 la longueur de vos cat\u00e9gories de l’axe X.<\/td>\n<\/tr>\n
S\u00e9rie de trac\u00e9s en lignes<\/strong><\/td>\nTableau num\u00e9rique<\/td>\nAffiche les jeux de donn\u00e9es sous forme de lignes continues reliant les points de donn\u00e9es \u00e0 travers l’espace de travail en grille.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Personnalisation avanc\u00e9e des donn\u00e9es (directives)<\/h2>\n
Vous pouvez affiner l’apparence visuelle de votre espace de travail de graphique en int\u00e9grant un bloc de configuration frontmatter tout en haut de votre extrait de code de document. Cela vous donne un contr\u00f4le total sur la mise en page, y compris les couleurs hex personnalis\u00e9es, les \u00e9paisseurs des lignes des s\u00e9ries de trac\u00e9s et les champs de visibilit\u00e9 de l’affichage de la grille.<\/p>\n
Matrice des attributs de configuration du graphique XY<\/h3>\n\n\n\n\n\n\n\n\n
Cl\u00e9 de configuration de propri\u00e9t\u00e9<\/th>\nOptions de valeur<\/th>\nR\u00e9sultat visuel<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\nvrai<\/code> | faux<\/code><\/td>\nActive ou d\u00e9sactive l’affichage des traits de grille des lignes d’axe structurel de fond \u00e0 travers les coordonn\u00e9es.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nEntier (pixels)<\/td>\nD\u00e9finit la largeur de mise en page fixe de la zone de dessin de la grille du syst\u00e8me.<\/td>\n<\/tr>\n
hauteurGraphique<\/code><\/td>\nEntier (pixels)<\/td>\nD\u00e9finit la hauteur de mise en page fixe de la zone de dessin de la grille du syst\u00e8me.<\/td>\n<\/tr>\n
variablesTh\u00e8me.xyChart<\/code><\/td>\nTableaux de mappage des couleurs<\/td>\nIns\u00e8re des blocs de couleur explicites en hexad\u00e9cimal (par exemple, couleurFond<\/code>, couleurTitre<\/code>, ou des emplacements de liste de couleurs personnalis\u00e9es paletteCouleursGraphique<\/code>) dans vos graphiques.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Maquette du monde r\u00e9el : Comparaison technique multi-s\u00e9ries<\/h2>\n
Cette maquette compl\u00e8te suit une revue des performances d’une infrastructure. Elle utilise une directive de configuration personnalis\u00e9e pour fixer les dimensions du canevas, afficher les chemins des lignes de grille de fond et injecter une palette de couleurs hexad\u00e9cimales explicite. Elle mappe quatre phases trimestrielles distinctes, les rendant sous forme d’un graphique combin\u00e9 visuel (des s\u00e9ries de barres superpos\u00e9es et des graphiques de s\u00e9ries de lignes ensemble).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans 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    largeurGraphique: 700\r\n    hauteurGraphique: 400\r\n    afficherLigne: true\r\n  variablesTh\u00e8me:\r\n    xychart:\r\n      couleurTitre: \"#0072B1\"\r\n      paletteCouleursGraphique: \"#0072B1, #E06000\"\r\n---\r\nxychart-beta\r\n  titre \"M\u00e9triques Ressources vs Ex\u00e9cution Q1-Q4\"\r\n  axeX [\"Trimestre 1\", \"Trimestre 2\", \"Trimestre 3\", \"Trimestre 4\"]\r\n  axeY \"Unit\u00e9s de m\u00e9triques de performance\" 0 --> 100\r\n  barres [45, 65, 80, 95]\r\n  ligne [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>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Astuce de syntaxe :<\/strong> Lorsque vous superposez plusieurs graphiques de donn\u00e9es (par exemple, en ex\u00e9cutant un barre<\/code> jeu de donn\u00e9es et un ligne<\/code> jeu de donn\u00e9es dans le m\u00eame canevas de mise en page), le moteur de rendu les empile ou les dessine s\u00e9quentiellement dans l’ordre o\u00f9 ils sont \u00e9crits dans le script texte. Organisez vos blocs de donn\u00e9es intentionnellement pour \u00e9viter le d\u00e9coupage visuel sur les lignes du canevas.<\/em><\/p>\n\n
P\u00e9ch\u00e9s courants de syntaxe et contraintes du syst\u00e8me<\/h2>\n
Lors de la compilation des chemins de matrices dimensionnelles, quelques erreurs de configuration subtiles perturberont les calculs des coordonn\u00e9es. Gardez ces param\u00e8tres de d\u00e9pannage \u00e0 l’esprit :<\/p>\n
    \n
  • Incoh\u00e9rence de longueur des donn\u00e9es :<\/strong> Chaque barre<\/code> ou ligne<\/code> le tableau de s\u00e9ries de donn\u00e9es *doit* contenir exactement le m\u00eame nombre d’\u00e9l\u00e9ments que d\u00e9fini dans votre axe des x<\/code> param\u00e8tre de liste. Avoir 4 cat\u00e9gories sur votre axe des x tout en fournissant une liste de donn\u00e9es de 5 nombres rompra compl\u00e8tement la compilation du graphique.<\/li>\n
  • Limites des guillemets :<\/strong> Lorsque vous sp\u00e9cifiez des cat\u00e9gories \u00e0 l’int\u00e9rieur des crochets d’une liste d’axes, les blocs de texte contenant des espaces ou des caract\u00e8res sp\u00e9ciaux doivent \u00eatre entour\u00e9s proprement de guillemets doubles (par exemple, [\"Phase 1\", \"Phase 2\"]<\/code>).<\/li>\n
  • Bornes de coordonn\u00e9es num\u00e9riques :<\/strong> Lorsque vous d\u00e9finissez des plages manuelles sur une \u00e9chelle d’axe (par exemple, 0 --> 500<\/code>), vous devez utiliser explicitement deux tirets suivis d’un symbole de plus grand que (--><\/code>). Oublier un tiret ou s\u00e9parer les caract\u00e8res op\u00e9rateurs par des espaces d\u00e9clenchera une erreur de mise en page de traitement.<\/li>\n
  • Poids entiers positifs :<\/strong> Les valeurs d’\u00e9chelle sont mapp\u00e9es sur des blocs d’espace lin\u00e9aire. Assurez-vous que les valeurs transmises \u00e0 vos s\u00e9ries ne contiennent pas d’\u00e9l\u00e9ments de caract\u00e8res non \u00e9chapp\u00e9s ou de param\u00e8tres vides nuls \u00e0 l’int\u00e9rieur des tableaux.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Un graphique XY est un composant de visualisation de donn\u00e9es complet utilis\u00e9 pour afficher \u00e0 la fois des graphiques lin\u00e9aires et des graphiques \u00e0 barres sur une disposition standard en grille bidimensionnelle. Introduit pour remplacer et regrouper les anciens sch\u00e9mas…<\/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-2089","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\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guide de syntaxe et de configuration des graphiques XY de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/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\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_locale":"fr_FR","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\/fr\/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":{"Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Guide de syntaxe et de configuration des graphiques XY de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2089"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}