{"id":915,"date":"2026-07-03T09:26:10","date_gmt":"2026-07-03T09:26:10","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/"},"modified":"2026-07-29T08:35:02","modified_gmt":"2026-07-29T08:35:02","slug":"mermaid-js-treemap-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/","title":{"rendered":"Mermaid.js Treemap Diagram Syntax & Layout Guide"},"content":{"rendered":"

A Treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches. The size of each rectangle is perfectly proportional to its numerical value, making it an excellent text-to-diagram choice for comparing parts of a whole within complex category levels.<\/p>\n

Basic Syntax Structure<\/h2>\n

Every treemap starts with the treemap-beta<\/code> declaration. You then declare structural parent nodes using quoted names, and map individual child leaf nodes by grouping them underneath with standard indentation spaces and adding a colon followed by their numerical weight.<\/p>\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\"Main Category Name\"\r\n  \"Sub-Category A\": 45\r\n  \"Sub-Category B\": 30\r\n  \"Sub-Category 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>\n
Syntax Reference<\/h2>\n
The table below breaks down the primary formatting requirements used to build a Treemap layout in Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n
Component<\/th>\nDescription<\/th>\nSyntax Rule<\/th>\n<\/tr>\n<\/thead>\n
Declaration<\/strong><\/td>\nInitializes the layout structure engine for nested rectangular datasets.<\/td>\ntreemap-beta<\/code><\/td>\n<\/tr>\n
Parent Node<\/strong><\/td>\nDefines a grouping boundary or parent category. Text must always be enclosed in double quotes.<\/td>\n\"Cloud Infrastructure\"<\/code><\/td>\n<\/tr>\n
Leaf Node<\/strong><\/td>\nA nested data element that carries a specific value weight.<\/td>\nIndented beneath a parent using a trailing colon and a positive number.<\/td>\n<\/tr>\n
Hierarchy Data<\/strong><\/td>\nDetermines which elements belong inside specific groups using text depth.<\/td>\nControlled entirely via standard indentation levels (spaces or tabs).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Advanced Data Formatting (Directives)<\/h2>\n
By default, Mermaid shows raw numeric counts. However, you can pass a frontmatter configuration block using the valueFormat<\/code> property to format numbers as currency, decimals, or percentages.<\/p>\n
Common Format Patterns<\/h3>\n\n\n\n\n\n\n\n
Format String<\/th>\nResult Type<\/th>\nExample Output<\/th>\n<\/tr>\n<\/thead>\n
'$0,0'<\/code><\/td>\nDollar sign with standard thousands separator.<\/td>\n$400,000<\/td>\n<\/tr>\n
'.1f'<\/code><\/td>\nDisplays number with exactly one decimal place.<\/td>\n45.2<\/td>\n<\/tr>\n
'.1%'<\/code><\/td>\nConverts raw weight value into a percentage display.<\/td>\n35.4%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Financial Data Blueprint<\/h3>\n
This blueprint demonstrates how to format an operational corporate budget utilizing custom financial string parameters:<\/p>\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\"Corporate Budget\"\r\n  \"Engineering Operations\"\r\n    \"Core Infrastructure\": 500000\r\n    \"Developer Tools\": 150000\r\n  \"Growth Marketing\"\r\n    \"Paid Ad Campaigns\": 350000\r\n    \"Event Sponsorships\": 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>\n
\n
Custom Node Styling (Classes)<\/h2>\n
To emphasize critical nodes, outliers, or high-risk areas in your documentation, you can define and apply CSS custom styles natively within the code block using classDef<\/code> rules.<\/p>\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\"System Resource Usage\"\r\n  \"Web Services\"\r\n    \"API Gateway\": 45\r\n    \"Auth Service\": 95:::critical\r\n  \"Database Storage\"\r\n    \"Primary DB Cache\": 60\r\n    \"Replica Sync Nodes\": 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>\n
Syntax Tip:<\/strong> To apply a class definition to a leaf node that contains a numeric value, append the class name using three colons (:::className<\/code>) immediately after the label name but *before* the colon value separator.<\/em><\/p>\n
\n
Common Syntax Pitfalls & Limitations<\/h2>\n
Because the treemap schema utilizes structural text indentation, minor formatting slips can cause layout rendering issues. Keep these parameters in mind:<\/p>\n
    \n
  • Negative Values Prohibited:<\/strong> Treemaps rely on proportional space filling and are mathematically incapable of rendering negative numbers or zero weights. Ensure all data values are positive integers or decimals.<\/li>\n
  • Quote Enclosures:<\/strong> Every node description\u2014regardless of whether it is a parent branch or a tiny leaf element\u2014must be wrapped cleanly in double quotes. Omitting quotation brackets causes immediate syntax errors.<\/li>\n
  • Whitespace Uniformity:<\/strong> The nested parent-child relationship is determined purely by how many spaces sit in front of the line. Stick to a consistent tab or space length rule (like two spaces per level) to prevent nodes from ending up in the wrong group.<\/li>\n
  • Label Visibility:<\/strong> Very small values within deep hierarchical structures may result in tiny rectangular tiles where text overflows or becomes completely unreadable. Consider grouping small items together under an “Others” category.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    A Treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches. The size of each rectangle is perfectly proportional to…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":48,"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-915","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\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\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\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:35:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a47814e082dc.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\",\"name\":\"Mermaid Treemap Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"datePublished\":\"2026-07-03T09:26:10+00:00\",\"dateModified\":\"2026-07-29T08:35:02+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\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a47814e082dc.png\",\"width\":996,\"height\":371},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mermaid.js Treemap Diagram Syntax & Layout Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/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\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/","og_locale":"vi_VN","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\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:35:02+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a47814e082dc.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/","name":"Mermaid Treemap Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a47814e082dc.png","datePublished":"2026-07-03T09:26:10+00:00","dateModified":"2026-07-29T08:35:02+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\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a47814e082dc.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a47814e082dc.png","width":996,"height":371},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/vn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/vn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Playbook","item":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/"},{"@type":"ListItem","position":4,"name":"Mermaid.js Treemap Diagram Syntax & Layout Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/48"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=915"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}