{"id":2088,"date":"2026-07-03T09:26:10","date_gmt":"2026-07-03T09:26:10","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","title":{"rendered":"Guia de Sintaxe e Layout do Diagrama Treemap do Mermaid.js"},"content":{"rendered":"

Um diagrama Treemap exibe dados hier\u00e1rquicos como um conjunto de ret\u00e2ngulos aninhados. Cada ramo da \u00e1rvore \u00e9 representado por um ret\u00e2ngulo, que depois \u00e9 pavimentado com ret\u00e2ngulos menores que representam sub-ramos. O tamanho de cada ret\u00e2ngulo \u00e9 perfeitamente proporcional ao seu valor num\u00e9rico, tornando-o uma escolha excelente para convers\u00e3o de texto em diagrama ao comparar partes de um todo em n\u00edveis complexos de categorias.<\/p>\n

Estrutura B\u00e1sica de Sintaxe<\/h2>\n

Todo diagrama Treemap come\u00e7a com o treemap-beta<\/code> declara\u00e7\u00e3o. Em seguida, voc\u00ea declara n\u00f3s pais estruturais usando nomes entre aspas e mapeia n\u00f3s folha individuais agrupando-os abaixo com espa\u00e7amento padr\u00e3o de indenta\u00e7\u00e3o e adicionando dois pontos seguidos pelo seu peso num\u00e9rico.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o Mermaid no 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\"Nome da Categoria Principal\"\r\n  \"Sub-Categoria A\": 45\r\n  \"Sub-Categoria B\": 30\r\n  \"Sub-Categoria 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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Refer\u00eancia de Sintaxe<\/h2>\n
A tabela abaixo detalha os requisitos principais de formata\u00e7\u00e3o usados para criar um layout Treemap no Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n
Componente<\/th>\nDescri\u00e7\u00e3o<\/th>\nRegra de Sintaxe<\/th>\n<\/tr>\n<\/thead>\n
Declara\u00e7\u00e3o<\/strong><\/td>\nInicializa o motor de estrutura de layout para conjuntos de dados retangulares aninhados.<\/td>\ntreemap-beta<\/code><\/td>\n<\/tr>\n
N\u00f3 Pai<\/strong><\/td>\nDefine um limite de agrupamento ou categoria pai. O texto deve sempre estar entre aspas duplas.<\/td>\n\"Infraestrutura em Nuvem\"<\/code><\/td>\n<\/tr>\n
N\u00f3 Folha<\/strong><\/td>\nUm elemento de dados aninhado que carrega um peso de valor espec\u00edfico.<\/td>\nIndentado abaixo de um pai usando dois pontos finais e um n\u00famero positivo.<\/td>\n<\/tr>\n
Dados de Hierarquia<\/strong><\/td>\nDetermina quais elementos pertencem a grupos espec\u00edficos usando a profundidade do texto.<\/td>\nControlado inteiramente por n\u00edveis padr\u00e3o de indenta\u00e7\u00e3o (espa\u00e7os ou tabs).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Formata\u00e7\u00e3o Avan\u00e7ada de Dados (Diretivas)<\/h2>\n
Por padr\u00e3o, o Mermaid exibe contagens num\u00e9ricas brutas. No entanto, voc\u00ea pode passar um bloco de configura\u00e7\u00e3o de frontmatter usando o valueFormat<\/code> propriedade para formatar n\u00fameros como moeda, decimais ou porcentagens.<\/p>\n
Padr\u00f5es Comuns de Formata\u00e7\u00e3o<\/h3>\n\n\n\n\n\n\n\n
String de Formato<\/th>\nTipo de Resultado<\/th>\nSa\u00edda de Exemplo<\/th>\n<\/tr>\n<\/thead>\n
'$0,0'<\/code><\/td>\nS\u00edmbolo de d\u00f3lar com separador padr\u00e3o de milhares.<\/td>\n$400,000<\/td>\n<\/tr>\n
'.1f'<\/code><\/td>\nExibe n\u00famero com exatamente uma casa decimal.<\/td>\n45.2<\/td>\n<\/tr>\n
'.1%'<\/code><\/td>\nConverte o valor bruto de peso em exibi\u00e7\u00e3o em porcentagem.<\/td>\n35.4%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Modelo de Dados Financeiros<\/h3>\n
Este modelo demonstra como formatar um or\u00e7amento corporativo operacional utilizando par\u00e2metros de string financeiros personalizados:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o Mermaid no 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\"Or\u00e7amento Corporativo\"\r\n  \"Opera\u00e7\u00f5es de Engenharia\"\r\n    \"Infraestrutura Principal\": 500000\r\n    \"Ferramentas para Desenvolvedores\": 150000\r\n  \"Marketing de Crescimento\"\r\n    \"Campanhas de An\u00fancios Pagos\": 350000\r\n    \"Patroc\u00ednios de Eventos\": 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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Estilo Personalizado de N\u00f3s (Classes)<\/h2>\n
Para destacar n\u00f3s cr\u00edticos, valores at\u00edpicos ou \u00e1reas de alto risco em sua documenta\u00e7\u00e3o, voc\u00ea pode definir e aplicar estilos CSS personalizados nativamente dentro do bloco de c\u00f3digo usandoclassDef<\/code> regras.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o Mermaid no 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\"Uso de Recursos do Sistema\"\r\n  \"Servi\u00e7os Web\"\r\n    \"API Gateway\": 45\r\n    \"Servi\u00e7o de Autentica\u00e7\u00e3o\": 95:::critical\r\n  \"Armazenamento de Banco de Dados\"\r\n    \"Cache Principal do Banco de Dados\": 60\r\n    \"N\u00f3s de Sincroniza\u00e7\u00e3o de R\u00e9plica\": 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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Dica de Sintaxe:<\/strong> Para aplicar uma defini\u00e7\u00e3o de classe a um n\u00f3 folha que cont\u00e9m um valor num\u00e9rico, acrescente o nome da classe usando tr\u00eas pontos (::::className<\/code>) imediatamente ap\u00f3s o nome da etiqueta, mas *antes* do separador de valor do dois-pontos.<\/em><\/p>\n\n
Armadilhas Comuns de Sintaxe e Limita\u00e7\u00f5es<\/h2>\n
Como o esquema de treemap utiliza indenta\u00e7\u00e3o textual estrutural, pequenos erros de formata\u00e7\u00e3o podem causar problemas na renderiza\u00e7\u00e3o do layout. Tenha esses par\u00e2metros em mente:<\/p>\n
    \n
  • Valores Negativos Proibidos:<\/strong>Os treemaps dependem da preenchimento proporcional de espa\u00e7o e s\u00e3o matematicamente incapazes de renderizar n\u00fameros negativos ou pesos iguais a zero. Certifique-se de que todos os valores de dados sejam inteiros positivos ou decimais.<\/li>\n
  • Delimitadores de Aspas:<\/strong>Cada descri\u00e7\u00e3o de n\u00f3 \u2014 independentemente de ser uma ramifica\u00e7\u00e3o pai ou um pequeno elemento folha \u2014 deve ser envolvida limpa e corretamente com aspas duplas. A omis\u00e3o dos colchetes de aspas causa erros de sintaxe imediatos.<\/li>\n
  • Uniformidade de Espa\u00e7os em Branco:<\/strong>A rela\u00e7\u00e3o aninhada entre pai e filho \u00e9 determinada exclusivamente pela quantidade de espa\u00e7os que aparecem antes da linha. Mantenha uma regra consistente de tabula\u00e7\u00e3o ou comprimento de espa\u00e7o (como dois espa\u00e7os por n\u00edvel) para evitar que os n\u00f3s acabem em grupos incorretos.<\/li>\n
  • Visibilidade das Etiquetas:<\/strong>Valores muito pequenos dentro de estruturas hier\u00e1rquicas profundas podem resultar em pequenos ret\u00e2ngulos onde o texto transborda ou torna-se completamente ileg\u00edvel. Considere agrupar itens pequenos juntos sob uma categoria denominada \u201cOutros\u201d.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Um diagrama Treemap exibe dados hier\u00e1rquicos como um conjunto de ret\u00e2ngulos aninhados. Cada ramo da \u00e1rvore \u00e9 representado por um ret\u00e2ngulo, que depois \u00e9 pavimentado com ret\u00e2ngulos menores que representam sub-ramos. O tamanho de cada ret\u00e2ngulo \u00e9 perfeitamente proporcional ao…<\/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-2088","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\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\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\/pt\/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=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guia de Sintaxe e Layout do Diagrama Treemap do Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/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\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","og_locale":"pt_PT","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\/pt\/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":{"Tempo estimado de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/pt\/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\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Guia de Sintaxe e Layout do Diagrama Treemap do Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2088"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}