{"id":2084,"date":"2026-07-03T09:26:10","date_gmt":"2026-07-03T09:26:10","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 b\u1ed1 c\u1ee5c s\u01a1 \u0111\u1ed3 Treemap c\u1ee7a Mermaid.js"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 Treemap hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u ph\u00e2n c\u1ea5p d\u01b0\u1edbi d\u1ea1ng m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt l\u1ed3ng gh\u00e9p. M\u1ed7i nh\u00e1nh c\u1ee7a c\u00e2y \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n b\u1eb1ng m\u1ed9t h\u00ecnh ch\u1eef nh\u1eadt, sau \u0111\u00f3 \u0111\u01b0\u1ee3c l\u00e1t b\u1eb1ng c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt nh\u1ecf h\u01a1n \u0111\u1ea1i di\u1ec7n cho c\u00e1c nh\u00e1nh con. K\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed7i h\u00ecnh ch\u1eef nh\u1eadt t\u1ef7 l\u1ec7 thu\u1eadn ho\u00e0n to\u00e0n v\u1edbi gi\u00e1 tr\u1ecb s\u1ed1 h\u1ecdc c\u1ee7a n\u00f3, l\u00e0m cho n\u00f3 tr\u1edf th\u00e0nh l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3 nh\u1eb1m so s\u00e1nh c\u00e1c ph\u1ea7n c\u1ee7a to\u00e0n b\u1ed9 trong c\u00e1c c\u1ea5p \u0111\u1ed9 danh m\u1ee5c ph\u1ee9c t\u1ea1p.<\/p>\n

C\u1ea5u tr\u00fac c\u00fa ph\u00e1p c\u01a1 b\u1ea3n<\/h2>\n

M\u1ed7i s\u01a1 \u0111\u1ed3 Treemap b\u1eaft \u0111\u1ea7u b\u1eb1ng treemap-beta<\/code> khai b\u00e1o. Sau \u0111\u00f3, b\u1ea1n khai b\u00e1o c\u00e1c n\u00fat cha c\u1ea5u tr\u00fac b\u1eb1ng t\u00ean \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c k\u00e9p, v\u00e0 \u00e1nh x\u1ea1 c\u00e1c n\u00fat l\u00e1 con ri\u00eang l\u1ebb b\u1eb1ng c\u00e1ch nh\u00f3m ch\u00fang d\u01b0\u1edbi \u0111\u00e2y v\u1edbi kho\u1ea3ng tr\u1eafng th\u1ee5t l\u1ec1 ti\u00eau chu\u1ea9n v\u00e0 th\u00eam d\u1ea5u hai ch\u1ea5m theo sau l\u00e0 tr\u1ecdng s\u1ed1 s\u1ed1 h\u1ecdc c\u1ee7a ch\u00fang.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong 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\"T\u00ean danh m\u1ee5c ch\u00ednh\"\r\n  \"Danh m\u1ee5c con A\": 45\r\n  \"Danh m\u1ee5c con B\": 30\r\n  \"Danh m\u1ee5c con 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>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Tham chi\u1ebfu c\u00fa ph\u00e1p<\/h2>\n
B\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y ph\u00e2n t\u00edch c\u00e1c y\u00eau c\u1ea7u \u0111\u1ecbnh d\u1ea1ng ch\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c s\u01a1 \u0111\u1ed3 Treemap trong Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n
Th\u00e0nh ph\u1ea7n<\/th>\nM\u00f4 t\u1ea3<\/th>\nQuy t\u1eafc c\u00fa ph\u00e1p<\/th>\n<\/tr>\n<\/thead>\n
Khai b\u00e1o<\/strong><\/td>\nKh\u1edfi t\u1ea1o \u0111\u1ed9ng c\u01a1 c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho c\u00e1c t\u1eadp d\u1eef li\u1ec7u h\u00ecnh ch\u1eef nh\u1eadt l\u1ed3ng gh\u00e9p.<\/td>\ntreemap-beta<\/code><\/td>\n<\/tr>\n
N\u00fat cha<\/strong><\/td>\nX\u00e1c \u0111\u1ecbnh ranh gi\u1edbi nh\u00f3m ho\u1eb7c danh m\u1ee5c cha. V\u0103n b\u1ea3n lu\u00f4n ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c k\u00e9p.<\/td>\n\"C\u01a1 s\u1edf h\u1ea1 t\u1ea7ng \u0111\u00e1m m\u00e2y\"<\/code><\/td>\n<\/tr>\n
N\u00fat l\u00e1<\/strong><\/td>\nM\u1ed9t ph\u1ea7n t\u1eed d\u1eef li\u1ec7u l\u1ed3ng gh\u00e9p mang theo tr\u1ecdng s\u1ed1 gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3.<\/td>\nTh\u1ee5t l\u1ec1 d\u01b0\u1edbi m\u1ed9t n\u00fat cha b\u1eb1ng d\u1ea5u hai ch\u1ea5m k\u1ebft th\u00fac v\u00e0 m\u1ed9t s\u1ed1 d\u01b0\u01a1ng.<\/td>\n<\/tr>\n
D\u1eef li\u1ec7u ph\u00e2n c\u1ea5p<\/strong><\/td>\nX\u00e1c \u0111\u1ecbnh c\u00e1c ph\u1ea7n t\u1eed n\u00e0o thu\u1ed9c v\u1ec1 c\u00e1c nh\u00f3m c\u1ee5 th\u1ec3 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng \u0111\u1ed9 s\u00e2u v\u0103n b\u1ea3n.<\/td>\n\u0110\u01b0\u1ee3c ki\u1ec3m so\u00e1t ho\u00e0n to\u00e0n th\u00f4ng qua c\u00e1c m\u1ee9c th\u1ee5t l\u1ec1 ti\u00eau chu\u1ea9n (kho\u1ea3ng tr\u1eafng ho\u1eb7c tab).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
\u0110\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u n\u00e2ng cao (Ch\u1ec9 th\u1ecb)<\/h2>\n
M\u1eb7c \u0111\u1ecbnh, Mermaid hi\u1ec3n th\u1ecb c\u00e1c s\u1ed1 \u0111\u1ebfm th\u00f4. Tuy nhi\u00ean, b\u1ea1n c\u00f3 th\u1ec3 truy\u1ec1n m\u1ed9t kh\u1ed1i c\u1ea5u h\u00ecnh frontmatter b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng valueFormat<\/code> thu\u1ed9c t\u00ednh \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng s\u1ed1 th\u00e0nh ti\u1ec1n t\u1ec7, th\u1eadp ph\u00e2n ho\u1eb7c ph\u1ea7n tr\u0103m.<\/p>\n
C\u00e1c m\u1eabu \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn<\/h3>\n\n\n\n\n\n\n\n
Chu\u1ed7i \u0111\u1ecbnh d\u1ea1ng<\/th>\nLo\u1ea1i k\u1ebft qu\u1ea3<\/th>\nK\u1ebft qu\u1ea3 v\u00ed d\u1ee5<\/th>\n<\/tr>\n<\/thead>\n
'$0,0'<\/code><\/td>\nD\u1ea5u \u0111\u00f4 la v\u1edbi d\u1ea5u ph\u00e2n c\u00e1ch h\u00e0ng ngh\u00ecn ti\u00eau chu\u1ea9n.<\/td>\n$400,000<\/td>\n<\/tr>\n
'.1f'<\/code><\/td>\nHi\u1ec3n th\u1ecb s\u1ed1 v\u1edbi \u0111\u00fang m\u1ed9t ch\u1eef s\u1ed1 th\u1eadp ph\u00e2n.<\/td>\n45.2<\/td>\n<\/tr>\n
'.1%'<\/code><\/td>\nChuy\u1ec3n \u0111\u1ed5i gi\u00e1 tr\u1ecb tr\u1ecdng l\u01b0\u1ee3ng th\u00f4 th\u00e0nh \u0111\u1ecbnh d\u1ea1ng ph\u1ea7n tr\u0103m.<\/td>\n35.4%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
B\u1ea3n m\u1eabu D\u1eef li\u1ec7u T\u00e0i ch\u00ednh<\/h3>\n
B\u1ea3n m\u1eabu n\u00e0y minh h\u1ecda c\u00e1ch \u0111\u1ecbnh d\u1ea1ng ng\u00e2n s\u00e1ch doanh nghi\u1ec7p v\u1eadn h\u00e0nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c tham s\u1ed1 chu\u1ed7i t\u00e0i ch\u00ednh t\u00f9y ch\u1ec9nh:<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong 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\"Ng\u00e2n s\u00e1ch C\u00f4ng ty\"\r\n  \"Ho\u1ea1t \u0111\u1ed9ng K\u1ef9 thu\u1eadt\"\r\n    \"C\u01a1 s\u1edf h\u1ea1 t\u1ea7ng Ch\u00ednh\": 500000\r\n    \"C\u00f4ng c\u1ee5 Ph\u00e1t tri\u1ec3n\": 150000\r\n  \"Ti\u1ebfp th\u1ecb T\u0103ng tr\u01b0\u1edfng\"\r\n    \"Chi\u1ebfn d\u1ecbch Qu\u1ea3ng c\u00e1o Tr\u1ea3 ph\u00ed\": 350000\r\n    \"T\u00e0i tr\u1ee3 S\u1ef1 ki\u1ec7n\": 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>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
\u0110\u1ecbnh d\u1ea1ng N\u00fat t\u00f9y ch\u1ec9nh (L\u1edbp)<\/h2>\n
\u0110\u1ec3 nh\u1ea5n m\u1ea1nh c\u00e1c n\u00fat quan tr\u1ecdng, c\u00e1c \u0111i\u1ec3m ngo\u1ea1i l\u1ec7 ho\u1eb7c c\u00e1c khu v\u1ef1c r\u1ee7i ro cao trong t\u00e0i li\u1ec7u c\u1ee7a b\u1ea1n, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a v\u00e0 \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u CSS t\u00f9y ch\u1ec9nh m\u1ed9t c\u00e1ch t\u1ef1 nhi\u00ean trong kh\u1ed1i m\u00e3 s\u1eed d\u1ee5ngclassDef<\/code> quy t\u1eafc.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong 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\"S\u1eed d\u1ee5ng T\u00e0i nguy\u00ean H\u1ec7 th\u1ed1ng\"\r\n  \"D\u1ecbch v\u1ee5 Web\"\r\n    \"C\u1ed5ng API\": 45\r\n    \"D\u1ecbch v\u1ee5 X\u00e1c th\u1ef1c\": 95:::critical\r\n  \"L\u01b0u tr\u1eef C\u01a1 s\u1edf d\u1eef li\u1ec7u\"\r\n    \"B\u1ed9 nh\u1edb \u0111\u1ec7m DB Ch\u00ednh\": 60\r\n    \"N\u00fat \u0110\u1ed3ng b\u1ed9 B\u1ea3n sao\": 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>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
L\u01b0u \u00fd Ng\u1eef ph\u00e1p:<\/strong> \u0110\u1ec3 \u00e1p d\u1ee5ng \u0111\u1ecbnh ngh\u0129a l\u1edbp cho m\u1ed9t n\u00fat l\u00e1 ch\u1ee9a gi\u00e1 tr\u1ecb s\u1ed1, h\u00e3y th\u00eam t\u00ean l\u1edbp b\u1eb1ng ba d\u1ea5u hai ch\u1ea5m (:::className<\/code>) ngay l\u1eadp t\u1ee9c sau t\u00ean nh\u00e3n nh\u01b0ng *tr\u01b0\u1edbc* d\u1ea5u ph\u00e2n c\u00e1ch gi\u00e1 tr\u1ecb d\u1ea5u hai ch\u1ea5m.<\/em><\/p>\n\n
Nh\u1eefng sai l\u1ea7m ph\u1ed5 bi\u1ebfn v\u1ec1 c\u00fa ph\u00e1p & gi\u1edbi h\u1ea1n<\/h2>\n
V\u00ec s\u01a1 \u0111\u1ed3 treemap s\u1eed d\u1ee5ng th\u1ee5t l\u1ec1 v\u0103n b\u1ea3n c\u1ea5u tr\u00fac, nh\u1eefng l\u1ed7i \u0111\u1ecbnh d\u1ea1ng nh\u1ecf c\u00f3 th\u1ec3 g\u00e2y ra v\u1ea5n \u0111\u1ec1 hi\u1ec3n th\u1ecb b\u1ed1 c\u1ee5c. H\u00e3y l\u01b0u \u00fd nh\u1eefng tham s\u1ed1 sau:<\/p>\n
    \n
  • C\u1ea5m gi\u00e1 tr\u1ecb \u00e2m:<\/strong>C\u00e1c b\u1ea3n \u0111\u1ed3 c\u00e2y d\u1ef1a v\u00e0o vi\u1ec7c \u0111i\u1ec1n \u0111\u1ea7y kh\u00f4ng gian theo t\u1ef7 l\u1ec7 v\u00e0 v\u1ec1 m\u1eb7t to\u00e1n h\u1ecdc kh\u00f4ng th\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c s\u1ed1 \u00e2m ho\u1eb7c tr\u1ecdng s\u1ed1 b\u1eb1ng kh\u00f4ng. \u0110\u1ea3m b\u1ea3o t\u1ea5t c\u1ea3 c\u00e1c gi\u00e1 tr\u1ecb d\u1eef li\u1ec7u l\u00e0 s\u1ed1 nguy\u00ean d\u01b0\u01a1ng ho\u1eb7c s\u1ed1 th\u1eadp ph\u00e2n.<\/li>\n
  • Bao b\u1ecdc b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p:<\/strong>M\u1ecdi m\u00f4 t\u1ea3 n\u00fat\u2014d\u00f9 l\u00e0 nh\u00e1nh cha hay m\u1ed9t ph\u1ea7n t\u1eed l\u00e1 nh\u1ecf\u2014ph\u1ea3i \u0111\u01b0\u1ee3c bao b\u1ecdc g\u1ecdn g\u00e0ng b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p. B\u1ecf qua d\u1ea5u ngo\u1eb7c k\u00e9p s\u1ebd g\u00e2y l\u1ed7i c\u00fa ph\u00e1p ngay l\u1eadp t\u1ee9c.<\/li>\n
  • \u0110\u1ed9 \u0111\u1ec1u c\u1ee7a kho\u1ea3ng tr\u1eafng:<\/strong>M\u1ed1i quan h\u1ec7 cha-con l\u1ed3ng gh\u00e9p \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh ho\u00e0n to\u00e0n b\u1edfi s\u1ed1 l\u01b0\u1ee3ng kho\u1ea3ng tr\u1eafng n\u1eb1m \u1edf \u0111\u1ea7u d\u00f2ng. Duy tr\u00ec quy t\u1eafc \u0111\u1ed9 d\u00e0i tab ho\u1eb7c kho\u1ea3ng tr\u1eafng nh\u1ea5t qu\u00e1n (v\u00ed d\u1ee5 nh\u01b0 hai kho\u1ea3ng tr\u1eafng m\u1ed7i c\u1ea5p) \u0111\u1ec3 tr\u00e1nh c\u00e1c n\u00fat r\u01a1i v\u00e0o nh\u00f3m sai.<\/li>\n
  • Kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb nh\u00e3n:<\/strong>Nh\u1eefng gi\u00e1 tr\u1ecb r\u1ea5t nh\u1ecf trong c\u00e1c c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p s\u00e2u c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn c\u00e1c \u00f4 h\u00ecnh ch\u1eef nh\u1eadt nh\u1ecf, n\u01a1i v\u0103n b\u1ea3n b\u1ecb tr\u00e0n ra ho\u1eb7c ho\u00e0n to\u00e0n kh\u00f4ng th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c. H\u00e3y c\u00e2n nh\u1eafc nh\u00f3m c\u00e1c m\u1ee5c nh\u1ecf l\u1ea1i v\u1edbi nhau d\u01b0\u1edbi danh m\u1ee5c \u201cKh\u00e1c\u201d.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    S\u01a1 \u0111\u1ed3 Treemap hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u ph\u00e2n c\u1ea5p d\u01b0\u1edbi d\u1ea1ng m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt l\u1ed3ng gh\u00e9p. M\u1ed7i nh\u00e1nh c\u1ee7a c\u00e2y \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n b\u1eb1ng m\u1ed9t h\u00ecnh ch\u1eef nh\u1eadt, sau \u0111\u00f3 \u0111\u01b0\u1ee3c l\u00e1t b\u1eb1ng c\u00e1c h\u00ecnh ch\u1eef…<\/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-2084","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-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-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=\"\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-treemap-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-treemap-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/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\":\"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 b\u1ed1 c\u1ee5c s\u01a1 \u0111\u1ed3 Treemap c\u1ee7a Mermaid.js\"}]},{\"@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-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-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":{"\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-treemap-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/vn\/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\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-treemap-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/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":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 b\u1ed1 c\u1ee5c s\u01a1 \u0111\u1ed3 Treemap c\u1ee7a Mermaid.js"}]},{"@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\/2084","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"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2084"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}