{"id":2089,"date":"2026-07-03T09:26:10","date_gmt":"2026-07-03T09:26:10","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/mermaid-js-treemap-diagram-syntax-layout-guide\/"},"modified":"2026-07-03T09:26:10","modified_gmt":"2026-07-03T09:26:10","slug":"mermaid-js-treemap-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","title":{"rendered":"Sk\u0142adnia i przewodnik uk\u0142adu wykresu drzewa Mermaid.js"},"content":{"rendered":"

Wykres drzewa wy\u015bwietla dane hierarchiczne jako zestaw zagnie\u017cd\u017conych prostok\u0105t\u00f3w. Ka\u017cda ga\u0142\u0105\u017a drzewa reprezentowana jest prostok\u0105tem, kt\u00f3ry nast\u0119pnie jest wy\u0142o\u017cony mniejszymi prostok\u0105tami przedstawiaj\u0105cymi podga\u0142\u0119zie. Wielko\u015b\u0107 ka\u017cdego prostok\u0105ta jest doskonale proporcjonalna do jego warto\u015bci liczbowej, co czyni go doskona\u0142ym wyborem do przekszta\u0142cania tekstu na wykres przy por\u00f3wnywaniu cz\u0119\u015bci ca\u0142o\u015bci w z\u0142o\u017conych poziomach kategorii.<\/p>\n

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

Ka\u017cdy wykres drzewa zaczyna si\u0119 od treemap-beta<\/code> deklaracji. Nast\u0119pnie deklarujesz w\u0119z\u0142y nadrz\u0119dne strukturalne przy u\u017cyciu nazw w cudzys\u0142owach, a indywidualne li\u015bcie potomne mapujesz, grupuj\u0105c je pod nimi za pomoc\u0105 standardowych wci\u0119\u0107 i dodaj\u0105c dwukropek, a nast\u0119pnie ich warto\u015bci liczbowej.<\/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 
treemap-beta\r\n\"G\u0142\u00f3wna nazwa kategorii\"\r\n  \"Podkategoria A\": 45\r\n  \"Podkategoria B\": 30\r\n  \"Podkategoria C\": 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 sk\u0142adniowe<\/h2>\n
Poni\u017csza tabela rozk\u0142ada podstawowe wymagania formatowania u\u017cywane do tworzenia uk\u0142adu wykresu drzewa w Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n
Sk\u0142adnik<\/th>\nOpis<\/th>\nZasada sk\u0142adni<\/th>\n<\/tr>\n<\/thead>\n
Deklaracja<\/strong><\/td>\nInicjuje silnik struktury uk\u0142adu dla zagnie\u017cd\u017conych zestaw\u00f3w danych prostok\u0105tnych.<\/td>\ntreemap-beta<\/code><\/td>\n<\/tr>\n
W\u0119ze\u0142 nadrz\u0119dny<\/strong><\/td>\nOkre\u015bla granic\u0119 grupowania lub kategori\u0119 nadrz\u0119dna. Tekst zawsze musi by\u0107 otoczony podw\u00f3jnymi cudzys\u0142owami.<\/td>\n\"Infrastruktura chmury\"<\/code><\/td>\n<\/tr>\n
W\u0119ze\u0142 li\u015bciowy<\/strong><\/td>\nZagnie\u017cd\u017cony element danych, kt\u00f3ry przenosi okre\u015blon\u0105 wag\u0119 warto\u015bci.<\/td>\nWci\u0119ty pod w\u0119z\u0142em nadrz\u0119dnym za pomoc\u0105 dwukropka na ko\u0144cu i liczby dodatniej.<\/td>\n<\/tr>\n
Dane hierarchiczne<\/strong><\/td>\nOkre\u015bla, kt\u00f3re elementy nale\u017c\u0105 do okre\u015blonych grup przy u\u017cyciu g\u0142\u0119bi tekstu.<\/td>\nKontrolowane ca\u0142kowicie za pomoc\u0105 standardowych poziom\u00f3w wci\u0119\u0107 (spacje lub tabulatory).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Zaawansowane formatowanie danych (dyrektywy)<\/h2>\n
Domy\u015blnie Mermaid wy\u015bwietla surowe liczby. Mo\u017cna jednak przekaza\u0107 blok konfiguracji frontmatter za pomoc\u0105 valueFormat<\/code> w\u0142a\u015bciwo\u015b\u0107 do formatowania liczb jako waluty, liczb dziesi\u0119tnych lub procent\u00f3w.<\/p>\n
Typowe wzorce formatowania<\/h3>\n\n\n\n\n\n\n\n
Ci\u0105g formatuj\u0105cy<\/th>\nTyp wyniku<\/th>\nPrzyk\u0142adowy wynik<\/th>\n<\/tr>\n<\/thead>\n
'$0,0'<\/code><\/td>\nZnak dolara z domy\u015blnym separatorem tysi\u0119cy.<\/td>\n$400,000<\/td>\n<\/tr>\n
'.1f'<\/code><\/td>\nWy\u015bwietla liczb\u0119 z dok\u0142adnie jednym miejscem po przecinku.<\/td>\n45.2<\/td>\n<\/tr>\n
'.1%'<\/code><\/td>\nKonwertuje surow\u0105 warto\u015b\u0107 wagow\u0105 na wy\u015bwietlanie w procentach.<\/td>\n35.4%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Szablon danych finansowych<\/h3>\n
Ten szablon demonstruje spos\u00f3b formatowania operacyjnego bud\u017cetu korporacyjnego przy u\u017cyciu niestandardowych parametr\u00f3w ci\u0105g\u00f3w finansowych:<\/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  treemap:\r\n    valueFormat: '$0,0'\r\n---\r\ntreemap-beta\r\n\"Bud\u017cet korporacyjny\"\r\n  \"Operacje in\u017cynieryjne\"\r\n    \"Infrastruktura podstawowa\": 500000\r\n    \"Narz\u0119dzia dla programist\u00f3w\": 150000\r\n  \"Marketing wzrostu\"\r\n    \"Kampanie reklamowe op\u0142acone\": 350000\r\n    \"Sponsorstwa wydarze\u0144\": 80000<\/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
Niestandardowe stylizowanie w\u0119z\u0142\u00f3w (klasy)<\/h2>\n
Aby wyr\u00f3\u017cni\u0107 kluczowe w\u0119z\u0142y, odstaj\u0105ce warto\u015bci lub obszary o wysokim ryzyku w dokumentacji, mo\u017cesz zdefiniowa\u0107 i zastosowa\u0107 niestandardowe style CSS bezpo\u015brednio w bloku kodu przy u\u017cyciuclassDef<\/code>regu\u0142.<\/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                    
treemap-beta\r\n\"Wykorzystanie zasob\u00f3w systemu\"\r\n  \"Us\u0142ugi internetowe\"\r\n    \"Brama interfejsu API\": 45\r\n    \"Us\u0142uga uwierzytelniania\": 95:::critical\r\n  \"Przechowywanie bazy danych\"\r\n    \"Pami\u0119\u0107 podr\u0119czn\u0105 podstawowej bazy danych\": 60\r\n    \"W\u0119z\u0142y synchronizacji replik\": 25\r\n\r\nclassDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;<\/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
Wskaz\u00f3wka sk\u0142adni:<\/strong> Aby zastosowa\u0107 definicj\u0119 klasy do w\u0119z\u0142a li\u015bciowego zawieraj\u0105cego warto\u015b\u0107 numeryczn\u0105, do\u0142\u0105cz nazw\u0119 klasy przy u\u017cyciu trzech dwukropk\u00f3w (:::className<\/code>) od razu po nazwie etykiety, ale *przed* separatorem warto\u015bci dwukropka.<\/em><\/p>\n\n
Typowe b\u0142\u0119dy sk\u0142adniowe i ograniczenia<\/h2>\n
Poniewa\u017c schemat treemap wykorzystuje wci\u0119cia tekstu strukturalnego, niewielkie b\u0142\u0119dy formatowania mog\u0105 powodowa\u0107 problemy z renderowaniem uk\u0142adu. Pami\u0119taj o tych parametrach:<\/p>\n
    \n
  • Warto\u015bci ujemne zabronione:<\/strong>Treemap opiera si\u0119 na wype\u0142nianiu przestrzeni proporcjonalnie i matematycznie nie potrafi wy\u015bwietli\u0107 liczb ujemnych ani wag r\u00f3wnych zero. Upewnij si\u0119, \u017ce wszystkie warto\u015bci danych s\u0105 dodatnimi liczbami ca\u0142kowitymi lub dziesi\u0119tnymi.<\/li>\n
  • Zamkni\u0119cie w cudzys\u0142owach:<\/strong> Opis ka\u017cdego w\u0119z\u0142a \u2014 niezale\u017cnie od tego, czy jest to ga\u0142\u0105\u017a rodzica czy ma\u0142y element li\u015bciowy \u2014 musi by\u0107 dok\u0142adnie otoczony podw\u00f3jnymi cudzys\u0142owami. Pomini\u0119cie nawias\u00f3w cudzys\u0142owowych powoduje natychmiast b\u0142\u0119dy sk\u0142adniowe.<\/li>\n
  • Jednolito\u015b\u0107 odst\u0119p\u00f3w:<\/strong> Zagnie\u017cd\u017cona relacja rodzic-dziecko jest okre\u015blana wy\u0142\u0105cznie przez liczb\u0119 spacji na pocz\u0105tku wiersza. Przestrzegaj sp\u00f3jnej zasady d\u0142ugo\u015bci tabulatora lub odst\u0119p\u00f3w (np. dwie spacje na poziom), aby zapobiec umieszczeniu w\u0119z\u0142\u00f3w w nieprawid\u0142owej grupie.<\/li>\n
  • Czytelno\u015b\u0107 etykiet:<\/strong> Bardzo ma\u0142e warto\u015bci w g\u0142\u0119bokich strukturach hierarchicznych mog\u0105 prowadzi\u0107 do ma\u0142ych prostok\u0105tnych p\u0142ytek, gdzie tekst si\u0119 wyp\u0142ywa lub staje si\u0119 zupe\u0142nie nieczytelny. Rozwa\u017c po\u0142\u0105czenie ma\u0142ych element\u00f3w w kategorii \u201eInne\u201d.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Wykres drzewa wy\u015bwietla dane hierarchiczne jako zestaw zagnie\u017cd\u017conych prostok\u0105t\u00f3w. Ka\u017cda ga\u0142\u0105\u017a drzewa reprezentowana jest prostok\u0105tem, kt\u00f3ry nast\u0119pnie jest wy\u0142o\u017cony mniejszymi prostok\u0105tami przedstawiaj\u0105cymi podga\u0142\u0119zie. Wielko\u015b\u0107 ka\u017cdego prostok\u0105ta jest doskonale proporcjonalna do jego warto\u015bci liczbowej, co czyni go doskona\u0142ym wyborem do przekszta\u0142cania…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":14,"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 Treemap Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online 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-treemap-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Treemap Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-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_6a47814e082dc.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=\"3 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-treemap-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\",\"name\":\"Mermaid Treemap Syntax | 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-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"datePublished\":\"2026-07-03T09:26:10+00:00\",\"description\":\"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a47814e082dc.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-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\":\"Sk\u0142adnia i przewodnik uk\u0142adu wykresu drzewa 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 Treemap Syntax | VPasCode Text to Diagram Guide","description":"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online 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-treemap-diagram-syntax-layout-guide\/","og_locale":"pl_PL","og_type":"article","og_title":"Mermaid Treemap Syntax | VPasCode Text to Diagram Guide","og_description":"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"3 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","name":"Mermaid Treemap Syntax | 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-treemap-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png","datePublished":"2026-07-03T09:26:10+00:00","description":"Visualize hierarchical nested data structures using Mermaid treemaps in VPasCode, an online diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a47814e082dc.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-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":"Sk\u0142adnia i przewodnik uk\u0142adu wykresu drzewa 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\/2089","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=2089"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}