{"id":12149,"date":"2026-08-14T09:46:06","date_gmt":"2026-08-14T01:46:06","guid":{"rendered":"https:\/\/www.cybermedian.com\/vn\/generating-plantuml-and-c4-models-in-vpascode\/"},"modified":"2026-09-03T22:38:09","modified_gmt":"2026-09-03T14:38:09","slug":"generating-plantuml-and-c4-models-in-vpascode","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/vn\/generating-plantuml-and-c4-models-in-vpascode\/","title":{"rendered":"Ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng v\u1edbi AI: T\u1ea1o m\u00f4 h\u00ecnh PlantUML & C4 trong VPasCode"},"content":{"rendered":"

Ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i \u0111\u00f2i h\u1ecfi c\u00e1c v\u00f2ng l\u1eb7p thi\u1ebft k\u1ebf nhanh ch\u00f3ng m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m \u0111\u1ed9 ch\u00ednh x\u00e1c. C\u00e1c ki\u1ebfn tr\u00fac s\u01b0 doanh nghi\u1ec7p v\u00e0 nh\u00e0 thi\u1ebft k\u1ebf h\u1ec7 th\u1ed1ng th\u01b0\u1eddng d\u1ef1a v\u00e0o Ng\u00f4n ng\u1eef Chuy\u00ean bi\u1ec7t (DSL) \u0111\u1ec3 duy tr\u00ec s\u1ef1 r\u00f5 r\u00e0ng trong t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt. Tuy nhi\u00ean, vi\u1ec7c th\u1ee7 c\u00f4ng ph\u00e1c th\u1ea3o c\u00e1c m\u00f4 h\u00ecnh tr\u1ef1c quan chi ti\u1ebft nh\u01b0ki\u1ebfn tr\u00fac C4<\/a>c\u00e1c container ho\u1eb7c lu\u1ed3ng tr\u00ecnh t\u1ef1 \u0111a t\u1ea7ng th\u01b0\u1eddng t\u1ea1o ra s\u1ef1 c\u1ea3n tr\u1edf \u0111\u00e1ng k\u1ec3 trong c\u00e1c cu\u1ed9c ch\u1ea1y n\u01b0\u1edbc r\u00fat thi\u1ebft k\u1ebf nhanh ch\u00f3ng.<\/p>\n

c\u1ee7a Visual ParadigmVPasCode<\/a>gi\u1ea3i quy\u1ebft th\u00e1ch th\u1ee9c n\u00e0y m\u1ed9t c\u00e1ch tr\u1ef1c ti\u1ebfp. Ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t c\u00f4ng c\u1ee5 ti\u00ean ti\u1ebfnv\u1ebd s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3<\/strong>, n\u1ec1n t\u1ea3ng k\u1ebft h\u1ee3p m\u1ed9t b\u1ea3ng v\u1ebd ch\u1ec9nh s\u1eeda d\u1ef1a tr\u00ean v\u0103n b\u1ea3n v\u1edbi m\u1ed9t \u0111\u1ed9ng c\u01a1 AI tr\u00f2 chuy\u1ec7n \u0111\u01b0\u1ee3c tinh ch\u1ec9nh \u0111\u1eb7c bi\u1ec7t cho tr\u1ef1c quan h\u00f3a k\u1ef9 thu\u1eadt. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p c\u00e1c nh\u00f3m doanh nghi\u1ec7p ph\u00e1c th\u1ea3o, t\u00e1i c\u1ea5u tr\u00fac v\u00e0 duy tr\u00ec c\u00e1c m\u00f4 h\u00ecnh doanh nghi\u1ec7p ph\u1ee9c t\u1ea1p th\u00f4ng qua c\u00e1c h\u01b0\u1edbng d\u1eabn b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean.<\/p>\n

\"M\u1ed9t<\/p>\n

Chuy\u1ec3n \u0111\u1ed5i Ki\u1ebfn tr\u00fac K\u1ef9 thu\u1eadt b\u1eb1ng c\u00e1c L\u1ec7nh nh\u1eafc b\u1eb1ng Ng\u00f4n ng\u1eef T\u1ef1 nhi\u00ean<\/h2>\n

Thay v\u00ec x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 t\u1eebng h\u00ecnh d\u1ea1ng trong c\u00e1c b\u1ed9 k\u00e9o-th\u1ea3, c\u00e1c ki\u1ebfn tr\u00fac s\u01b0 ph\u1ea7n m\u1ec1m c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9tc\u00f4ng c\u1ee5 AI PlantUML<\/strong>\u0111\u1ec3 d\u1ecbch c\u00e1c m\u00f4 t\u1ea3 h\u1ec7 th\u1ed1ng c\u1ea5p cao th\u00e0nh c\u00e1c k\u1ecbch b\u1ea3n c\u00f3 c\u1ea5u tr\u00fac. VPasCode x\u1eed l\u00fd c\u00e1c l\u1ec7nh nh\u1eafc b\u1eb1ng ti\u1ebfng Anh \u0111\u01a1n gi\u1ea3n n\u00e0y v\u00e0 xu\u1ea5t ra c\u00e1c k\u1ecbch b\u1ea3n h\u1ee3p l\u1ec7 v\u1ec1 c\u00fa ph\u00e1p tr\u00ean nhi\u1ec1u ti\u00eau chu\u1ea9n tr\u1ef1c quan h\u00f3a \u0111a d\u1ea1ng, bao g\u1ed3m PlantUML, Mermaid, Graphviz v\u00e0 b\u1ed1 c\u1ee5c C4.<\/p>\n

\"VPasCode<\/p>\n

Th\u00f4ng qua \u0111\u1ed9ng c\u01a1 \u0111a \u0111\u1ecbnh d\u1ea1ng c\u1ee7a m\u00ecnh, c\u00f4ng c\u1ee5t\u1ea1o s\u01a1 \u0111\u1ed3 AI<\/strong><\/a>t\u1ef1 \u0111\u1ed9ng c\u1ea5u tr\u00fac c\u00e1c m\u1ed1i quan h\u1ec7, th\u00e0nh ph\u1ea7n v\u00e0 ranh gi\u1edbi. C\u00e1c ki\u1ebfn tr\u00fac s\u01b0 duy tr\u00ec quy\u1ec1n ki\u1ec3m so\u00e1t \u0111\u1ea7y \u0111\u1ee7 \u0111\u1ed1i v\u1edbi m\u00e3 ngu\u1ed3n c\u01a1 s\u1edf, cho ph\u00e9p t\u00edch h\u1ee3p li\u1ec1n m\u1ea1ch v\u00e0o c\u00e1c kho l\u01b0u tr\u1eef Git ho\u1eb7c c\u00e1c h\u1ec7 th\u1ed1ng t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt doanh nghi\u1ec7p nh\u01b0 Visual Paradigm OpenDocs.<\/p>\n

\"Kh\u1edfi<\/p>\n

\u0110\u1ec3 t\u1ea1o m\u1ed9t s\u01a1 \u0111\u1ed3 C4, h\u00e3y nh\u1eadp ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng c\u1ee7a b\u1ea1n v\u00e0 bao g\u1ed3m lo\u1ea1i s\u01a1 \u0111\u1ed3 C4 b\u1ea1n mu\u1ed1n t\u1ea1o trong l\u1ec7nh nh\u1eafc c\u1ee7a m\u00ecnh.<\/p>\n

\"\u0110\u1ec3<\/p>\n

D\u01b0\u1edbi \u0111\u00e2y l\u00e0 s\u01a1 \u0111\u1ed3 Container C4 \u0111\u01b0\u1ee3c t\u1ea1o cho h\u1ec7 th\u1ed1ng \u0111\u1eb7t ph\u00f2ng kh\u00e1ch s\u1ea1n:<\/p>\n

\"Giao<\/p>\n

\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\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 
@startuml Hotel \r\n\r\ntitle H\u1ec7 th\u1ed1ng \u0110\u1eb7t ph\u00f2ng - S\u01a1 \u0111\u1ed3 Container\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\nskinparam vpDiagramType C4modelContainerDiagram\r\nskinparam linetype ortho\r\nskinparam defaultFontSize 14\r\nskinparam defaultFontColor #333333\r\n\r\nPerson(customer, \"Kh\u00e1ch h\u00e0ng\", \"M\u1ed9t kh\u00e1ch truy c\u1eadp t\u00ecm ki\u1ebfm, \u0111\u1eb7t v\u00e0 qu\u1ea3n l\u00fd \u0111\u1eb7t ph\u00f2ng kh\u00e1ch s\u1ea1n\")\r\nPerson(admin, \"Qu\u1ea3n tr\u1ecb vi\u00ean Kh\u00e1ch s\u1ea1n\", \"Nh\u00e2n vi\u00ean qu\u1ea3n l\u00fd ph\u00f2ng, h\u00e0ng t\u1ed3n kho, gi\u00e1 c\u1ea3 v\u00e0 \u0111\u1eb7t ph\u00f2ng\")\r\nSystem_Ext(paymentGateway, \"C\u1ed5ng thanh to\u00e1n\", \"D\u1ecbch v\u1ee5 b\u00ean ngo\u00e0i x\u1eed l\u00fd thanh to\u00e1n th\u1ebb\")\r\n\r\nContainer_Boundary(hotelSystem, \"H\u1ec7 th\u1ed1ng \u0110\u1eb7t ph\u00f2ng Kh\u00e1ch s\u1ea1n\") {\r\n    Container(webApp, \"\u1ee8ng d\u1ee5ng Web\", \"\u1ee8ng d\u1ee5ng trang \u0111\u01a1n React\", \"Cung c\u1ea5p giao di\u1ec7n \u0111\u1eb7t ph\u00f2ng d\u00e0nh cho kh\u00e1ch v\u00e0 b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n qu\u1ea3n tr\u1ecb\")\r\n    Container(mobileApp, \"\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng\", \"React Native\", \"Cung c\u1ea5p tr\u1ea3i nghi\u1ec7m \u0111\u1eb7t ph\u00f2ng di \u0111\u1ed9ng b\u1ea3n \u0111\u1ecba cho kh\u00e1ch h\u00e0ng\")\r\n    Container(api, \"API \u0110\u1eb7t ph\u00f2ng\", \"Java\/Spring Boot (REST)\", \"X\u1eed l\u00fd logic \u0111\u1eb7t ph\u00f2ng, ki\u1ec3m tra t\u00ecnh tr\u1ea1ng s\u1eb5n c\u00f3, gi\u00e1 c\u1ea3 v\u00e0 tr\u1ea1ng th\u00e1i \u0111\u1eb7t ph\u00f2ng\")\r\n    ContainerDb(db, \"C\u01a1 s\u1edf d\u1eef li\u1ec7u \u0110\u1eb7t ph\u00f2ng\", \"PostgreSQL\", \"L\u01b0u tr\u1eef ph\u00f2ng, gi\u00e1, h\u1ed3 s\u01a1 kh\u00e1ch v\u00e0 \u0111\u1eb7t ph\u00f2ng\")\r\n    ContainerQueue(queue, \"H\u00e0ng \u0111\u1ee3i Th\u00f4ng b\u00e1o\", \"Redis Pub\/Sub\", \"\u0110\u1ec7m c\u00e1c th\u00f4ng b\u00e1o b\u1ea5t \u0111\u1ed3ng b\u1ed9 cho vi\u1ec7c x\u00e1c nh\u1eadn v\u00e0 giao ti\u1ebfp th\u00f4ng b\u00e1o\")\r\n    Container(emailSvc, \"D\u1ecbch v\u1ee5 Th\u00f4ng b\u00e1o\", \"Node.js\", \"G\u1eedi x\u00e1c nh\u1eadn \u0111\u1eb7t ph\u00f2ng v\u00e0 l\u1eddi nh\u1eafc \u0111\u1ebfn kh\u00e1ch\")\r\n}\r\n\r\nRel(customer, webApp, \"\u0110\u1eb7t v\u00e0 qu\u1ea3n l\u00fd \u0111\u1eb7t ph\u00f2ng qua HTTPS\")\r\nRel(customer, mobileApp, \"\u0110\u1eb7t v\u00e0 qu\u1ea3n l\u00fd \u0111\u1eb7t ph\u00f2ng qua HTTPS\")\r\nRel(admin, webApp, \"Qu\u1ea3n l\u00fd ph\u00f2ng, gi\u00e1 c\u1ea3 v\u00e0 \u0111\u1eb7t ph\u00f2ng\")\r\nRel(webApp, api, \"S\u1eed d\u1ee5ng REST JSON\/HTTPS\", \"REST\")\r\nRel(mobileApp, api, \"S\u1eed d\u1ee5ng REST JSON\/HTTPS\", \"REST\")\r\nRel(api, db, \"\u0110\u1ecdc v\u00e0 ghi \u0111\u1eb7t ph\u00f2ng\", \"JDBC\")\r\nRel(api, queue, \"Xu\u1ea5t s\u1ef1 ki\u1ec7n x\u00e1c nh\u1eadn\", \"Pub\/Sub\")\r\nRel(queue, emailSvc, \"Ti\u00eau th\u1ee5 s\u1ef1 ki\u1ec7n th\u00f4ng b\u00e1o\", \"Pub\/Sub\")\r\nRel(emailSvc, customer, \"G\u1eedi email x\u00e1c nh\u1eadn\", \"SMTP\")\r\nRel(api, paymentGateway, \"G\u1eedi y\u00eau c\u1ea7u thanh to\u00e1n\", \"REST\/HTTPS\")\r\nRel(paymentGateway, customer, \"X\u00e1c th\u1ef1c v\u00e0 ho\u00e0n t\u1ea5t thanh to\u00e1n th\u1ebb\")\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle H\u1ec7 th\u1ed1ng \u0110\u1eb7t ph\u00f2ng Kh\u00e1ch s\u1ea1n - S\u01a1 \u0111\u1ed3 Container\r\n\r\n@enduml<\/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<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
T\u00e1i c\u1ea5u tr\u00fac M\u00f4 h\u00ecnh C4 v\u00e0 PlantUML th\u00f4ng qua S\u1eeda \u0111\u1ed5i AI<\/h2>\n
Khi c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m ph\u00e1t tri\u1ec3n, vi\u1ec7c c\u1eadp nh\u1eadt c\u00e1c b\u1ea3n v\u1ebd k\u1ef9 thu\u1eadt t\u1eebng d\u00f2ng c\u00f3 th\u1ec3 tr\u1edf n\u00ean nh\u00e0m ch\u00e1n. VPasCode ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t c\u00f4ng c\u1ee5 t\u01b0\u01a1ng t\u00e1cc\u00f4ng c\u1ee5 s\u1eeda \u0111\u1ed5i m\u00e3 AI<\/strong>, cho ph\u00e9p ng\u01b0\u1eddi t\u1ea1o truy\u1ec1n c\u00e1c h\u01b0\u1edbng d\u1eabn t\u00e1i c\u1ea5u tr\u00fac c\u00f3 m\u1ee5c ti\u00eau tr\u1ef1c ti\u1ebfp v\u00e0o tr\u00ecnh so\u1ea1n th\u1ea3o.<\/p>\n
\"\u0110\u1ec3<\/p>\n
Nh\u1eadp h\u01b0\u1edbng d\u1eabn c\u1ee7a b\u1ea1n. Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, ch\u00fang ta y\u00eau c\u1ea7u AI chia C\u01a1 s\u1edf d\u1eef li\u1ec7u \u0110\u1eb7t ph\u00f2ng th\u00e0nh hai ph\u1ea7n.<\/p>\n
\"H\u1ed9p<\/p>\n
C\u00e1c y\u00eau c\u1ea7u t\u00e1i c\u1ea5u tr\u00fac ki\u1ebfn tr\u00fac ph\u1ed5 bi\u1ebfn m\u00e0 n\u1ec1n t\u1ea3ng x\u1eed l\u00fd bao g\u1ed3m:<\/p>\n