{"id":2091,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"},"modified":"2026-07-07T07:02:01","modified_gmt":"2026-07-07T07:02:01","slug":"mermaid-js-sankey-diagram-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Guide de syntaxe et de configuration des diagrammes Sankey de Mermaid.js"},"content":{"rendered":"

Les diagrammes Sankey sont des outils de visualisation tr\u00e8s efficaces utilis\u00e9s pour repr\u00e9senter le flux directionnel de quantit\u00e9s entre des n\u0153uds distincts au sein d’un syst\u00e8me. En ajustant physiquement la largeur des liens de connexion proportionnellement au volume num\u00e9rique du flux, ils permettent aux ing\u00e9nieurs, aux analystes et aux \u00e9quipes op\u00e9rationnelles d’identifier instantan\u00e9ment les principaux contributeurs, les affectations de ressources, les inefficacit\u00e9s ou les fuites au sein de r\u00e9seaux complexes tels que les r\u00e9seaux \u00e9lectriques, les cha\u00eenes d’approvisionnement et les portefeuilles financiers.<\/p>\n

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

Les d\u00e9finitions de disposition Sankey sont bas\u00e9es sur un format structur\u00e9 CSV (valeurs s\u00e9par\u00e9es par des virgules) optimis\u00e9 \u00e0 trois colonnes. Chaque fichier commence par soit le sankey<\/code> ou sankey-beta<\/code> d\u00e9claration de type d’en-t\u00eate, suivie de lignes de flux individuelles suivant un mod\u00e8le strict Source, Cible, Valeur<\/code> mod\u00e8le.<\/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 
sankey\r\nN\u0153ud source,N\u0153ud cible,150,50\r\nN\u0153ud cible,N\u0153ud de sortie final,90,25<\/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 r\u00e8gles et param\u00e8tres principaux des donn\u00e9es n\u00e9cessaires pour analyser correctement un diagramme Sankey dans Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
\u00c9l\u00e9ment de syntaxe<\/th>\nExigence de type<\/th>\nDescription et r\u00e8gles d’utilisation<\/th>\n<\/tr>\n<\/thead>\n
D\u00e9claration<\/strong><\/td>\nIdentificateur de mot-cl\u00e9<\/td>\nInitialise le moteur de rendu de disposition en flux. Accepte sankey<\/code> ou le mode compatible avec les versions ant\u00e9rieures sankey-beta<\/code> cha\u00eene.<\/td>\n<\/tr>\n
N\u0153ud source<\/strong><\/td>\n\u00c9tiquette de cha\u00eene<\/td>\nLa cat\u00e9gorie d’origine o\u00f9 commence le flux de ressources. Identifiant sensible \u00e0 la casse.<\/td>\n<\/tr>\n
N\u0153ud cible<\/strong><\/td>\n\u00c9tiquette de cha\u00eene<\/td>\nLe n\u0153ud destinataire o\u00f9 le volume de lien sp\u00e9cifique se termine.<\/td>\n<\/tr>\n
Valeur<\/strong><\/td>\nNombre flottant \/ entier positif<\/td>\nLe poids num\u00e9rique du flux. L’\u00e9paisseur du chemin rendu est directement calcul\u00e9e en fonction de cette valeur.<\/td>\n<\/tr>\n
Ligne de commentaire<\/strong><\/td>\nIndicateur de syntaxe<\/td>\nTout texte pr\u00e9c\u00e9d\u00e9 d’un signe de pourcentage double (“%%<\/code>) est ignor\u00e9 par le compilateur, permettant des annotations de donn\u00e9es propres.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Gestion des caract\u00e8res sp\u00e9ciaux dans les \u00e9tiquettes de n\u0153uds<\/h2>\n
Parce que les virgules et les guillemets servent de d\u00e9limiteurs syst\u00e8me structurels au sein du moteur de mise en page, les entr\u00e9es de nom sp\u00e9cialis\u00e9es n\u00e9cessitent des techniques d’\u00e9chappement sp\u00e9cifiques pour garantir qu’elles s’affichent correctement sur le canevas frontend.<\/p>\n
1. Virgules dans les noms<\/h3>\n
Si une \u00e9tiquette de n\u0153ud sp\u00e9cifique n\u00e9cessite une virgule litt\u00e9rale, entourez l’ensemble du conteneur de cha\u00eene de n\u0153ud avec une paire de guillemets doubles standards :<\/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                    
sankey\r\nPool budg\u00e9taire,\"Op\u00e9rations, Paie et Administration\",45000<\/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
2. Guillemets dans les noms<\/h3>\n
Pour afficher explicitement des guillemets doubles \u00e0 l’int\u00e9rieur d’un nom d’\u00e9tiquette, entourez l’ensemble du param\u00e8tre avec des guillemets externes, et utilisez une paire de guillemets doubles (“\"\"<\/code>) \u00e0 l’int\u00e9rieur de la cha\u00eene de valeur cible :<\/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                    
sankey\r\nClusters serveurs,\"N\u0153ud interne \"\"Edge\"\"\",850<\/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
Configuration avanc\u00e9e du th\u00e8me (directives)<\/h2>\n
Vous pouvez affiner la pr\u00e9sentation de votre diagramme en passant un bloc de configuration frontmatter en haut de votre extrait de document. Cela vous permet de contr\u00f4ler les styles des liens, les marges de mise en page, les styles de texte et l’alignement des \u00e9l\u00e9ments directement depuis votre \u00e9diteur de texte brut.<\/p>\n
Matrice des attributs de configuration Sankey<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Nom de la propri\u00e9t\u00e9<\/th>\nValeurs accept\u00e9es<\/th>\nR\u00e9sultat visuel<\/th>\n<\/tr>\n<\/thead>\n
showValues<\/code><\/td>\nvrai<\/code> | faux<\/code><\/td>\nActive ou d\u00e9sactive l’affichage du texte de la valeur num\u00e9rique du flux directement \u00e0 l’int\u00e9rieur des bo\u00eetes d’\u00e9tiquette des n\u0153uds.<\/td>\n<\/tr>\n
linkColor<\/code><\/td>\n'source'<\/code> | 'cible'<\/code> | 'd\u00e9grad\u00e9'<\/code> | '#hex'<\/code><\/td>\nD\u00e9termine le mappage de couleur des chemins de lien.'d\u00e9grad\u00e9'<\/code> m\u00e9lange les couleurs de mani\u00e8re fluide entre les entit\u00e9s connect\u00e9es.<\/td>\n<\/tr>\n
nodeAlignment<\/code><\/td>\n'justifier'<\/code> | 'gauche'<\/code> | 'droite'<\/code> | 'centr\u00e9'<\/code><\/td>\nAligne les colonnes structurelles sur la grille d’espace de la toile.<\/td>\n<\/tr>\n
labelStyle<\/code><\/td>\n'ancien'<\/code> | 'en trait'<\/code><\/td>\n'en trait'<\/code> ajoute un masque de contour d’arri\u00e8re-plan derri\u00e8re le texte pour garantir une grande lisibilit\u00e9 sur des mises en page complexes.<\/td>\n<\/tr>\n
largeurNoeud<\/code><\/td>\nEntier (pixels)<\/td>\nD\u00e9finit la largeur des rectangles des n\u0153uds (par d\u00e9faut : 10<\/code>).<\/td>\n<\/tr>\n
espacementNoeud<\/code><\/td>\nEntier (pixels)<\/td>\nD\u00e9finit les param\u00e8tres d’espacement vertical entre les lignes empil\u00e9es (par d\u00e9faut : 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Maquette du monde r\u00e9el : Distribution du r\u00e9seau d’\u00e9nergie propre<\/h2>\n
Cette maquette compl\u00e8te suit un syst\u00e8me de gestion du r\u00e9seau \u00e9lectrique d’infrastructure. Elle met en \u00e9vidence les configurations de frontmatter \u2014 d\u00e9finissant des d\u00e9grad\u00e9s de couleur doux pour les liens, des styles typographiques en trait, et d\u00e9sactivant les comptages de m\u00e9triques en ligne \u2014 associ\u00e9s \u00e0 une structure de mise en page en plusieurs niveaux.<\/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  sankey:\r\n    showValues: false\r\n    linkColor: 'gradient'\r\n    nodeAlignment: 'justifi\u00e9'\r\n    labelStyle: 'en trait'\r\n    nodeWidth: 15\r\n    nodePadding: 18\r\n---\r\nsankey\r\n%% Lignes de donn\u00e9es sources\r\nFerme solaire,Grille de stockage d'\u00e9nergie,120.50\r\n\u00c9oliennes,Grille de stockage d'\u00e9nergie,180.75\r\nBarrage hydro\u00e9lectrique,Ligne industrielle directe,210.00\r\nImportations de biocarburants,Station de secours thermique,45.25\r\n\r\n%% N\u0153uds de distribution\r\nGrille de stockage d'\u00e9nergie,Lignes de consommation r\u00e9sidentielle,145.00\r\nGrille de stockage d'\u00e9nergie,Ligne industrielle directe,110.25\r\nGrille de stockage d'\u00e9nergie,Pertes du syst\u00e8me et dissipation,46.00\r\n\r\n%% N\u0153uds de terminaison de livraison finale\r\nLigne industrielle directe,Hub de fabrication lourde,295.00\r\nLigne industrielle directe,Secteurs commerciaux de d\u00e9tail,25.25\r\nStation de secours thermique,Secteurs commerciaux de d\u00e9tail,45.25<\/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
P\u00e9ch\u00e9s de syntaxe courants et contraintes du syst\u00e8me<\/h2>\n
Lors de la compilation de tableaux de donn\u00e9es tr\u00e8s denses, quelques erreurs de configuration subtiles d\u00e9clenchent des ruptures dans l’analyse du layout. Gardez ces r\u00e8gles de d\u00e9pannage \u00e0 l’esprit :<\/p>\n
    \n
  • V\u00e9rification exacte des colonnes :<\/strong> Chaque ligne d’\u00e9l\u00e9ment suivant la d\u00e9claration d’en-t\u00eate principale doit contenir exactement trois param\u00e8tres s\u00e9par\u00e9s par des virgules. L’ajout d’une quatri\u00e8me colonne ou la suppression d’une valeur entra\u00eenera compl\u00e8tement l’arr\u00eat de la compilation du diagramme.<\/li>\n
  • Autorisations de lignes vides :<\/strong> Contrairement aux r\u00e8gles rigides de traitement des donn\u00e9es traditionnelles, Mermaid vous permet d’ajouter des lignes vides et propres \u00e0 l’int\u00e9rieur du bloc de code pour s\u00e9parer logiquement diff\u00e9rents niveaux ou phases de traitement de vos donn\u00e9es mod\u00e8les.<\/li>\n
  • Blocs de boucles circulaires :<\/strong> Les structures Sankey sont con\u00e7ues strictement autour de graphes acycliques orient\u00e9s (DAG). Si vous connectez le n\u0153ud A au n\u0153ud B, puis tentez d’\u00e9crire un chemin de ligne reliant le n\u0153ud B de retour au n\u0153ud A, le moteur de mise en page subira une rupture de r\u00e9troaction et \u00e9chouera.<\/li>\n
  • Contraintes des donn\u00e9es de valeur :<\/strong> Les champs de valeur ne peuvent traiter que des nombres positifs. Les valeurs n\u00e9gatives ou les caract\u00e8res alphab\u00e9tiques bruts ne peuvent pas \u00eatre rendus dans les param\u00e8tres de largeur.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Les diagrammes Sankey sont des outils de visualisation tr\u00e8s efficaces utilis\u00e9s pour repr\u00e9senter le flux directionnel de quantit\u00e9s entre des n\u0153uds distincts au sein d’un syst\u00e8me. En ajustant physiquement la largeur des liens de connexion proportionnellement au volume num\u00e9rique du…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":15,"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-2091","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Sankey Diagram | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a 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-sankey-diagram-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 Sankey Diagram | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-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_6a4ca539ea639.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-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"name\":\"Mermaid Sankey Diagram | 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-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"datePublished\":\"2026-07-07T07:02:01+00:00\",\"description\":\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-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 diagrammes Sankey 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 Sankey Diagram | VPasCode Text to Diagram Guide","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a 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-sankey-diagram-syntax-configuration-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","og_description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.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-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","name":"Mermaid Sankey Diagram | 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-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","datePublished":"2026-07-07T07:02:01+00:00","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-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 diagrammes Sankey 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\/2091","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=2091"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}