{"id":2083,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"},"modified":"2026-07-07T07:02:01","modified_gmt":"2026-07-07T07:02:01","slug":"mermaid-js-sankey-diagram-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 c\u1ea5u h\u00ecnh s\u01a1 \u0111\u1ed3 Sankey c\u1ee7a Mermaid.js"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 Sankey l\u00e0 c\u00f4ng c\u1ee5 tr\u1ef1c quan h\u00f3a r\u1ea5t hi\u1ec7u qu\u1ea3, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 m\u00f4 t\u1ea3 d\u00f2ng ch\u1ea3y \u0111\u1ecbnh h\u01b0\u1edbng c\u1ee7a c\u00e1c l\u01b0\u1ee3ng gi\u1eefa c\u00e1c n\u00fat ri\u00eang bi\u1ec7t trong m\u1ed9t h\u1ec7 th\u1ed1ng. B\u1eb1ng c\u00e1ch thay \u0111\u1ed5i \u0111\u1ed9 r\u1ed9ng v\u1eadt l\u00fd c\u1ee7a c\u00e1c li\u00ean k\u1ebft k\u1ebft n\u1ed1i theo t\u1ef7 l\u1ec7 v\u1edbi th\u1ec3 t\u00edch lu\u1ed3ng s\u1ed1 li\u1ec7u, ch\u00fang gi\u00fap c\u00e1c k\u1ef9 s\u01b0, chuy\u00ean vi\u00ean ph\u00e2n t\u00edch v\u00e0 \u0111\u1ed9i ng\u0169 v\u1eadn h\u00e0nh nh\u1eadn di\u1ec7n ngay l\u1eadp t\u1ee9c c\u00e1c y\u1ebfu t\u1ed1 \u0111\u00f3ng g\u00f3p ch\u00ednh, ph\u00e2n b\u1ed5 ngu\u1ed3n l\u1ef1c, c\u00e1c \u0111i\u1ec3m b\u1ea5t hi\u1ec7u qu\u1ea3 ho\u1eb7c r\u00f2 r\u1ec9 trong c\u00e1c m\u1ea1ng l\u01b0\u1edbi ph\u1ee9c t\u1ea1p nh\u01b0 l\u01b0\u1edbi \u0111i\u1ec7n, chu\u1ed7i cung \u1ee9ng v\u00e0 danh m\u1ee5c \u0111\u1ea7u t\u01b0 t\u00e0i ch\u00ednh.<\/p>\n

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

C\u00e1c \u0111\u1ecbnh ngh\u0129a b\u1ed1 c\u1ee5c Sankey \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean \u0111\u1ecbnh d\u1ea1ng c\u1ea5u tr\u00fac CSV (gi\u00e1 tr\u1ecb ph\u00e2n c\u00e1ch b\u1edfi d\u1ea5u ph\u1ea9y) 3 c\u1ed9t \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a. M\u1ed7i t\u1ec7p b\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t trong hai d\u00f2ng khai b\u00e1o lo\u1ea1i sankey<\/code> ho\u1eb7c sankey-beta<\/code> khai b\u00e1o ki\u1ec3u, theo sau l\u00e0 c\u00e1c d\u00f2ng lu\u1ed3ng ri\u00eang l\u1ebb tu\u00e2n theo nghi\u00eam ng\u1eb7t m\u1eabu Ngu\u1ed3n, M\u1ee5c ti\u00eau, Gi\u00e1 tr\u1ecb<\/code> m\u1eabu.<\/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 
sankey\r\nN\u00fat ngu\u1ed3n, N\u00fat \u0111\u00edch, 150.50\r\nN\u00fat \u0111\u00edch, N\u00fat \u0111\u1ea7u ra cu\u1ed1i c\u00f9ng, 90.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 quy t\u1eafc d\u1eef li\u1ec7u ch\u00ednh v\u00e0 tham s\u1ed1 c\u1ea7n thi\u1ebft \u0111\u1ec3 ph\u00e2n t\u00edch ch\u00ednh x\u00e1c s\u01a1 \u0111\u1ed3 Sankey trong Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
Y\u1ebfu t\u1ed1 c\u00fa ph\u00e1p<\/th>\nY\u00eau c\u1ea7u ki\u1ec3u<\/th>\nM\u00f4 t\u1ea3 v\u00e0 quy t\u1eafc s\u1eed d\u1ee5ng<\/th>\n<\/tr>\n<\/thead>\n
Khai b\u00e1o<\/strong><\/td>\n\u0110\u1ecbnh danh t\u1eeb kh\u00f3a<\/td>\nKh\u1edfi t\u1ea1o b\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c hi\u1ec3n th\u1ecb lu\u1ed3ng. Ch\u1ea5p nh\u1eadn sankey<\/code> ho\u1eb7c sankey-beta<\/code> chu\u1ed7i.<\/td>\n<\/tr>\n
N\u00fat ngu\u1ed3n<\/strong><\/td>\nNh\u00e3n chu\u1ed7i<\/td>\nDanh m\u1ee5c ngu\u1ed3n n\u01a1i lu\u1ed3ng t\u00e0i nguy\u00ean b\u1eaft \u0111\u1ea7u. \u0110\u1ecbnh danh ph\u00e2n bi\u1ec7t ch\u1eef hoa ch\u1eef th\u01b0\u1eddng.<\/td>\n<\/tr>\n
N\u00fat \u0111\u00edch<\/strong><\/td>\nNh\u00e3n chu\u1ed7i<\/td>\nN\u00fat nh\u1eadn n\u01a1i th\u1ec3 t\u00edch li\u00ean k\u1ebft c\u1ee5 th\u1ec3 k\u1ebft th\u00fac.<\/td>\n<\/tr>\n
Gi\u00e1 tr\u1ecb<\/strong><\/td>\nS\u1ed1 th\u1ef1c d\u01b0\u01a1ng \/ S\u1ed1 nguy\u00ean d\u01b0\u01a1ng<\/td>\nTr\u1ecdng s\u1ed1 s\u1ed1 h\u1ecdc c\u1ee7a lu\u1ed3ng. \u0110\u1ed9 d\u00e0y c\u1ee7a \u0111\u01b0\u1eddng d\u1eabn \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n tr\u1ef1c ti\u1ebfp d\u1ef1a tr\u00ean gi\u00e1 tr\u1ecb n\u00e0y.<\/td>\n<\/tr>\n
D\u00f2ng ch\u00fa th\u00edch<\/strong><\/td>\nCh\u1ec9 b\u00e1o c\u00fa ph\u00e1p<\/td>\nM\u1ecdi v\u0103n b\u1ea3n \u0111i k\u00e8m d\u1ea5u ph\u1ea7n tr\u0103m k\u00e9p (“%%<\/code>) s\u1ebd b\u1ecb b\u1ecf qua b\u1edfi tr\u00ecnh bi\u00ean d\u1ecbch, cho ph\u00e9p ch\u00fa th\u00edch d\u1eef li\u1ec7u s\u1ea1ch s\u1ebd.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
X\u1eed l\u00fd c\u00e1c k\u00fd t\u1ef1 \u0111\u1eb7c bi\u1ec7t trong nh\u00e3n n\u00fat<\/h2>\n
V\u00ec d\u1ea5u ph\u1ea9y v\u00e0 d\u1ea5u ngo\u1eb7c k\u00e9p \u0111\u00f3ng vai tr\u00f2 l\u00e0 c\u00e1c k\u00fd hi\u1ec7u ph\u00e2n c\u00e1ch c\u1ea5u tr\u00fac trong b\u1ed9 x\u1eed l\u00fd b\u1ed1 c\u1ee5c, c\u00e1c \u0111\u1ea7u v\u00e0o \u0111\u1eb7t t\u00ean chuy\u00ean bi\u1ec7t y\u00eau c\u1ea7u c\u00e1c k\u1ef9 thu\u1eadt tr\u1ed1n \u0111\u1eb7c bi\u1ec7t \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ch\u00fang hi\u1ec3n th\u1ecb \u0111\u00fang tr\u00ean b\u1ea3ng canvas ph\u00eda tr\u01b0\u1edbc.<\/p>\n
1. D\u1ea5u ph\u1ea9y trong t\u00ean<\/h3>\n
N\u1ebfu m\u1ed9t nh\u00e3n n\u00fat c\u1ee5 th\u1ec3 y\u00eau c\u1ea7u d\u1ea5u ph\u1ea9y th\u1ef1c s\u1ef1, h\u00e3y bao b\u1ecdc to\u00e0n b\u1ed9 container chu\u1ed7i n\u00fat b\u1eb1ng m\u1ed9t c\u1eb7p d\u1ea5u ngo\u1eb7c k\u00e9p chu\u1ea9n:<\/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                    
sankey\r\nKho\u00e1n ng\u00e2n s\u00e1ch,\"Ho\u1ea1t \u0111\u1ed9ng, L\u01b0\u01a1ng v\u00e0 H\u00e0nh ch\u00ednh\",45000<\/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
2. D\u1ea5u ngo\u1eb7c k\u00e9p trong t\u00ean<\/h3>\n
\u0110\u1ec3 hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng d\u1ea5u ngo\u1eb7c k\u00e9p b\u00ean trong t\u00ean nh\u00e3n, h\u00e3y bao b\u1ecdc tham s\u1ed1 t\u1ed5ng th\u1ec3 b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p ngo\u00e0i, v\u00e0 s\u1eed d\u1ee5ng c\u1eb7p d\u1ea5u ngo\u1eb7c k\u00e9p l\u1eb7p l\u1ea1i (“\"\"<\/code>) b\u00ean trong chu\u1ed7i gi\u00e1 tr\u1ecb m\u1ee5c ti\u00eau:<\/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                    
sankey\r\nC\u1ee5m m\u00e1y ch\u1ee7,\"N\u00fat \"\"C\u1ea1nh\"\" N\u1ed9i b\u1ed9\",850<\/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
C\u1ea5u h\u00ecnh ch\u1ee7 \u0111\u1ec1 n\u00e2ng cao (Ch\u1ec9 th\u1ecb)<\/h2>\n
B\u1ea1n c\u00f3 th\u1ec3 tinh ch\u1ec9nh c\u00e1ch tr\u00ecnh b\u00e0y s\u01a1 \u0111\u1ed3 c\u1ee7a m\u00ecnh b\u1eb1ng c\u00e1ch truy\u1ec1n m\u1ed9t kh\u1ed1i c\u1ea5u h\u00ecnh frontmatter \u1edf \u0111\u1ea7u \u0111o\u1ea1n v\u0103n b\u1ea3n t\u00e0i li\u1ec7u. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t ki\u1ec3u li\u00ean k\u1ebft, l\u1ec1 b\u1ed1 c\u1ee5c, ki\u1ec3u ch\u1eef v\u00e0 c\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed tr\u1ef1c ti\u1ebfp t\u1eeb tr\u00ecnh so\u1ea1n th\u1ea3o v\u0103n b\u1ea3n th\u00f4 c\u1ee7a m\u00ecnh.<\/p>\n
Ma tr\u1eadn thu\u1ed9c t\u00ednh c\u1ea5u h\u00ecnh Sankey<\/h3>\n\n\n\n\n\n\n\n\n\n\n
T\u00ean thu\u1ed9c t\u00ednh<\/th>\nGi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ch\u1ea5p nh\u1eadn<\/th>\nK\u1ebft qu\u1ea3 tr\u1ef1c quan<\/th>\n<\/tr>\n<\/thead>\n
hi\u1ec3n_th\u1ecb_gi\u00e1_tr\u1ecb<\/code><\/td>\n\u0111\u00fang<\/code> | sai<\/code><\/td>\nB\u1eadt\/t\u1eaft vi\u1ec7c in v\u0103n b\u1ea3n gi\u00e1 tr\u1ecb lu\u1ed3ng s\u1ed1 h\u1ecdc tr\u1ef1c ti\u1ebfp b\u00ean trong c\u00e1c h\u1ed9p nh\u00e3n n\u00fat.<\/td>\n<\/tr>\n
m\u00e0u_li\u00ean_k\u1ebft<\/code><\/td>\n'ngu\u1ed3n'<\/code> | 'm\u1ee5c_ti\u00eau'<\/code> | 'd\u1ea3i_m\u00e0u'<\/code> | '#hex'<\/code><\/td>\nX\u00e1c \u0111\u1ecbnh \u00e1nh x\u1ea1 m\u00e0u cho c\u00e1c \u0111\u01b0\u1eddng n\u1ed1i li\u00ean k\u1ebft.'d\u1ea3i_m\u00e0u'<\/code> tr\u1ed9n m\u00e0u m\u1ed9t c\u00e1ch m\u01b0\u1ee3t m\u00e0 gi\u1eefa c\u00e1c th\u1ef1c th\u1ec3 k\u1ebft n\u1ed1i.<\/td>\n<\/tr>\n
c\u0103n_\u0111\u1ec1u_n\u00fat<\/code><\/td>\n'c\u0103n_\u0111\u1ec1u'<\/code> | 'tr\u00e1i'<\/code> | 'ph\u1ea3i'<\/code> | 'gi\u1eefa'<\/code><\/td>\nC\u0103n ch\u1ec9nh c\u00e1c c\u1ed9t c\u1ea5u tr\u00fac tr\u00ean l\u01b0\u1edbi kh\u00f4ng gian b\u1ea3ng v\u1ebd.<\/td>\n<\/tr>\n
phong_c\u00e1ch_nh\u00e3n<\/code><\/td>\n'c\u1ed5_\u0111i\u1ec3n'<\/code> | '\u0111\u01b0\u1ee3c vi\u1ec1n'<\/code><\/td>\n'\u0111\u01b0\u1ee3c vi\u1ec1n'<\/code> th\u00eam m\u1ed9t m\u1eb7t n\u1ea1 vi\u1ec1n n\u1ec1n ph\u00eda sau v\u0103n b\u1ea3n \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o kh\u1ea3 n\u0103ng qu\u00e9t cao tr\u00ean c\u00e1c b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p.<\/td>\n<\/tr>\n
nodeWidth<\/code><\/td>\nS\u1ed1 nguy\u00ean (Pixel)<\/td>\nThi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng c\u1ee7a c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt n\u00fat (M\u1eb7c \u0111\u1ecbnh: 10<\/code>).<\/td>\n<\/tr>\n
nodePadding<\/code><\/td>\nS\u1ed1 nguy\u00ean (Pixel)<\/td>\nThi\u1ebft l\u1eadp c\u00e1c tham s\u1ed1 kho\u1ea3ng c\u00e1ch d\u1ecdc gi\u1eefa c\u00e1c h\u00e0ng ch\u1ed3ng l\u00ean nhau (M\u1eb7c \u0111\u1ecbnh: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
B\u1ea3n thi\u1ebft k\u1ebf th\u1ef1c t\u1ebf: Ph\u00e2n ph\u1ed1i l\u01b0\u1edbi \u0111i\u1ec7n n\u0103ng l\u01b0\u1ee3ng s\u1ea1ch<\/h2>\n
B\u1ea3n thi\u1ebft k\u1ebf to\u00e0n di\u1ec7n n\u00e0y theo d\u00f5i h\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd l\u01b0\u1edbi \u0111i\u1ec7n c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng. N\u00f3 th\u1ec3 hi\u1ec7n c\u00e1c c\u1ea5u h\u00ecnh frontmatter\u2014thi\u1ebft l\u1eadp \u0111\u1ed9 d\u1ed1c m\u00e0u li\u00ean k\u1ebft m\u01b0\u1ee3t m\u00e0, phong c\u00e1ch ch\u1eef vi\u1ec1n, v\u00e0 v\u00f4 hi\u1ec7u h\u00f3a \u0111\u1ebfm s\u1ed1 li\u1ec7u ngay tr\u00ean d\u00f2ng\u2014k\u1ebft h\u1ee3p v\u1edbi c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c \u0111a t\u1ea7ng.<\/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  sankey:\r\n    showValues: false\r\n    linkColor: 'gradient'\r\n    nodeAlignment: 'justify'\r\n    labelStyle: 'outlined'\r\n    nodeWidth: 15\r\n    nodePadding: 18\r\n---\r\nsankey\r\n%% D\u1eef li\u1ec7u h\u00e0ng ngu\u1ed3n\r\nTrang tr\u1ea1i n\u0103ng l\u01b0\u1ee3ng m\u1eb7t tr\u1eddi, L\u01b0\u1edbi l\u01b0u tr\u1eef \u0111i\u1ec7n, 120.50\r\nTuabin gi\u00f3, L\u01b0\u1edbi l\u01b0u tr\u1eef \u0111i\u1ec7n, 180.75\r\nNh\u00e0 m\u00e1y th\u1ee7y \u0111i\u1ec7n, \u0110\u01b0\u1eddng d\u00e2y c\u00f4ng nghi\u1ec7p tr\u1ef1c ti\u1ebfp, 210.00\r\nNh\u1eadp kh\u1ea9u nhi\u00ean li\u1ec7u sinh h\u1ecdc, Tr\u1ea1m d\u1ef1 ph\u00f2ng nhi\u1ec7t, 45.25\r\n\r\n%% N\u00fat ph\u00e2n ph\u1ed1i\r\nL\u01b0\u1edbi l\u01b0u tr\u1eef \u0111i\u1ec7n, \u0110\u01b0\u1eddng d\u00e2y ti\u00eau d\u00f9ng d\u00e2n c\u01b0, 145.00\r\nL\u01b0\u1edbi l\u01b0u tr\u1eef \u0111i\u1ec7n, \u0110\u01b0\u1eddng d\u00e2y c\u00f4ng nghi\u1ec7p tr\u1ef1c ti\u1ebfp, 110.25\r\nL\u01b0\u1edbi l\u01b0u tr\u1eef \u0111i\u1ec7n, T\u1ed5n th\u1ea5t h\u1ec7 th\u1ed1ng & Ph\u00e2n t\u00e1n, 46.00\r\n\r\n%% N\u00fat k\u1ebft th\u00fac giao h\u00e0ng cu\u1ed1i c\u00f9ng\r\n\u0110\u01b0\u1eddng d\u00e2y c\u00f4ng nghi\u1ec7p tr\u1ef1c ti\u1ebfp, Trung t\u00e2m s\u1ea3n xu\u1ea5t c\u00f4ng nghi\u1ec7p n\u1eb7ng, 295.00\r\n\u0110\u01b0\u1eddng d\u00e2y c\u00f4ng nghi\u1ec7p tr\u1ef1c ti\u1ebfp, C\u00e1c khu v\u1ef1c b\u00e1n l\u1ebb th\u01b0\u01a1ng m\u1ea1i, 25.25\r\nTr\u1ea1m d\u1ef1 ph\u00f2ng nhi\u1ec7t, C\u00e1c khu v\u1ef1c b\u00e1n l\u1ebb th\u01b0\u01a1ng m\u1ea1i, 45.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\n
Nh\u1eefng l\u1ed7i c\u00fa ph\u00e1p ph\u1ed5 bi\u1ebfn & Gi\u1edbi h\u1ea1n h\u1ec7 th\u1ed1ng<\/h2>\n
Khi bi\u00ean d\u1ecbch c\u00e1c m\u1ea3ng d\u1eef li\u1ec7u d\u00e0y \u0111\u1eb7c, m\u1ed9t v\u00e0i l\u1ed7i c\u1ea5u h\u00ecnh tinh t\u1ebf s\u1ebd g\u00e2y ra l\u1ed7i ph\u00e2n t\u00edch b\u1ed1 c\u1ee5c. H\u00e3y ghi nh\u1edb c\u00e1c quy t\u1eafc kh\u1eafc ph\u1ee5c s\u1ef1 c\u1ed1 sau:<\/p>\n
    \n
  • X\u00e1c minh c\u1ed9t ch\u00ednh x\u00e1c:<\/strong> M\u1ed7i d\u00f2ng m\u1ee5c d\u1eef li\u1ec7u theo sau khai b\u00e1o ti\u00eau \u0111\u1ec1 ch\u00ednh ph\u1ea3i ch\u1ee9a ch\u00ednh x\u00e1c ba tham s\u1ed1 \u0111\u01b0\u1ee3c ph\u00e2n t\u00e1ch b\u1eb1ng d\u1ea5u ph\u1ea9y. Vi\u1ec7c th\u00eam c\u1ed9t th\u1ee9 t\u01b0 ho\u1eb7c thi\u1ebfu tr\u1ecdng s\u1ed1 gi\u00e1 tr\u1ecb s\u1ebd ho\u00e0n to\u00e0n l\u00e0m d\u1eebng bi\u00ean d\u1ecbch s\u01a1 \u0111\u1ed3.<\/li>\n
  • Cho ph\u00e9p d\u00f2ng tr\u1ed1ng:<\/strong> Kh\u00e1c v\u1edbi c\u00e1c quy t\u1eafc ph\u00e2n t\u00edch d\u1eef li\u1ec7u c\u1ee9ng nh\u1eafc truy\u1ec1n th\u1ed1ng, Mermaid cho ph\u00e9p b\u1ea1n th\u00eam c\u00e1c d\u00f2ng tr\u1ed1ng, s\u1ea1ch b\u00ean trong kh\u1ed1i m\u00e3 \u0111\u1ec3 t\u00e1ch bi\u1ec7t logic c\u00e1c t\u1ea7ng kh\u00e1c nhau ho\u1eb7c c\u00e1c giai \u0111o\u1ea1n x\u1eed l\u00fd d\u1eef li\u1ec7u m\u00f4 h\u00ecnh c\u1ee7a b\u1ea1n.<\/li>\n
  • Kh\u1ed1i v\u00f2ng l\u1eb7p v\u00f2ng:<\/strong> C\u00e1c c\u1ea5u tr\u00fac Sankey \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf nghi\u00eam ng\u1eb7t d\u1ef1a tr\u00ean c\u00e1c \u0110\u1ed3 th\u1ecb C\u00f3 h\u01b0\u1edbng Kh\u00f4ng chu tr\u00ecnh (DAG). N\u1ebfu b\u1ea1n k\u1ebft n\u1ed1i N\u00fat A v\u1edbi N\u00fat B, r\u1ed3i c\u1ed1 g\u1eafng vi\u1ebft m\u1ed9t \u0111\u01b0\u1eddng \u0111i d\u00f2ng k\u1ebft n\u1ed1i N\u00fat B quay tr\u1edf l\u1ea1i N\u00fat A, to\u00e1n h\u1ecdc c\u1ee7a b\u1ed9 x\u1eed l\u00fd b\u1ed1 c\u1ee5c s\u1ebd g\u1eb7p s\u1ef1 c\u1ed1 h\u1ed3i ti\u1ebfp v\u00e0 b\u00e1o l\u1ed7i.<\/li>\n
  • Gi\u1edbi h\u1ea1n d\u1eef li\u1ec7u gi\u00e1 tr\u1ecb:<\/strong> C\u00e1c tr\u01b0\u1eddng gi\u00e1 tr\u1ecb ch\u1ec9 c\u00f3 th\u1ec3 x\u1eed l\u00fd c\u00e1c s\u1ed1 d\u01b0\u01a1ng. C\u00e1c gi\u00e1 tr\u1ecb \u00e2m ho\u1eb7c k\u00fd t\u1ef1 ch\u1eef c\u00e1i nguy\u00ean b\u1ea3n kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb th\u00e0nh tham s\u1ed1 chi\u1ec1u r\u1ed9ng.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    S\u01a1 \u0111\u1ed3 Sankey l\u00e0 c\u00f4ng c\u1ee5 tr\u1ef1c quan h\u00f3a r\u1ea5t hi\u1ec7u qu\u1ea3, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 m\u00f4 t\u1ea3 d\u00f2ng ch\u1ea3y \u0111\u1ecbnh h\u01b0\u1edbng c\u1ee7a c\u00e1c l\u01b0\u1ee3ng gi\u1eefa c\u00e1c n\u00fat ri\u00eang bi\u1ec7t trong m\u1ed9t h\u1ec7 th\u1ed1ng. B\u1eb1ng c\u00e1ch thay \u0111\u1ed5i \u0111\u1ed9 r\u1ed9ng…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":15,"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-2083","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Sankey Diagram | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a 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-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-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_6a4ca539ea639.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=\"4 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-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"name\":\"Mermaid Sankey Diagram | 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-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"datePublished\":\"2026-07-07T07:02:01+00:00\",\"description\":\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ca539ea639.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-sankey-diagram-syntax-configuration-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 c\u1ea5u h\u00ecnh s\u01a1 \u0111\u1ed3 Sankey 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 Sankey Diagram | VPasCode Text to Diagram Guide","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a 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-sankey-diagram-syntax-configuration-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","og_description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"4 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","name":"Mermaid Sankey Diagram | 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-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","datePublished":"2026-07-07T07:02:01+00:00","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ca539ea639.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sankey-diagram-syntax-configuration-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 c\u1ea5u h\u00ecnh s\u01a1 \u0111\u1ed3 Sankey 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\/2083","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=2083"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}