{"id":2106,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-class-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-class-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 l\u1edbp Mermaid.js"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 l\u1edbp l\u00e0 g\u00ec?<\/h2>\n

M\u1ed9t S\u01a1 \u0111\u1ed3 l\u1edbp<\/strong> l\u00e0 m\u1ed9t s\u01a1 \u0111\u1ed3 UML<\/strong> gi\u00fap tr\u1ef1c quan h\u00f3a ki\u1ebfn tr\u00fac t\u0129nh c\u1ee7a m\u1ed9t h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng. L\u00e0 m\u1ed9t lo\u1ea1i s\u01a1 \u0111\u1ed3 UML kh\u00f4ng th\u1ec3 thi\u1ebfu,lo\u1ea1i s\u01a1 \u0111\u1ed3 UML<\/strong>, n\u00f3 m\u00f4 t\u1ea3 c\u00e1c l\u1edbp, giao di\u1ec7n v\u00e0 m\u00f4 h\u00ecnh d\u1eef li\u1ec7u ri\u00eang l\u1ebb trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n, ghi r\u00f5 c\u00e1c tr\u01b0\u1eddng n\u1ed9i b\u1ed9 (thu\u1ed9c t\u00ednh), c\u00e1c ch\u1ee9c n\u0103ng ho\u1ea1t \u0111\u1ed9ng (ph\u01b0\u01a1ng th\u1ee9c) v\u00e0 c\u00e1c m\u1ed1i quan h\u1ec7 c\u1ea5u tr\u00fac k\u1ebft n\u1ed1i ch\u00fang l\u1ea1i v\u1edbi nhau. B\u1ea3n v\u1ebd n\u00e0y r\u1ea5t quan tr\u1ecdng \u0111\u1ed1i v\u1edbi c\u00e1c k\u1ef9 s\u01b0 ph\u1ea7n m\u1ec1m c\u1ea7n chuy\u1ec3n \u0111\u1ed5i c\u00e1c thi\u1ebft k\u1ebf mi\u1ec1n c\u1ea5p cao th\u00e0nh c\u00e1c c\u1ea5u tr\u00fac \u0111\u1ed1i t\u01b0\u1ee3ng s\u1ea1ch s\u1ebd, d\u1ec5 b\u1ea3o tr\u00ec.<\/p>\n

V\u1edbi Mermaid.js<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 ph\u00e1c th\u1ea3o c\u00e1c m\u00f4 h\u00ecnh d\u1eef li\u1ec7u v\u00e0 d\u1ecbch v\u1ee5 h\u1ec7 th\u1ed1ng b\u1eb1ng c\u00e1c \u0111\u1ecbnh ngh\u0129a tr\u1ef1c quan, d\u1ef1a tr\u00ean v\u0103n b\u1ea3n. B\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n k\u00edch th\u01b0\u1edbc h\u1ed9p, c\u1ea5u tr\u00fac c\u00e1c ng\u0103n d\u1eef li\u1ec7u UML chu\u1ea9n, v\u00e0 c\u0103n ch\u1ec9nh c\u00e1c m\u0169i t\u00ean quan h\u1ec7 tr\u00ean b\u1ea3ng v\u1ebd c\u1ee7a b\u1ea1n m\u00e0 kh\u00f4ng c\u1ea7n b\u1ea5t k\u1ef3 thao t\u00e1c \u0111\u1ecbnh d\u1ea1ng th\u1ee7 c\u00f4ng n\u00e0o.<\/p>\n

H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p c\u1ed1t l\u00f5i: C\u00e1c th\u00e0nh ph\u1ea7n v\u00e0 c\u1ea5u tr\u00fac<\/h2>\n

\u0110\u1ec3 thi\u1ebft k\u1ebf m\u1ed9t s\u01a1 \u0111\u1ed3 l\u1edbp UML ch\u00ednh x\u00e1c, tu\u00e2n th\u1ee7 chu\u1ea9n trong Mermaid, b\u1ea1n ph\u1ea3i th\u00e0nh th\u1ea1o c\u00e1c khai b\u00e1o th\u00e0nh vi\u00ean, c\u00e1c b\u1ed9 s\u1eeda truy c\u1eadp v\u00e0 c\u00e1c m\u0169i t\u00ean m\u1ed1i quan h\u1ec7 c\u1ea5u tr\u00fac.<\/p>\n

1. Khai b\u00e1o l\u1edbp v\u00e0 c\u00e1c ng\u0103n l\u1edbp<\/h3>\n

B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a m\u1ed9t l\u1edbp b\u1eb1ng hai \u0111\u1ecbnh d\u1ea1ng h\u1ee3p l\u1ec7. \u0110\u1ed1i v\u1edbi m\u1ed9t l\u1edbp \u0111\u01a1n gi\u1ea3n, h\u00e3y s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a class<\/code>k\u00e8m theo t\u00ean l\u1edbp. N\u1ebfu b\u1ea1n mu\u1ed1n bao g\u1ed3m c\u00e1c tr\u01b0\u1eddng v\u00e0 ph\u01b0\u01a1ng th\u1ee9c ngay l\u1eadp t\u1ee9c, h\u00e3y s\u1eed d\u1ee5ng d\u1ea5u ngo\u1eb7c nh\u1ecdn \u1edf cu\u1ed1i \u0111\u1ec3 t\u1ea1o kh\u1ed1i th\u00e2n r\u00f5 r\u00e0ng:<\/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 
classDiagram\r\n    class UserProfile {\r\n        +String username\r\n        +String email\r\n        +updateEmail(newEmail) void\r\n    }<\/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. Th\u00eam c\u00e1c b\u1ed9 s\u1eeda m\u1ee9c \u0111\u1ed9 truy c\u1eadp \/ quy\u1ec1n truy c\u1eadp<\/h3>\n
\u0110\u1ec3 ghi ch\u00fa c\u00e1c quy t\u1eafc \u0111\u00f3ng g\u00f3i UML chu\u1ea9n, h\u00e3y \u0111\u1eb7t m\u1ed9t k\u00fd hi\u1ec7u c\u1ee5 th\u1ec3 ngay tr\u01b0\u1edbc t\u00ean thu\u1ed9c t\u00ednh ho\u1eb7c ph\u01b0\u01a1ng th\u1ee9c \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 truy c\u1eadp c\u1ee7a n\u00f3:<\/p>\n