{"id":2078,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-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 ki\u1ebfn tr\u00fac Mermaid.js"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac cung c\u1ea5p b\u1ea3n v\u1ebd c\u1ea5u tr\u00fac \u0111\u01b0\u1ee3c c\u00e1c ki\u1ebfn tr\u00fac s\u01b0 h\u1ec7 th\u1ed1ng v\u00e0 nh\u00f3m DevOps s\u1eed d\u1ee5ng \u0111\u1ec3 tr\u1ef1c quan h\u00f3a c\u00e1c thi\u1ebft l\u1eadp h\u1ea1 t\u1ea7ng, c\u00e1c d\u1ecbch v\u1ee5 vi m\u00f4 \u0111\u00e1m m\u00e2y v\u00e0 c\u1ea5u h\u00ecnh b\u1ed1 c\u1ee5c c\u1ea5u tr\u00fac. \u0110\u01b0\u1ee3c x\u00e2y d\u1ef1ng tr\u00ean n\u1ec1n t\u1ea3ng architecture-beta<\/code> \u0111\u1ed9ng c\u01a1, c\u00f4ng c\u1ee5 d\u1ef1a tr\u00ean v\u0103n b\u1ea3n n\u00e0y thay th\u1ebf c\u00e1c c\u00f4ng c\u1ee5 k\u00e9o th\u1ea3 th\u1ee7 c\u00f4ng b\u1eb1ng c\u00e1ch t\u1ef1 \u0111\u1ed9ng s\u1eafp x\u1ebfp c\u00e1c nh\u00f3m d\u1ecbch v\u1ee5 c\u1ea5u tr\u00fac, c\u1ee5m c\u01a1 s\u1edf d\u1eef li\u1ec7u, c\u1ed5ng giao ti\u1ebfp v\u00e0 c\u00e1c \u0111\u01b0\u1eddng \u0111i \u1edf bi\u00ean th\u00e0nh c\u00e1c b\u1ed1 c\u1ee5c h\u1ec7 th\u1ed1ng s\u1ea1ch s\u1ebd, c\u00f3 th\u1ec3 d\u1ef1 \u0111o\u00e1n \u0111\u01b0\u1ee3c.<\/p>\n

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

M\u1ed7i s\u01a1 \u0111\u1ed3 b\u1eaft \u0111\u1ea7u b\u1eb1ng ph\u1ea7n khai b\u00e1o architecture-beta<\/code>ti\u00eau \u0111\u1ec1 khai b\u00e1o. B\u1ea1n \u0111i\u1ec1n \u0111\u1ea7y b\u1ea3ng v\u1ebd b\u1eb1ng c\u00e1ch x\u00e1c \u0111\u1ecbnh c\u00e1c ph\u1ea7n t\u1eed n\u00fat ri\u00eang l\u1ebb b\u1eb1ng t\u1eeb kh\u00f3a service<\/code>t\u1eeb kh\u00f3a, v\u00e0 \u00e1nh x\u1ea1 c\u00e1c \u0111\u01b0\u1eddng k\u1ebft n\u1ed1i b\u1eb1ng c\u00e1ch x\u00e1c \u0111\u1ecbnh c\u00e1c c\u1ed5ng t\u1ecda \u0111\u1ed9 h\u01b0\u1edbng ch\u00ednh x\u00e1c (T<\/strong>p, B<\/strong>ottom, L<\/strong>eft, R<\/strong>ight) \u0111\u01b0\u1ee3c ph\u00e2n c\u00e1ch b\u1edfi d\u1ea5u hai ch\u1ea5m v\u00e0 d\u1ea5u g\u1ea1ch \u0111\u00f4i.<\/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 
architecture-beta\r\n  service gateway(internet)[Nh\u00e3n C\u1ed5ng]\r\n  service server(server)[M\u00e1y ch\u1ee7 \u1ee8ng d\u1ee5ng]\r\n  \r\n  gateway:B -- T:server<\/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             <\/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 th\u00e0nh ph\u1ea7n d\u1eef li\u1ec7u ch\u00ednh, t\u1eeb kh\u00f3a \u0111\u1ecbnh d\u1ea1ng v\u00e0 thu\u1ed9c t\u00ednh k\u1ebft n\u1ed1i \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng b\u1ea3n \u0111\u1ed3 kh\u00f4ng gian l\u00e0m vi\u1ec7c ki\u1ebfn tr\u00fac trong Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Th\u00e0nh ph\u1ea7n 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\u1ea3ng v\u1ebd kh\u00f4ng gian l\u00e0m vi\u1ec7c b\u1ea3n \u0111\u1ed3 h\u1ea1 t\u1ea7ng. Ph\u1ea3i s\u1eed d\u1ee5ng ch\u00ednh x\u00e1c ki\u1ebfn tr\u00fac-beta<\/code> kh\u1ed1i.<\/td>\n<\/tr>\n
N\u00fat d\u1ecbch v\u1ee5<\/strong><\/td>\nT\u1eeb kh\u00f3a + Kh\u1ed1i nh\u1eadn di\u1ec7n<\/td>\nKhai b\u00e1o m\u1ed9t th\u1ef1c th\u1ec3 ki\u1ebfn tr\u00fac. S\u1eed d\u1ee5ng c\u00fa ph\u00e1p: d\u1ecbch v\u1ee5 id(icon)[Nh\u00e3n hi\u1ec3n th\u1ecb]<\/code>.<\/td>\n<\/tr>\n
Bao b\u1ecdc nh\u00f3m<\/strong><\/td>\nT\u1eeb kh\u00f3a ch\u1ee9a<\/td>\nNh\u00f3m c\u00e1c d\u1ecbch v\u1ee5 li\u00ean quan b\u00ean trong m\u1ed9t container tr\u1ef1c quan. S\u1eed d\u1ee5ng c\u00fa ph\u00e1p: nh\u00f3m id(icon)[Nh\u00e3n nh\u00f3m]<\/code>.<\/td>\n<\/tr>\n
T\u1eeb kh\u00f3a Trong<\/strong><\/td>\nTo\u00e1n t\u1eed g\u00e1n<\/td>\nG\u00e1n r\u00f5 r\u00e0ng m\u1ed9t n\u00fat d\u1ecbch v\u1ee5 \u0111\u1ec3 n\u1eb1m b\u00ean trong m\u1ed9t bao b\u1ecdc nh\u00f3m \u0111\u00e3 khai b\u00e1o c\u1ee5 th\u1ec3: d\u1ecbch v\u1ee5 id(icon)[Nh\u00e3n] trong groupId<\/code>.<\/td>\n<\/tr>\n
N\u00fat giao \u0111i\u1ec3m<\/strong><\/td>\nTr\u00ecnh x\u00e1c \u0111\u1ecbnh t\u1eeb kh\u00f3a<\/td>\nThi\u1ebft l\u1eadp m\u1ed9t \u0111i\u1ec3m trung t\u00e2m \u0111\u1ecbnh h\u01b0\u1edbng c\u1ea5u tr\u00fac d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh tuy\u1ebfn g\u1ecdn g\u00e0ng c\u00e1c \u0111\u01b0\u1eddng n\u1ed1i ph\u1ee9c t\u1ea1p, \u0111a h\u01b0\u1edbng: id giao \u0111i\u1ec3m<\/code>.<\/td>\n<\/tr>\n
C\u1ea1nh k\u1ebft n\u1ed1i<\/strong><\/td>\nTo\u00e1n t\u1eed h\u01b0\u1edbng c\u1ed5ng<\/td>\nC\u1ea5u h\u00ecnh c\u00e1c \u0111\u01b0\u1eddng theo d\u00f5i \u0111\u1ecbnh h\u01b0\u1edbng b\u1eb1ng c\u00e1ch c\u1ed1 \u0111\u1ecbnh \u0111\u01b0\u1eddng n\u1ed1i v\u00e0o c\u00e1c c\u1ea1nh c\u1ee5 th\u1ec3 c\u1ee7a n\u00fat (T, B, L, R): ngu\u1ed3n:side -- side:\u0111\u00edch<\/code>. H\u1ed7 tr\u1ee3 \u0111\u1ea7u m\u0169i t\u00ean \u0111\u1ecbnh h\u01b0\u1edbng (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Nh\u00f3m n\u00e2ng cao v\u00e0 \u0111\u1ecbnh tuy\u1ebfn c\u1ea1nh c\u1ed5ng<\/h2>\n
\u0110\u1ec3 ki\u1ec3m so\u00e1t ch\u00ednh x\u00e1c c\u00e1ch c\u00e1c li\u00ean k\u1ebft di chuy\u1ec3n gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n m\u00e0 kh\u00f4ng g\u00e2y l\u1ed9n x\u1ed9n, b\u1ed9 x\u1eed l\u00fd ki\u1ebfn tr\u00fac y\u00eau c\u1ea7u c\u00e1c k\u1ebft n\u1ed1i c\u1ed5ng r\u00f5 r\u00e0ng. C\u00e1c n\u00fat li\u00ean quan c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ed5 ch\u1ee9c b\u00ean trong c\u00e1c nh\u00f3m c\u1ea5u tr\u00fac \u0111\u1ec3 l\u00e0m r\u00f5 ranh gi\u1edbi h\u1ec7 th\u1ed1ng.<\/p>\n
1. Quy t\u1eafc k\u1ebft n\u1ed1i c\u1ed5ng ch\u00ednh x\u00e1c<\/h3>\n
B\u1ea1n x\u00e1c \u0111\u1ecbnh n\u01a1i m\u1ed9t \u0111\u01b0\u1eddng k\u1ebft n\u1ed1i r\u1eddi kh\u1ecfi v\u00e0 \u0111i v\u00e0o m\u1ed9t th\u00e0nh ph\u1ea7n b\u1eb1ng c\u00e1ch th\u00eam d\u1ea5u hai ch\u1ea5m v\u00e0 c\u1edd h\u01b0\u1edbng c\u1ea1nh (“T<\/code>, D<\/code>, Tr<\/code>, Ph<\/code>) v\u00e0o c\u00e1c \u0111\u1ecbnh danh n\u00fat t\u01b0\u01a1ng \u1ee9ng:<\/p>\n