{"id":2092,"date":"2026-07-03T09:26:10","date_gmt":"2026-07-03T09:26:10","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","title":{"rendered":"Sintaxis y gu\u00eda de dise\u00f1o del diagrama de \u00e1rbol de Mermaid.js"},"content":{"rendered":"

Un diagrama de \u00e1rbol muestra datos jer\u00e1rquicos como un conjunto de rect\u00e1ngulos anidados. Cada rama del \u00e1rbol se representa mediante un rect\u00e1ngulo, que luego se divide en rect\u00e1ngulos m\u00e1s peque\u00f1os que representan subramas. El tama\u00f1o de cada rect\u00e1ngulo es perfectamente proporcional a su valor num\u00e9rico, lo que lo convierte en una excelente opci\u00f3n de texto a diagrama para comparar partes de un todo dentro de niveles de categor\u00edas complejas.<\/p>\n

Estructura b\u00e1sica de sintaxis<\/h2>\n

Cada diagrama de \u00e1rbol comienza con el treemap-beta<\/code> declaraci\u00f3n. A continuaci\u00f3n, declaras nodos padres estructurales utilizando nombres entre comillas, y asignas nodos hoja individuales agrup\u00e1ndolos debajo con espacios de sangr\u00eda est\u00e1ndar y a\u00f1adiendo dos puntos seguidos de su peso num\u00e9rico.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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\"Nombre de la categor\u00eda principal\"\r\n  \"Subcategor\u00eda A\": 45\r\n  \"Subcategor\u00eda B\": 30\r\n  \"Subcategor\u00eda 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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Referencia de sintaxis<\/h2>\n
La tabla a continuaci\u00f3n desglosa los requisitos principales de formato utilizados para crear un dise\u00f1o de diagrama de \u00e1rbol en Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n
Componente<\/th>\nDescripci\u00f3n<\/th>\nRegla de sintaxis<\/th>\n<\/tr>\n<\/thead>\n
Declaraci\u00f3n<\/strong><\/td>\nInicializa el motor de estructura de dise\u00f1o para conjuntos de datos rectangulares anidados.<\/td>\ntreemap-beta<\/code><\/td>\n<\/tr>\n
Nodo padre<\/strong><\/td>\nDefine un l\u00edmite de agrupaci\u00f3n o categor\u00eda padre. El texto siempre debe ir entre comillas dobles.<\/td>\n\"Infraestructura en la nube\"<\/code><\/td>\n<\/tr>\n
Nodo hoja<\/strong><\/td>\nUn elemento de datos anidado que lleva un peso de valor espec\u00edfico.<\/td>\nSangrado debajo de un padre utilizando dos puntos al final y un n\u00famero positivo.<\/td>\n<\/tr>\n
Datos jer\u00e1rquicos<\/strong><\/td>\nDetermina qu\u00e9 elementos pertenecen a grupos espec\u00edficos utilizando la profundidad del texto.<\/td>\nControlado completamente mediante niveles est\u00e1ndar de sangr\u00eda (espacios o tabulaciones).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Formateo avanzado de datos (directivas)<\/h2>\n
Por defecto, Mermaid muestra recuentos num\u00e9ricos sin procesar. Sin embargo, puedes pasar un bloque de configuraci\u00f3n de frontmatter utilizando el valueFormat<\/code> propiedad para formatear n\u00fameros como moneda, decimales o porcentajes.<\/p>\n
Patrones de formato comunes<\/h3>\n\n\n\n\n\n\n\n
Cadena de formato<\/th>\nTipo de resultado<\/th>\nSalida de ejemplo<\/th>\n<\/tr>\n<\/thead>\n
'$0,0'<\/code><\/td>\nS\u00edmbolo de d\u00f3lar con separador de miles est\u00e1ndar.<\/td>\n$400,000<\/td>\n<\/tr>\n
'.1f'<\/code><\/td>\nMuestra el n\u00famero con exactamente un lugar decimal.<\/td>\n45.2<\/td>\n<\/tr>\n
'.1%'<\/code><\/td>\nConvierte el valor de peso sin procesar en una visualizaci\u00f3n porcentual.<\/td>\n35.4%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Plantilla de datos financieros<\/h3>\n
Esta plantilla demuestra c\u00f3mo formatear un presupuesto corporativo operativo utilizando par\u00e1metros de cadena financieros personalizados:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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\"Presupuesto Corporativo\"\r\n  \"Operaciones de Ingenier\u00eda\"\r\n    \"Infraestructura Principal\": 500000\r\n    \"Herramientas para Desarrolladores\": 150000\r\n  \"Marketing de Crecimiento\"\r\n    \"Campa\u00f1as de Publicidad Pagada\": 350000\r\n    \"Patrocinios 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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Estilo personalizado de nodos (clases)<\/h2>\n
Para resaltar nodos cr\u00edticos, valores at\u00edpicos o \u00e1reas de alto riesgo en su documentaci\u00f3n, puede definir y aplicar estilos CSS personalizados de forma nativa dentro del bloque de c\u00f3digo usandoclassDef<\/code> reglas.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en 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 del Sistema\"\r\n  \"Servicios Web\"\r\n    \"Pasarela de API\": 45\r\n    \"Servicio de Autenticaci\u00f3n\": 95:::critical\r\n  \"Almacenamiento de Base de Datos\"\r\n    \"Cach\u00e9 de DB Principal\": 60\r\n    \"Nodos de Sincronizaci\u00f3n 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>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Consejo de sintaxis:<\/strong> Para aplicar una definici\u00f3n de clase a un nodo hoja que contiene un valor num\u00e9rico, agregue el nombre de la clase usando tres puntos (::::className<\/code>) inmediatamente despu\u00e9s del nombre de la etiqueta, pero *antes* del separador de valor de dos puntos.<\/em><\/p>\n\n
Errores comunes de sintaxis y limitaciones<\/h2>\n
Dado que el esquema de treemap utiliza la sangr\u00eda de texto estructural, peque\u00f1os errores de formato pueden causar problemas de representaci\u00f3n de dise\u00f1o. Tenga en cuenta estos par\u00e1metros:<\/p>\n
    \n
  • Valores negativos no permitidos:<\/strong>Los treemaps dependen del llenado proporcional del espacio y matem\u00e1ticamente no pueden representar n\u00fameros negativos ni pesos cero. Aseg\u00farese de que todos los valores de datos sean enteros positivos o decimales.<\/li>\n
  • Encerramientos con comillas:<\/strong>Cada descripci\u00f3n de nodo\u2014independientemente de si es una rama principal o un peque\u00f1o elemento hoja\u2014debe envolverse limpiamente entre comillas dobles. Omitir los corchetes de comillas provoca errores de sintaxis inmediatos.<\/li>\n
  • Uniformidad de espacios en blanco:<\/strong>La relaci\u00f3n anidada de padre-hijo se determina \u00fanicamente por la cantidad de espacios que hay al principio de la l\u00ednea. Adh\u00edrase a una regla consistente de longitud de tabulaci\u00f3n o espacios (como dos espacios por nivel) para evitar que los nodos terminen en el grupo incorrecto.<\/li>\n
  • Visibilidad de las etiquetas:<\/strong>Valores muy peque\u00f1os dentro de estructuras jer\u00e1rquicas profundas pueden dar lugar a peque\u00f1os mosaicos rectangulares donde el texto se desborda o se vuelve completamente ilegible. Considere agrupar elementos peque\u00f1os juntos bajo una categor\u00eda de \u00abOtros\u00bb.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Un diagrama de \u00e1rbol muestra datos jer\u00e1rquicos como un conjunto de rect\u00e1ngulos anidados. Cada rama del \u00e1rbol se representa mediante un rect\u00e1ngulo, que luego se divide en rect\u00e1ngulos m\u00e1s peque\u00f1os que representan subramas. El tama\u00f1o de cada rect\u00e1ngulo es perfectamente…<\/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-2092","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\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Tiempo de lectura\" \/>\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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sintaxis y gu\u00eda de dise\u00f1o del diagrama de \u00e1rbol de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/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\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/es\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Sintaxis y gu\u00eda de dise\u00f1o del diagrama de \u00e1rbol de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2092"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}