{"id":2114,"date":"2026-05-26T07:21:24","date_gmt":"2026-05-26T07:21:24","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/plantuml-component-diagram-syntax-guide\/"},"modified":"2026-05-26T07:21:24","modified_gmt":"2026-05-26T07:21:24","slug":"plantuml-component-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/plantuml-component-diagram-syntax-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n PlantUML"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n l\u00e0 g\u00ec?<\/h2>\n

M\u1ed9t S\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n<\/strong> l\u00e0 m\u1ed9t s\u01a1 \u0111\u1ed3 c\u1ea5u tr\u00fac s\u01a1 \u0111\u1ed3 UML<\/strong> m\u00f4 t\u1ea3 t\u1ed5 ch\u1ee9c m\u00f4-\u0111un c\u1ea5p cao c\u1ee7a m\u1ed9t h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m. L\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quan tr\u1ecdng trong \u0111\u1eb7c t\u1ea3 Ng\u00f4n ng\u1eef M\u00f4 h\u00ecnh h\u00f3a \u0110\u01a1n nh\u1ea5t (UML), lo\u1ea1i s\u01a1 \u0111\u1ed3 UML n\u00e0ylo\u1ea1i s\u01a1 \u0111\u1ed3 UML<\/strong>tr\u1ef1c quan h\u00f3a c\u00e1ch c\u00e1c m\u00f4-\u0111un m\u00e3 ngu\u1ed3n v\u1eadt l\u00fd, th\u01b0 vi\u1ec7n, microservice, g\u00f3i th\u1ef1c thi v\u00e0 c\u00e1c l\u1edbp c\u01a1 s\u1edf d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c nh\u00f3m v\u00e0 k\u1ebft n\u1ed1i v\u1ec1 m\u1eb7t c\u1ea5u tr\u00fac. N\u00f3 chuy\u1ec3n tr\u1ecdng t\u00e2m t\u00e0i li\u1ec7u kh\u1ecfi c\u00e1c \u0111\u1ecbnh ngh\u0129a l\u1edbp chi ti\u1ebft, gi\u00fap c\u00e1c ki\u1ebfn tr\u00fac s\u01b0 ph\u1ea7n m\u1ec1m v\u00e0 k\u1ef9 s\u01b0 ch\u00ednh x\u00e1c minh h\u1ecda r\u00f5 r\u00e0ng c\u00e1c ranh gi\u1edbi t\u00edch h\u1ee3p h\u1ec7 th\u1ed1ng, c\u00e1c \u0111\u01b0\u1eddng d\u1eabn \u0111i\u1ec1u ph\u1ed1i API v\u00e0 c\u00e1c ph\u1ee5 thu\u1ed9c b\u00ean th\u1ee9 ba.<\/p>\n

D\u00f9 b\u1ea1n \u0111ang ph\u00e1c th\u1ea3o ki\u1ebfn tr\u00fac microservice hi\u1ec7n \u0111\u1ea1i d\u1ef1a tr\u00ean \u0111\u00e1m m\u00e2y hay minh h\u1ecda c\u00e1ch m\u1ed9t th\u01b0 vi\u1ec7n khung n\u1ed9i b\u1ed9 k\u1ebft n\u1ed1i v\u00e0o l\u00f5i \u1ee9ng d\u1ee5ng c\u0169, b\u1ea3n \u0111\u1ed3 th\u00e0nh ph\u1ea7n UML cung c\u1ea5p c\u00e1i nh\u00ecn r\u00f5 r\u00e0ng v\u00e0 c\u1ea5u tr\u00fac v\u1ec1 c\u00e1c ranh gi\u1edbi h\u1ec7 th\u1ed1ng. V\u1edbi VPasCode<\/strong>, b\u1ed1 c\u1ee5c th\u00e0nh ph\u1ea7n c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb t\u1ef1 \u0111\u1ed9ng d\u1ef1a tr\u00ean v\u0103n b\u1ea3n khai b\u00e1o, lo\u1ea1i b\u1ecf s\u1ef1 phi\u1ec1n to\u00e1i khi \u0111i\u1ec1u ch\u1ec9nh th\u1ee7 c\u00f4ng c\u00e1c h\u1ed9p b\u1ed1 c\u1ee5c hay d\u00e2y n\u1ed1i.<\/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 th\u00e0nh ph\u1ea7n UML tinh t\u1ebf v\u00e0 tu\u00e2n th\u1ee7 chu\u1ea9n trong PlantUML, b\u1ea1n c\u1ea7n th\u00e0nh th\u1ea1o c\u00e1c khai b\u00e1o kh\u1ed1i m\u00e3 m\u00f4-\u0111un, c\u01a1 ch\u1ebf k\u1ebft n\u1ed1i giao di\u1ec7n, nh\u00f3m g\u00f3i h\u1ec7 th\u1ed1ng v\u00e0 c\u00e1c tham s\u1ed1 k\u1ebft n\u1ed1i theo h\u01b0\u1edbng.<\/p>\n

1. Khai b\u00e1o c\u00e1c th\u00e0nh ph\u1ea7n ph\u1ea7n m\u1ec1m<\/h3>\n

