{"id":2091,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Mermaid.js Sankey-Diagram-Syntax- & Konfigurationsleitfaden"},"content":{"rendered":"

Sankey-Diagramme sind \u00e4u\u00dferst effektive Visualisierungswerkzeuge, die verwendet werden, um die gerichtete Flie\u00dfrichtung von Mengen zwischen verschiedenen Knoten innerhalb eines Systems darzustellen. Durch die proportionale Skalierung der physischen Breite der Verbindungsverbindungen entsprechend dem numerischen Flussvolumen k\u00f6nnen Ingenieure, Analysten und Betriebsteams sofort Hauptbeitr\u00e4ge, Ressourcenallokationen, Ineffizienzen oder Lecks innerhalb komplexer Netzwerke wie Energienetze, Lieferketten und Finanzportfolios erkennen.<\/p>\n

Grundlegende Syntaxstruktur<\/h2>\n

Sankey-Layoutdefinitionen basieren auf einem optimierten, 3-Spalten-CSV-Format (komma-getrennte Werte). Jede Datei beginnt entweder mit dem “sankey<\/code> oder sankey-beta<\/code> Typ-Deklarationskopf, gefolgt von einzelnen Flusszeilen, die einem strengen “Quelle,Ziel,Wert<\/code>“-Muster.<\/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 
sankey\r\nQuellknoten,Zielknoten,150,50\r\nZielknoten,Endausgabeknoten,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>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Syntaxreferenz<\/h2>\n
Die Tabelle unten erl\u00e4utert die wichtigsten Datenregeln und Parameter, die erforderlich sind, um ein Sankey-Diagramm korrekt in Mermaid.js zu parsen.<\/p>\n\n\n\n\n\n\n\n\n\n
Syntaxelement<\/th>\nTypanforderung<\/th>\nBeschreibung und Verwendungsregeln<\/th>\n<\/tr>\n<\/thead>\n
Deklaration<\/strong><\/td>\nSchl\u00fcsselwort-Bezeichner<\/td>\nInitialisiert die Stream-Rendering-Layout-Engine. Akzeptiert “sankey<\/code> oder das r\u00fcckw\u00e4rtskompatible “sankey-beta<\/code>“-Zeichenfolge.<\/td>\n<\/tr>\n
Quellknoten<\/strong><\/td>\nZeichenfolgenbezeichnung<\/td>\nDie urspr\u00fcngliche Kategorie, in der der Ressourcenfluss beginnt. Gro\u00df-\/Kleinschreibung beachtender Bezeichner.<\/td>\n<\/tr>\n
Zielknoten<\/strong><\/td>\nZeichenfolgenbeschriftung<\/td>\nDer Empf\u00e4ngerknoten, an dem das spezifische Linkvolumen endet.<\/td>\n<\/tr>\n
Wert<\/strong><\/td>\nPositive Gleitkommazahl \/ Ganzzahl<\/td>\nDer numerische Gewichtung des Flusses. Die Dicke des gerenderten Pfades wird direkt relativ zu diesem Wert berechnet.<\/td>\n<\/tr>\n
Kommentarzeile<\/strong><\/td>\nSyntaxindikator<\/td>\nJeder Text, der durch ein doppeltes Prozentzeichen (“%%<\/code>) wird vom Compiler ignoriert, was saubere Datenannotationen erm\u00f6glicht.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Behandlung spezialisierter Zeichen in Knotenbeschriftungen<\/h2>\n
Da Kommas und Anf\u00fchrungszeichen innerhalb des Layout-Engines als strukturelle Systemtrennzeichen dienen, erfordern spezialisierte Namenseingaben spezifische Escape-Techniken, um sicherzustellen, dass sie korrekt auf der Frontend-Leinwand angezeigt werden.<\/p>\n
1. Kommas in Namen<\/h3>\n
Wenn eine spezifische Knotenbeschriftung ein w\u00f6rtliches Komma erfordert, umschlie\u00dfen Sie den gesamten Knoten-String-Container mit einem Paar standardisierter doppelter Anf\u00fchrungszeichen:<\/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                    
sankeyrnBudgetpool,\"Operations, Gehaltsabrechnung & Verwaltung\",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>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Anf\u00fchrungszeichen in Namen<\/h3>\n
Um doppelte Anf\u00fchrungszeichen innerhalb einer Beschriftung explizit darzustellen, umschlie\u00dfen Sie den gesamten Parameter mit \u00e4u\u00dferen Anf\u00fchrungszeichen und verwenden Sie ein dupliziertes Paar doppelter Anf\u00fchrungszeichen (“\"\"<\/code>) innerhalb der Zielwertzeichenfolge:<\/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                    
sankeyrnServer-Cluster,\"Intern \"\"Edge\"\"-Knoten\",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>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Erweiterte Themenkonfiguration (Anweisungen)<\/h2>\n
Sie k\u00f6nnen die Darstellung Ihres Diagramms verfeinern, indem Sie einen Frontmatter-Konfigurationsblock am Anfang Ihres Dokumentausschnitts \u00fcbergeben. Dadurch k\u00f6nnen Sie Link-Stile, Layout-Padding, Textstile und Elementausrichtungen direkt von Ihrem Roh-Text-Editor aus steuern.<\/p>\n
Sankey-Konfigurations-Attributmatrix<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Eigenschaftsname<\/th>\nAkzeptierte Werte<\/th>\nVisueller Ergebnis<\/th>\n<\/tr>\n<\/thead>\n
showValues<\/code><\/td>\nwahr<\/code> | falsch<\/code><\/td>\nSchaltet ein, ob der numerische Flusswerttext direkt innerhalb der Knotenbeschriftungsboxen gedruckt wird.<\/td>\n<\/tr>\n
linkColor<\/code><\/td>\n'source'<\/code> | 'target'<\/code> | 'gradient'<\/code> | '#hex'<\/code><\/td>\nBestimmt die Farbzuordnung der Verbindungswege.'gradient'<\/code> mischt die Farben nahtlos zwischen den verbundenen Entit\u00e4ten.<\/td>\n<\/tr>\n
nodeAlignment<\/code><\/td>\n'justify'<\/code> | 'left'<\/code> | 'right'<\/code> | 'center'<\/code><\/td>\nJustiert strukturelle Spalten \u00fcber das Raster des Zeichenbereichs.<\/td>\n<\/tr>\n
labelStyle<\/code><\/td>\n'legacy'<\/code> | 'umrandet'<\/code><\/td>\n'umrandet'<\/code> f\u00fcgt eine Hintergrundstrichmaske hinter den Text hinzu, um eine hohe Scannbarkeit \u00fcber komplexe Layouts zu gew\u00e4hrleisten.<\/td>\n<\/tr>\n
nodeWidth<\/code><\/td>\nGanzzahl (Pixel)<\/td>\nLegt die Breite der Knotenrechtecke fest (Standard: 10<\/code>).<\/td>\n<\/tr>\n
nodePadding<\/code><\/td>\nGanzzahl (Pixel)<\/td>\nLegt die vertikalen Abstandseinstellungen zwischen gestapelten Zeilen fest (Standard: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Realit\u00e4tsnahe Vorlage: Verteilung von sauberer Energie-Infrastruktur<\/h2>\n
Diese umfassende Vorlage verfolgt ein Infrastruktur-Netzwerk-Management-System. Sie zeigt Frontmatter-Konfigurationen \u2013 Einstellung von sanften Link-Farbverl\u00e4ufen, umrandete Typografie-Stile und Deaktivierung von Inline-Metrikz\u00e4hlen \u2013 in Kombination mit einer mehrschichtigen Layoutstruktur.<\/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  sankey:\r\n    showValues: false\r\n    linkColor: 'gradient'\r\n    nodeAlignment: 'justify'\r\n    labelStyle: 'outlined'\r\n    nodeWidth: 15\r\n    nodePadding: 18\r\n---\r\nsankey\r\n%% Quelldatenzeilen\r\nSolarfarm,Stromspeicher-Netz,120.50\r\nWindkraftanlagen,Stromspeicher-Netz,180.75\r\nWasserkraftwerk,Direkte Industrielinie,210.00\r\nBiokraftstoff-Importe,Thermische Notstation,45.25\r\n\r\n%% Verteilungsknoten\r\nStromspeicher-Netz,Haushaltsverbraucherlinien,145.00\r\nStromspeicher-Netz,Direkte Industrielinie,110.25\r\nStromspeicher-Netz,Verluste und Dissipation im System,46.00\r\n\r\n%% Endpunkte der Lieferung\r\nDirekte Industrielinie,Schwerindustriehub,295.00\r\nDirekte Industrielinie,Handels- und Einzelhandelssektoren,25.25\r\nThermische Notstation,Handels- und Einzelhandelssektoren,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>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
H\u00e4ufige Syntax-Fehler und Systembeschr\u00e4nkungen<\/h2>\n
Beim Kompilieren von sehr dichten Daten-Arrays k\u00f6nnen einige subtile Konfigurationsfehler zu Unterbrechungen beim Layout-Parsing f\u00fchren. Behalten Sie diese Fehlerbehebungsregeln im Ged\u00e4chtnis:<\/p>\n
    \n
  • Genauige Spaltenpr\u00fcfung:<\/strong> Jede einzelne Zeile nach der Hauptkopfzeile muss genau drei durch Kommas getrennte Parameter enthalten. Das Hinzuf\u00fcgen einer vierten Spalte oder das Auslassen eines Wertgewichts wird die Diagrammkompilierung vollst\u00e4ndig stoppen.<\/li>\n
  • Leerzeilen-Zulassung:<\/strong> Im Gegensatz zu traditionellen starren Regeln f\u00fcr die Datenparsung erlaubt Mermaid Ihnen, leere, saubere Zeilen innerhalb des Codeblocks hinzuzuf\u00fcgen, um logisch verschiedene Ebenen oder Verarbeitungsphasen Ihrer Modell-Daten zu trennen.<\/li>\n
  • Zirkul\u00e4re Schleifenbl\u00f6cke:<\/strong> Sankey-Strukturen sind streng auf gerichtete azyklische Graphen (DAGs) ausgelegt. Wenn Sie Knoten A mit Knoten B verbinden und dann versuchen, eine Zeilenpfadverbindung von Knoten B zur\u00fcck zu Knoten A zu schreiben, wird die Layout-Engine-Mathematik eine R\u00fcckkopplungsst\u00f6rung erfahren und fehlschlagen.<\/li>\n
  • Einschr\u00e4nkungen f\u00fcr Wertdaten:<\/strong> Wertfelder k\u00f6nnen nur positive Zahlen verarbeiten. Negative Werte oder rohe alphabetische Zeichen k\u00f6nnen nicht in Breitenparameter umgesetzt werden.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Sankey-Diagramme sind \u00e4u\u00dferst effektive Visualisierungswerkzeuge, die verwendet werden, um die gerichtete Flie\u00dfrichtung von Mengen zwischen verschiedenen Knoten innerhalb eines Systems darzustellen. Durch die proportionale Skalierung der physischen Breite der Verbindungsverbindungen entsprechend dem numerischen Flussvolumen k\u00f6nnen Ingenieure, Analysten und Betriebsteams sofort…<\/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\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-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 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\/de\/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=\"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-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-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 Sankey-Diagram-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 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\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/de\/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\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-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 Sankey-Diagram-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\/2091","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=2091"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}