{"id":2088,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Dokumentacja sk\u0142adni i konfiguracji wykresu Sankey w Mermaid.js"},"content":{"rendered":"

Wykresy Sankey s\u0105 bardzo skutecznymi narz\u0119dziami wizualizacji, u\u017cywanymi do przedstawienia kierunkowego przep\u0142ywu ilo\u015bci mi\u0119dzy r\u00f3\u017cnymi w\u0119z\u0142ami w systemie. Poprzez skalowanie fizycznej szeroko\u015bci po\u0142\u0105cze\u0144 proporcjonalnie do obj\u0119to\u015bci przep\u0142ywu liczbowego pozwalaj\u0105 in\u017cynierom, analitykom i zespo\u0142om operacyjnym natychmiast wykrywa\u0107 istotne \u017ar\u00f3d\u0142a, alokacje zasob\u00f3w, nieefektywno\u015bci lub wycieki w z\u0142o\u017conych sieciach, takich jak sieci energetyczne, \u0142a\u0144cuchy dostaw czy portfele finansowe.<\/p>\n

Podstawowa struktura sk\u0142adni<\/h2>\n

Definicje uk\u0142adu Sankey opieraj\u0105 si\u0119 na zoptymalizowanym formacie strukturalnym CSV (warto\u015bci rozdzielane przecinkami) z trzema kolumnami. Ka\u017cdy plik zaczyna si\u0119 od jednego z nast\u0119puj\u0105cych nag\u0142\u00f3wk\u00f3w:sankey<\/code> lub sankey-beta<\/code> nag\u0142\u00f3wka deklaracji typu, po kt\u00f3rym nast\u0119puj\u0105 pojedyncze linie przep\u0142ywu zgodne z rygorystycznym wzorcem “\u0179r\u00f3d\u0142o,Docelowy, Warto\u015b\u0107<\/code>“.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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\nW\u0119ze\u0142 \u017ar\u00f3d\u0142owy,W\u0119ze\u0142 docelowy,150.50\r\nW\u0119ze\u0142 docelowy,Ostateczny w\u0119ze\u0142 wyj\u015bciowy,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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Odwo\u0142anie do sk\u0142adni<\/h2>\n
Poni\u017csza tabela przedstawia podstawowe zasady i parametry danych wymagane do poprawnego przetworzenia wykresu Sankey w Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
Element sk\u0142adni<\/th>\nWym\u00f3g typu<\/th>\nOpis i zasady u\u017cytkowania<\/th>\n<\/tr>\n<\/thead>\n
Deklaracja<\/strong><\/td>\nIdentyfikator s\u0142owa kluczowego<\/td>\nInicjuje silnik renderowania uk\u0142adu strumieniowego. Akceptuje “sankey<\/code> lub zgodny z wcze\u015bniejszymi wersjami “sankey-beta<\/code>” ci\u0105g znak\u00f3w.<\/td>\n<\/tr>\n
W\u0119ze\u0142 \u017ar\u00f3d\u0142owy<\/strong><\/td>\nEtykieta tekstowa<\/td>\nKategoria pocz\u0105tkowa, od kt\u00f3rej rozpoczyna si\u0119 przep\u0142yw zasob\u00f3w. Wielko\u015b\u0107 liter ma znaczenie.<\/td>\n<\/tr>\n
W\u0119ze\u0142 docelowy<\/strong><\/td>\nEtykieta ci\u0105gu znak\u00f3w<\/td>\nW\u0119ze\u0142 odbiorczy, w kt\u00f3rym ko\u0144czy si\u0119 okre\u015blona obj\u0119to\u015b\u0107 po\u0142\u0105czenia.<\/td>\n<\/tr>\n
Warto\u015b\u0107<\/strong><\/td>\nLiczba zmiennoprzecinkowa dodatnia \/ Liczba ca\u0142kowita dodatnia<\/td>\nWarto\u015b\u0107 liczbow\u0105 przep\u0142ywu. Grubo\u015b\u0107 narysowanej \u015bcie\u017cki jest bezpo\u015brednio obliczana wzgl\u0119dem tej warto\u015bci.<\/td>\n<\/tr>\n
Linia komentarza<\/strong><\/td>\nWska\u017anik sk\u0142adni<\/td>\nDowolny tekst poprzedzony podw\u00f3jnym znakiem procentu (“%%<\/code>) jest ignorowany przez kompilator, co pozwala na czyste adnotacje danych.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Obs\u0142uga znak\u00f3w specjalnych w etykietach w\u0119z\u0142\u00f3w<\/h2>\n
Poniewa\u017c przecinki i cudzys\u0142owy pe\u0142ni\u0105 rol\u0119 ogranicznik\u00f3w strukturalnych w silniku uk\u0142adu, specjalne wpisy nazw wymagaj\u0105 okre\u015blonych technik ucieczki, aby zapewni\u0107 poprawne wy\u015bwietlanie na p\u0142\u00f3tnie frontendu.<\/p>\n
1. Przecinki w nazwach<\/h3>\n
Je\u015bli konkretna etykieta w\u0119z\u0142a wymaga literowego przecinka, otocz ca\u0142\u0105 zawarto\u015b\u0107 ci\u0105gu w\u0119z\u0142a par\u0105 standardowych podw\u00f3jnych cudzys\u0142ow\u00f3w:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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\nBud\u017cet Pool,\"Operacje, Wynagrodzenia i Admin\",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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Cudzys\u0142owy w nazwach<\/h3>\n
Aby jawnie wy\u015bwietli\u0107 podw\u00f3jne cudzys\u0142owy w nazwie etykiety, otocz ca\u0142\u0105 warto\u015b\u0107 parametru zewn\u0119trznymi cudzys\u0142owami i u\u017cyj podw\u00f3jnej pary cudzys\u0142ow\u00f3w (“\"\"<\/code>) wewn\u0105trz ci\u0105gu warto\u015bci docelowej:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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\nKlastery serwer\u00f3w,\"Wewn\u0119trzny \"\"Kraw\u0119d\u017a\"\" W\u0119ze\u0142\",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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Zaawansowana konfiguracja motywu (dyrektywy)<\/h2>\n
Mo\u017cesz precyzyjnie dostosowa\u0107 prezentacj\u0119 diagramu, przekazuj\u0105c blok konfiguracji frontmatter na pocz\u0105tku fragmentu dokumentu. Pozwala to kontrolowa\u0107 style po\u0142\u0105cze\u0144, wype\u0142nienie uk\u0142adu, style tekstu oraz wyr\u00f3wnanie element\u00f3w bezpo\u015brednio z edytora tekstu surowego.<\/p>\n
Macierz atrybut\u00f3w konfiguracji Sankey<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Nazwa w\u0142a\u015bciwo\u015bci<\/th>\nDopuszczalne warto\u015bci<\/th>\nWynik wizualny<\/th>\n<\/tr>\n<\/thead>\n
poka\u017cWarto\u015bci<\/code><\/td>\nprawda<\/code> | fa\u0142sz<\/code><\/td>\nW\u0142\u0105cza lub wy\u0142\u0105cza drukowanie tekstu warto\u015bci przep\u0142ywu liczbowego bezpo\u015brednio w polach etykiet w\u0119z\u0142\u00f3w.<\/td>\n<\/tr>\n
kolorPo\u0142\u0105czenia<\/code><\/td>\n'\u017ar\u00f3d\u0142o'<\/code> | 'cel'<\/code> | 'gradient'<\/code> | '#hex'<\/code><\/td>\nOkre\u015bla mapowanie kolor\u00f3w dla \u015bcie\u017cek po\u0142\u0105cze\u0144.'gradient'<\/code> p\u0142ynnie \u0142\u0105czy kolory mi\u0119dzy po\u0142\u0105czonymi jednostkami.<\/td>\n<\/tr>\n
wyr\u00f3wnanieW\u0119z\u0142\u00f3w<\/code><\/td>\n'wyr\u00f3wnaj'<\/code> | 'lewo'<\/code> | 'prawo'<\/code> | '\u015brodek'<\/code><\/td>\nWyr\u00f3wnuje kolumny strukturalne wzd\u0142u\u017c siatki przestrzeni kanwy.<\/td>\n<\/tr>\n
stylEtykiety<\/code><\/td>\n'przestarza\u0142y'<\/code> | 'obrysowane'<\/code><\/td>\n'obrysowane'<\/code> dodaje mask\u0119 obramowania t\u0142a za tekstem, aby zapewni\u0107 wysok\u0105 czytelno\u015b\u0107 na z\u0142o\u017conych uk\u0142adach.<\/td>\n<\/tr>\n
szerokoscW\u0119z\u0142a<\/code><\/td>\nLiczba ca\u0142kowita (piksele)<\/td>\nUstawia szeroko\u015b\u0107 prostok\u0105t\u00f3w w\u0119z\u0142\u00f3w (Domy\u015blne: 10<\/code>).<\/td>\n<\/tr>\n
odstepW\u0119z\u0142a<\/code><\/td>\nLiczba ca\u0142kowita (piksele)<\/td>\nUstawia parametry odst\u0119pu pionowego mi\u0119dzy warstwami (Domy\u015blne: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Prawdziwy projekt: Dystrybucja sieci czystej energii<\/h2>\n
Ten kompleksowy projekt \u015bledzi system zarz\u0105dzania infrastruktur\u0105 sieci energetycznej. Pokazuje konfiguracje nag\u0142\u00f3wka \u2014 ustawia p\u0142ynne gradienty kolor\u00f3w po\u0142\u0105cze\u0144, style typografii obrysowanej oraz wy\u0142\u0105cza liczniki metryk w linii \u2014 w po\u0142\u0105czeniu z wielopoziomow\u0105 struktur\u0105 uk\u0142adu.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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    pokazujWartosci: false\r\n    kolorPo\u0142\u0105czenia: 'gradient'\r\n    wyr\u00f3wnanieW\u0119z\u0142a: 'justuj'\r\n    stylEtykiety: 'obrysowane'\r\n    szerokoscW\u0119z\u0142a: 15\r\n    odstepW\u0119z\u0142a: 18\r\n---\r\nsankey\r\n%% Wiersze danych \u017ar\u00f3d\u0142owych\r\nFarma s\u0142oneczna, Sie\u0107 magazynowania energii,120.50\r\nWiatraki, Sie\u0107 magazynowania energii,180.75\r\nWielka elektrownia wodna, Linia bezpo\u015bredniego przemys\u0142u,210.00\r\nImport paliw biologicznych, Stacja zapasowa termiczna,45.25\r\n\r\n%% W\u0119z\u0142y dystrybucji\r\nSie\u0107 magazynowania energii, Linie konsument\u00f3w mieszkaniowych,145.00\r\nSie\u0107 magazynowania energii, Linia bezpo\u015bredniego przemys\u0142u,110.25\r\nSie\u0107 magazynowania energii, Straty systemowe i rozpraszanie,46.00\r\n\r\n%% Ostateczne w\u0119z\u0142y ko\u0144cowe dostawy\r\nLinia bezpo\u015bredniego przemys\u0142u, Hub ci\u0119\u017ckiej produkcji,295.00\r\nLinia bezpo\u015bredniego przemys\u0142u, Sektor handlu detalicznego,25.25\r\nStacja zapasowa termiczna, Sektor handlu detalicznego,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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Typowe b\u0142\u0119dy sk\u0142adniowe i ograniczenia systemowe<\/h2>\n
Podczas kompilowania bardzo g\u0119stych tablic danych, kilka subtelnych b\u0142\u0119d\u00f3w konfiguracji spowoduje przerwanie analizy uk\u0142adu. Pami\u0119taj o tych zasadach rozwi\u0105zywania problem\u00f3w:<\/p>\n
    \n
  • Dok\u0142adna weryfikacja kolumn:<\/strong> Ka\u017cdy pojedynczy wiersz danych po deklaracji nag\u0142\u00f3wka musi zawiera\u0107 dok\u0142adnie trzy parametry oddzielone przecinkami. Dodanie czwartej kolumny lub pomini\u0119cie warto\u015bci spowoduje ca\u0142kowite zatrzymanie kompilacji diagramu.<\/li>\n
  • Zezwolenia na puste linie:<\/strong> W przeciwie\u0144stwie do tradycyjnych surowych regu\u0142 parsowania danych, Mermaid pozwala doda\u0107 puste, czyste linie wewn\u0105trz bloku kodu, aby logicznie oddzieli\u0107 r\u00f3\u017cne poziomy lub fazy przetwarzania danych modelu.<\/li>\n
  • Blokowanie p\u0119tli zamkni\u0119tych:<\/strong> Struktury Sankey s\u0105 projektowane \u015bci\u015ble wok\u00f3\u0142 skierowanych graf\u00f3w acyklicznych (DAG). Je\u015bli po\u0142\u0105czysz w\u0119ze\u0142 A z w\u0119z\u0142em B, a nast\u0119pnie spr\u00f3bujesz zapisa\u0107 \u015bcie\u017ck\u0119 wiersza \u0142\u0105cz\u0105cego w\u0119ze\u0142 B z powrotem do w\u0119z\u0142a A, silnik uk\u0142adu do\u015bwiadczy przerwania sprz\u0119\u017cenia zwrotnego i zako\u0144czy dzia\u0142anie z b\u0142\u0119dem.<\/li>\n
  • Ograniczenia danych warto\u015bci:<\/strong> Pola warto\u015bci mog\u0105 parsowa\u0107 tylko liczby dodatnie. Ujemne warto\u015bci lub surowe znaki alfabetyczne nie mog\u0105 zosta\u0107 przetworzone do parametr\u00f3w szeroko\u015bci.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Wykresy Sankey s\u0105 bardzo skutecznymi narz\u0119dziami wizualizacji, u\u017cywanymi do przedstawienia kierunkowego przep\u0142ywu ilo\u015bci mi\u0119dzy r\u00f3\u017cnymi w\u0119z\u0142ami w systemie. Poprzez skalowanie fizycznej szeroko\u015bci po\u0142\u0105cze\u0144 proporcjonalnie do obj\u0119to\u015bci przep\u0142ywu liczbowego pozwalaj\u0105 in\u017cynierom, analitykom i zespo\u0142om operacyjnym natychmiast wykrywa\u0107 istotne \u017ar\u00f3d\u0142a, alokacje zasob\u00f3w,…<\/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-2088","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\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\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\/pl\/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=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dokumentacja sk\u0142adni i konfiguracji wykresu Sankey w Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/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\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_locale":"pl_PL","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\/pl\/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":{"Szacowany czas czytania":"4 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/pl\/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\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pl\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Dokumentacja sk\u0142adni i konfiguracji wykresu Sankey w Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pl\/#website","url":"https:\/\/www.vpascode.com\/pl\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pl\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs\/2088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2088"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}