B\u1ea1n khai b\u00e1o m\u1ed9t m\u00f4-\u0111un ph\u1ea7n m\u1ec1m b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a component<\/code> t\u1eeb kh\u00f3a. Thay v\u00e0o \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 bao m\u1ed9t \u0111\u1ecbnh danh v\u0103n b\u1ea3n s\u1ea1ch b\u00ean trong d\u1ea5u ngo\u1eb7c vu\u00f4ng ([T\u00ean th\u00e0nh ph\u1ea7n]<\/code>), \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t k\u00fd hi\u1ec7u vi\u1ebft t\u1eaft to\u00e0n c\u1ee5c:<\/p>\n

\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Plantuml<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Plantuml in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
component PaymentEngine\r\n[Auth Service] as AuthService<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml 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 Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
M\u1eb9o chuy\u00ean gia:<\/em>Lu\u00f4n k\u1ebft h\u1ee3p c\u00e1c chu\u1ed7i th\u00e0nh ph\u1ea7n d\u00e0i v\u1edbi m\u1ed9t as<\/code>\u0111\u1ecbnh danh (v\u00ed d\u1ee5 nh\u01b0 as AuthService<\/code>) \u0111\u1ec3 gi\u1eef c\u00e1c \u0111\u01b0\u1eddng quan h\u1ec7 s\u1ea1ch s\u1ebd v\u00e0 d\u1ec5 \u0111\u1ecdc.<\/p>\n
2. X\u00e1c \u0111\u1ecbnh c\u1ed5ng v\u00e0 giao di\u1ec7n<\/h3>\n
C\u00e1c th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng t\u00e1c v\u1edbi nhau th\u00f4ng qua c\u00e1c \u0111i\u1ec3m v\u00e0o c\u1ea5u tr\u00fac. B\u1ea1n c\u00f3 th\u1ec3 m\u00f4 h\u00ecnh h\u00f3a r\u00f5 r\u00e0ng c\u00e1c giao di\u1ec7n UML chu\u1ea9n (\u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n tr\u1ef1c quan b\u1eb1ng bi\u1ec3u t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n ki\u1ec3u “k\u1eb9o m\u00fat” s\u1ea1ch s\u1ebd) b\u1eb1ng t\u1eeb kh\u00f3agiao di\u1ec7n<\/code>t\u1eeb kh\u00f3a:<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
giao di\u1ec7n \"REST API v2\" as WebAPI\r\n[AuthService] --() WebAPI : \"cung c\u1ea5p\"<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml 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 Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
3. B\u1ea3n \u0111\u1ed3 h\u00f3a c\u00e1c ph\u1ee5 thu\u1ed9c th\u00e0nh ph\u1ea7n<\/h3>\n
\u0110\u1ec3 th\u1ec3 hi\u1ec7n r\u1eb1ng m\u1ed9t m\u00f4-\u0111un h\u1ec7 th\u1ed1ng ph\u1ee5 thu\u1ed9c v\u00e0o ho\u1eb7c giao ti\u1ebfp v\u1edbi m\u1ed9t m\u00f4-\u0111un kh\u00e1c, h\u00e3y s\u1eed d\u1ee5ng c\u00e1c m\u0169i t\u00ean \u0111\u1ecbnh h\u01b0\u1edbng (--><\/code>). B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c \u0111\u01b0\u1eddng ph\u1ee5 thu\u1ed9c \u0111i\u1ec3m chu\u1ea9n (..><\/code>) \u0111\u1ec3 bi\u1ec3u di\u1ec5n c\u00e1c m\u1ed1i quan h\u1ec7 l\u1ecfng l\u1ebbo h\u01a1n, nh\u01b0 c\u00e1c m\u1eabu ti\u00eau th\u1ee5 h\u00e0ng \u0111\u1ee3i tin nh\u1eafn ho\u1eb7c c\u00e1c l\u1eddi g\u1ecdi th\u1eddi gian ch\u1ea1y t\u1ea1m th\u1eddi:<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
[\u1ee8ng d\u1ee5ng Frontend] --> WebAPI\r\nWebAPI ..> [C\u01a1 s\u1edf d\u1eef li\u1ec7u] : \"Truy v\u1ea5n SQL\"<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml 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 Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
4. T\u1ed5 ch\u1ee9c c\u00e1c ranh gi\u1edbi b\u1eb1ng g\u00f3i<\/h3>\n
\u0110\u1ec3 thi\u1ebft l\u1eadp c\u00e1c ranh gi\u1edbi h\u1ec7 th\u1ed1ng con r\u00f5 r\u00e0ng ho\u1eb7c ph\u00e2n lo\u1ea1i c\u00e1c th\u00e0nh ph\u1ea7n d\u1ef1a tr\u00ean m\u00f4i tr\u01b0\u1eddng tri\u1ec3n khai, h\u00e3y bao b\u1ecdc c\u00e1c kh\u1ed1i m\u00f4-\u0111un c\u1ee7a b\u1ea1n b\u00ean trong c\u00e1c bao b\u1ecdc c\u1ea5u tr\u00facg\u00f3i<\/code> ho\u1eb7c m\u00e2y<\/code> bao b\u1ecdc:<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
g\u00f3i \"B\u1ed1i c\u1ea3nh B\u1ea3o m\u1eadt\" {\r\n    [D\u1ecbch v\u1ee5 X\u00e1c th\u1ef1c]\r\n    [Tr\u00ecnh x\u00e1c th\u1ef1c Token]\r\n}<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml 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 Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t cho c\u00e1c h\u1ec7 th\u1ed1ng con th\u00e0nh ph\u1ea7n s\u1ea1ch s\u1ebd<\/h2>\n