{"id":498,"date":"2026-08-17T10:20:02","date_gmt":"2026-08-17T10:20:02","guid":{"rendered":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/"},"modified":"2026-08-17T10:20:02","modified_gmt":"2026-08-17T10:20:02","slug":"stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots","status":"publish","type":"post","link":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","title":{"rendered":"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI"},"content":{"rendered":"

V\u1ea5n \u0110\u1ec1 C\u1ee7a Ki\u1ebfn Tr\u00fac L\u1ea5y Giao Di\u1ec7n Ng\u01b0\u1eddi D\u00f9ng (GUI) L\u00e0m Trung T\u00e2m<\/h2>\n

Trong nhi\u1ec1u n\u0103m qua, m\u00f4 h\u00ecnh h\u00f3a C4 \u0111\u00e3 b\u1ecb m\u1eafc k\u1eb9t trong m\u1ed9t ngh\u1ecbch l\u00fd: ch\u00fang ta \u1ee7ng h\u1ed9 \u201cki\u1ebfn tr\u00fac d\u01b0\u1edbi d\u1ea1ng m\u00e3\u201d, nh\u01b0ng h\u1ea7u h\u1ebft c\u00e1c nh\u00f3m v\u1eabn x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 C4 c\u1ee7a h\u1ecd b\u1eb1ng c\u00e1ch k\u00e9o th\u1ea3 c\u00e1c h\u1ed9p trong giao di\u1ec7n \u0111\u1ed3 h\u1ecda. \u0110i\u1ec1u n\u00e0y d\u1eabn \u0111\u1ebfn t\u00e0i li\u1ec7u l\u1ed7i th\u1eddi, xung \u0111\u1ed9t h\u1ee3p nh\u1ea5t trong c\u00e1c t\u1ec7p nh\u1ecb ph\u00e2n v\u00e0 s\u1ef1 \u0111\u1ee9t g\u00e3y gi\u1eefa s\u01a1 \u0111\u1ed3 v\u00e0 h\u1ec7 th\u1ed1ng th\u1ef1c t\u1ebf.<\/p>\n

C\u00e1c nh\u00f3m ph\u00e1t tri\u1ec3n hi\u1ec7n \u0111\u1ea1i c\u1ea7n m\u1ed9t quy tr\u00ecnh l\u00e0m vi\u1ec7c n\u01a1icu\u1ed9c tr\u00f2 chuy\u1ec7n kh\u01a1i ngu\u1ed3n cho thi\u1ebft k\u1ebf<\/strong>v\u00e0m\u00e3 duy tr\u00ec n\u00f3<\/strong>. B\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p Visual ParadigmChatbot AI<\/strong>v\u1edbiVPasCode<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n t\u1eeb c\u00e1c l\u1ec7nh b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean sang m\u00e3 C4 PlantUML \u0111\u1ea1t chu\u1ea9n s\u1ea3n xu\u1ea5t ch\u1ec9 trong v\u00e0i ph\u00fat\u2014m\u00e0 kh\u00f4ng c\u1ea7n \u0111\u1ed9ng \u0111\u1ebfn chu\u1ed9t.<\/p>\n

\"Conversion-Driven<\/p>\n

H\u01b0\u1edbng d\u1eabn n\u00e0y minh h\u1ecda quy tr\u00ecnh \u0111\u00f3 th\u00f4ng qua c\u00e1c v\u00ed d\u1ee5 PlantUML c\u1ee5 th\u1ec3.<\/p>\n

\n

Giai \u0111o\u1ea1n 1: Thi\u1ebft k\u1ebf qua h\u1ed9i tho\u1ea1i v\u1edbi Chatbot AI<\/h2>\n

Chatbot AI trong Visual Paradigm \u0111\u00f3ng vai tr\u00f2 nh\u01b0 ng\u01b0\u1eddi \u0111\u1ed3ng h\u00e0nh ki\u1ebfn tr\u00fac c\u1ee7a b\u1ea1n. Thay v\u00ec b\u1eaft \u0111\u1ea7u v\u1edbi m\u1ed9t b\u1ea3ng tr\u1eafng, b\u1ea1n b\u1eaft \u0111\u1ea7u b\u1eb1ng \u00fd \u0111\u1ecbnh.<\/p>\n

\u2705 Chi\u1ebfn l\u01b0\u1ee3c \u0110\u1eb7t L\u1ec7nh Hi\u1ec7u Qu\u1ea3<\/h3>\n

\u0110\u1eebng y\u00eau c\u1ea7u AI \u201cv\u1ebd m\u1ed9t s\u01a1 \u0111\u1ed3.\u201d H\u00e3y y\u00eau c\u1ea7u n\u00f3m\u00f4 h\u00ecnh h\u00f3a m\u1ed9t h\u1ec7 th\u1ed1ng b\u1eb1ng ng\u1eef ngh\u0129a C4<\/strong>. H\u00e3y c\u1ee5 th\u1ec3 v\u1ec1 c\u00e1c ranh gi\u1edbi, c\u00f4ng ngh\u1ec7 v\u00e0 lu\u1ed3ng d\u1eef li\u1ec7u.<\/p>\n

\n

\ud83d\udcac V\u00ed d\u1ee5 v\u1ec1 L\u1ec7nh Chatbot AI:<\/strong>
\n\u201cH\u00e3y \u0111\u00f3ng vai m\u1ed9t ki\u1ebfn tr\u00fac s\u01b0 ph\u1ea7n m\u1ec1m. T\u1ea1o s\u01a1 \u0111\u1ed3 Container C4 cho m\u1ed9t \u2018H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn.\u2019 Bao g\u1ed3m \u1ee8ng d\u1ee5ng Web (React), \u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng (Flutter), C\u1ed5ng API (Kong), D\u1ecbch v\u1ee5 Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i (.NET) v\u00e0 C\u01a1 s\u1edf d\u1eef li\u1ec7u PostgreSQL. Minh h\u1ecda lu\u1ed3ng x\u00e1c th\u1ef1c qua OAuth2 v\u00e0 truy v\u1ea5n s\u1ed1 d\u01b0 t\u00e0i kho\u1ea3n. Xu\u1ea5t m\u00e3 C4-PlantUML h\u1ee3p l\u1ec7 s\u1eed d\u1ee5ng c\u00e1c macro ch\u00ednh th\u1ee9c.\u201d<\/p>\n<\/blockquote>\n

\ud83e\udd16 K\u1ebft Qu\u1ea3 AI D\u1ef1 Ki\u1ebfn (\u0110\u00e3 Tinh Ch\u1ec9nh)<\/h3>\n

AI s\u1ebd t\u1ea1o ra m\u1ed9t b\u1ea3n nh\u00e1p PlantUML \u0111\u1ea7u ti\u00ean. H\u00e3y xem x\u00e9t n\u00f3 m\u1ed9t c\u00e1ch ph\u00ea ph\u00e1n\u2014AI r\u1ea5t gi\u1ecfi v\u1ec1 c\u1ea5u tr\u00fac nh\u01b0ng c\u00f3 th\u1ec3 t\u1ea1o ra c\u00e1c m\u1ed1i quan h\u1ec7 gi\u1ea3. S\u1eed d\u1ee5ng c\u00e1c l\u1ec7nh tr\u00f2 chuy\u1ec7n ti\u1ebfp theo \u0111\u1ec3 tinh ch\u1ec9nh:\u201cTh\u00eam b\u1ed9 nh\u1edb \u0111\u1ec7m Redis gi\u1eefa C\u1ed5ng API v\u00e0 D\u1ecbch v\u1ee5 Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i \u0111\u1ec3 qu\u1ea3n l\u00fd phi\u00ean\u201d<\/em>ho\u1eb7c\u201c\u0110\u00e1nh d\u1ea5u c\u01a1 s\u1edf d\u1eef li\u1ec7u PostgreSQL l\u00e0 \u0111\u00e3 l\u1ed7i th\u1eddi v\u00e0 th\u00eam m\u1ed9t c\u1ee5m MongoDB m\u1edbi.\u201d<\/em><\/p>\n

\n

Giai \u0111o\u1ea1n 2: M\u00f4 h\u00ecnh h\u00f3a x\u00e1c \u0111\u1ecbnh v\u1edbi VPasCode & PlantUML<\/h2>\n

Khi AI t\u1ea1o ra m\u1ed9t b\u1ea3n nh\u00e1p kh\u1ea3 thi,d\u1eebng tr\u00f2 chuy\u1ec7n v\u00e0 b\u1eaft \u0111\u1ea7u vi\u1ebft m\u00e3<\/strong>. Sao ch\u00e9p m\u00e3 PlantUML \u0111\u00e3 tinh ch\u1ec9nh v\u00e0o m\u1ed9t.puml<\/code>t\u1ec7p \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi VPasCode. \u0110\u00e2y l\u00e0 ngu\u1ed3n s\u1ef1 th\u1eadt duy nh\u1ea5t c\u1ee7a b\u1ea1n.<\/p>\n

D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c v\u00ed d\u1ee5 C4 PlantUML s\u1eb5n s\u00e0ng cho s\u1ea3n xu\u1ea5t \u0111\u01b0\u1ee3c t\u1ea1o ra th\u00f4ng qua quy tr\u00ecnh n\u00e0y. H\u00e3y \u0111\u1ea3m b\u1ea3o d\u1ef1 \u00e1n Visual Paradigm c\u1ee7a b\u1ea1n bao g\u1ed3m th\u01b0 vi\u1ec7nC4-PlantUML<\/a>.<\/p>\n

V\u00ed d\u1ee5 1: S\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng (M\u1ee9c 1)<\/h3>\n

\u0110i\u1ec1u n\u00e0y x\u00e1c \u0111\u1ecbnh ranh gi\u1edbi c\u1ee7a h\u1ec7 th\u1ed1ng c\u1ee7a b\u1ea1n v\u00e0 c\u00e1c t\u00e1c nh\u00e2n b\u00ean ngo\u00e0i.<\/p>\n

<\/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 
@startuml OnlineBanking_Context\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\ntitle Ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng: N\u1ec1n t\u1ea3ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\r\n\r\nPerson(customer, \"Kh\u00e1ch h\u00e0ng Ng\u00e2n h\u00e0ng\", \"Xem t\u00e0i kho\u1ea3n, chuy\u1ec3n ti\u1ec1n, thanh to\u00e1n h\u00f3a \u0111\u01a1n\")\r\nPerson(admin, \"Qu\u1ea3n tr\u1ecb vi\u00ean V\u0103n ph\u00f2ng H\u1eadu c\u1ea7n\", \"Qu\u1ea3n l\u00fd ng\u01b0\u1eddi d\u00f9ng, theo d\u00f5i giao d\u1ecbch\")\r\n\r\nSystem(banking, \"N\u1ec1n t\u1ea3ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\", \"Cung c\u1ea5p d\u1ecbch v\u1ee5 ng\u00e2n h\u00e0ng qua internet qua web v\u00e0 di \u0111\u1ed9ng\")\r\n\r\nSystem_Ext(coreLegacy, \"M\u00e1y ch\u1ee7 ch\u00ednh Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i\", \"X\u1eed l\u00fd giao d\u1ecbch, l\u01b0u s\u1ed5 c\u00e1i ch\u00ednh\")\r\nSystem_Ext(email, \"D\u1ecbch v\u1ee5 Email\", \"G\u1eedi th\u00f4ng b\u00e1o v\u00e0 sao k\u00ea\")\r\nSystem_Ext(oauth, \"Nh\u00e0 cung c\u1ea5p OAuth2\", \"X\u1eed l\u00fd danh t\u00ednh v\u00e0 x\u00e1c th\u1ef1c\")\r\n\r\nRel(customer, banking, \"S\u1eed d\u1ee5ng\", \"HTTPS\/WebSocket\")\r\nRel(admin, banking, \"Qu\u1ea3n l\u00fd\", \"HTTPS\")\r\nRel(banking, coreLegacy, \"\u0110\u1ecdc\/Ghi\", \"REST\/SOAP\")\r\nRel(banking, email, \"G\u1eedi c\u1ea3nh b\u00e1o\", \"SMTP\/API\")\r\nRel(banking, oauth, \"X\u00e1c th\u1ef1c\", \"OIDC\")\r\n\r\n@enduml\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
V\u00ed d\u1ee5 2: S\u01a1 \u0111\u1ed3 container (M\u1ee9c 2)<\/h3>\n
Ph\u00e2n r\u00e3 h\u1ec7 th\u1ed1ng th\u00e0nh c\u00e1c container th\u1eddi gian ch\u1ea1y. L\u01b0u \u00fd vi\u1ec7c s\u1eed d\u1ee5ngContainerDb<\/code>,\u00a0ContainerQueue<\/code>v\u00e0 c\u00e1c th\u1ebb c\u00f4ng ngh\u1ec7\u2014y\u1ebfu t\u1ed1 then ch\u1ed1t \u0111\u1ed1i v\u1edbi c\u00e1c h\u1ec7 th\u1ed1ng hi\u1ec7n \u0111\u1ea1i d\u1ef1a tr\u00ean \u0111\u00e1m m\u00e2y.<\/p>\n
<\/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                    
@startuml OnlineBanking_Containers\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n\r\ntitle S\u01a1 \u0111\u1ed3 Container: N\u1ec1n t\u1ea3ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\r\n\r\nPerson(customer, \"Kh\u00e1ch h\u00e0ng Ng\u00e2n h\u00e0ng\")\r\n\r\nSystem_Boundary(banking, \"N\u1ec1n t\u1ea3ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\") {\r\n    Container(webapp, \"\u1ee8ng d\u1ee5ng Web\", \"React + Node.js\", \"SPA cho ng\u00e2n h\u00e0ng qua tr\u00ecnh duy\u1ec7t\")\r\n    Container(mobile, \"\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng\", \"Flutter\", \"Tr\u1ea3i nghi\u1ec7m g\u1ed1c iOS\/Android\")\r\n    Container(api, \"API Gateway\", \"Kong\", \"\u0110\u1ecbnh tuy\u1ebfn y\u00eau c\u1ea7u, gi\u1edbi h\u1ea1n t\u1ed1c \u0111\u1ed9, x\u00e1c th\u1ef1c\")\r\n    Container(service, \"D\u1ecbch v\u1ee5 T\u00e0i kho\u1ea3n\", \".NET 8\", \"Logic nghi\u1ec7p v\u1ee5 cho t\u00e0i kho\u1ea3n v\u00e0 s\u1ed1 d\u01b0\")\r\n    Container(cache, \"B\u1ed9 nh\u1edb \u0111\u1ec7m Phi\u00ean\", \"Redis\", \"L\u01b0u tr\u1eef m\u00e3 th\u00f4ng b\u00e1o JWT & tr\u1ea1ng th\u00e1i phi\u00ean\")\r\n    ContainerDb(db, \"C\u01a1 s\u1edf d\u1eef li\u1ec7u T\u00e0i kho\u1ea3n\", \"PostgreSQL\", \"T\u00e0i kho\u1ea3n kh\u00e1ch h\u00e0ng, s\u1ed1 d\u01b0, giao d\u1ecbch\")\r\n    ContainerQueue(events, \"Bus S\u1ef1 ki\u1ec7n\", \"RabbitMQ\", \"Th\u00f4ng b\u00e1o giao d\u1ecbch b\u1ea5t \u0111\u1ed3ng b\u1ed9\")\r\n}\r\n\r\nSystem_Ext(oauth, \"Nh\u00e0 cung c\u1ea5p OAuth2\")\r\nSystem_Ext(legacy, \"M\u00e1y ch\u1ee7 ch\u00ednh Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i\")\r\n\r\nRel(customer, webapp, \"S\u1eed d\u1ee5ng\", \"HTTPS\")\r\nRel(customer, mobile, \"S\u1eed d\u1ee5ng\", \"HTTPS\")\r\nRel(webapp, api, \"G\u1ecdi\", \"REST\/JSON\")\r\nRel(mobile, api, \"G\u1ecdi\", \"REST\/JSON\")\r\nRel(api, oauth, \"X\u00e1c th\u1ef1c m\u00e3 th\u00f4ng b\u00e1o\", \"OIDC\")\r\nRel(api, service, \"\u0110\u1ecbnh tuy\u1ebfn \u0111\u1ebfn\", \"gRPC\")\r\nRel(service, cache, \"\u0110\u1ecdc\/Ghi phi\u00ean\", \"TCP\")\r\nRel(service, db, \"Truy v\u1ea5n\", \"SQL\/TCP\")\r\nRel(service, events, \"Xu\u1ea5t b\u1ea3n\", \"AMQP\")\r\nRel(service, legacy, \"\u0110\u1ed3ng b\u1ed9 h\u00f3a s\u1ed5 c\u00e1i\", \"SOAP\")\r\n\r\n@enduml\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
V\u00ed d\u1ee5 3: S\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n (M\u1ee9c 3) \u2013 D\u1ecbch v\u1ee5 T\u00e0i kho\u1ea3n<\/h3>\n
Ph\u00f3ng to v\u00e0o m\u1ed9t container duy nh\u1ea5t. \u0110\u00e2y l\u00e0 n\u01a1i VPasCode t\u1ecfa s\u00e1ng: c\u00e1c th\u00e0nh ph\u1ea7n \u00e1nh x\u1ea1 tr\u1ef1c ti\u1ebfp v\u00e0o c\u00e1c m\u00f4-\u0111un m\u00e3.<\/p>\n
<\/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                    
@startuml AccountService_Components\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\ntitle S\u01a1 \u0111\u1ed3 Th\u00e0nh ph\u1ea7n: D\u1ecbch v\u1ee5 T\u00e0i kho\u1ea3n (.NET 8)\r\n\r\nContainer(api, \"API Gateway\", \"Kong\")\r\nContainerDb(db, \"C\u01a1 s\u1edf d\u1eef li\u1ec7u T\u00e0i kho\u1ea3n\", \"PostgreSQL\")\r\nContainerQueue(events, \"Bus S\u1ef1 ki\u1ec7n\", \"RabbitMQ\")\r\n\r\nComponent(auth, \"Middleware X\u00e1c th\u1ef1c\", \"B\u1ed9 l\u1ecdc ASP.NET\", \"X\u00e1c th\u1ef1c JWT, tr\u00edch xu\u1ea5t ng\u1eef c\u1ea3nh ng\u01b0\u1eddi d\u00f9ng\")\r\nComponent(controller, \"AccountController\", \"API ASP.NET\", \"\u0110i\u1ec3m cu\u1ed1i REST cho \/accounts\")\r\nComponent(domain, \"AccountDomainService\", \"Th\u01b0 vi\u1ec7n L\u1edbp C#\", \"T\u00ednh to\u00e1n s\u1ed1 d\u01b0, quy t\u1eafc chuy\u1ec3n ti\u1ec1n\")\r\nComponent(repo, \"AccountRepository\", \"EF Core\", \"Truy c\u1eadp d\u1eef li\u1ec7u, t\u1ed1i \u01b0u h\u00f3a truy v\u1ea5n\")\r\nComponent(publisher, \"EventPublisher\", \"MassTransit\", \"Xu\u1ea5t b\u1ea3n s\u1ef1 ki\u1ec7n TransactionCompleted\")\r\n\r\nRel(api, auth, \"Chuy\u1ec3n y\u00eau c\u1ea7u\")\r\nRel(auth, controller, \"Chuy\u1ec3n ti\u1ebfp y\u00eau c\u1ea7u \u0111\u00e3 x\u00e1c th\u1ef1c\")\r\nRel(controller, domain, \"K\u00eau g\u1ecdi logic nghi\u1ec7p v\u1ee5\")\r\nRel(domain, repo, \"Truy v\u1ea5n\/L\u01b0u tr\u1eef\")\r\nRel(repo, db, \"Th\u1ef1c thi SQL\")\r\nRel(domain, publisher, \"Ph\u00e1t ra s\u1ef1 ki\u1ec7n mi\u1ec1n\")\r\nRel(publisher, events, \"Xu\u1ea5t b\u1ea3n\", \"AMQP\")\r\n\r\n@enduml\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
\n
Giai \u0111o\u1ea1n 3: T\u00edch h\u1ee3p VPasCode v\u00e0o quy tr\u00ecnh ph\u00e1t tri\u1ec3n c\u1ee7a b\u1ea1n<\/h2>\n
Vi\u1ec7c t\u1ea1o PlantUML ch\u1ec9 l\u00e0 m\u1ed9t n\u1eeda cu\u1ed9c chi\u1ebfn. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch \u0111\u1ec3 n\u00f3 th\u1ef1c s\u1ef1 hi\u1ec7u qu\u1ea3 trong m\u1ed9t \u0111\u1ed9i ng\u0169 hi\u1ec7n \u0111\u1ea1i:<\/p>\n
Ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n m\u1ecdi th\u1ee9<\/h3>\n
L\u01b0u t\u1ea5t c\u1ea3 .puml<\/code> c\u00e1c t\u1ec7p b\u00ean c\u1ea1nh m\u00e3 \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n trong c\u00f9ng m\u1ed9t kho l\u01b0u tr\u1eef. H\u00e3y coi c\u00e1c s\u01a1 \u0111\u1ed3 nh\u01b0 c\u01a1 s\u1edf h\u1ea1 d\u1ea1ng m\u00e3:<\/p>\n
\/docs\/architecture\/c4\/\r\n\u251c\u2500\u2500 01-context.puml\r\n\u251c\u2500\u2500 02-containers.puml\r\n\u251c\u2500\u2500 03-account-service-components.puml\r\n\u2514\u2500\u2500 README.md\r\n<\/code><\/pre>\n
T\u1ef1 \u0111\u1ed9ng h\u00f3a qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb trong CI\/CD<\/h3>\n
S\u1eed d\u1ee5ng CLI c\u1ee7a Visual Paradigm ho\u1eb7c m\u1ed9t GitHub Action \u0111\u1ec3 hi\u1ec3n th\u1ecb PNG\/SVG trong m\u1ed7i PR. Kh\u00f4ng bao gi\u1edd t\u1ef1 \u0111\u1ed9ng cam k\u1ebft c\u00e1c h\u00ecnh \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb th\u1ee7 c\u00f4ng.<\/p>\n
\n
\nYAML<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda YAML trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    YAML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit YAML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
# \u0110o\u1ea1n m\u00e3 v\u00ed d\u1ee5 cho GitHub Action\r\n- name: Hi\u1ec3n th\u1ecb s\u01a1 \u0111\u1ed3 C4\r\n  run: |\r\n    vp-cli render -i docs\/architecture\/c4\/*.puml \r\n                  -o docs\/architecture\/output\/ \r\n                  -f svg --c4-layout auto\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit YAML 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 YAML trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u0110\u1ed3ng b\u1ed9 h\u00f3a hai chi\u1ec1u v\u1edbi VPasCode<\/h3>\n
VPasCode kh\u00f4ng ch\u1ec9 l\u00e0 c\u00f4ng c\u1ee5 hi\u1ec3n th\u1ecb\u2014n\u00f3 l\u00e0 m\u1ed9t \u0111\u1ed9ng c\u01a1 \u0111\u1ed3ng b\u1ed9 h\u00f3a m\u00f4 h\u00ecnh<\/strong>. Khi b\u1ea1n c\u1eadp nh\u1eadt PlantUML:<\/p>\n
    \n
  • \n
    M\u00f4 h\u00ecnh trung t\u00e2m c\u1ee7a Visual Paradigm s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt t\u1ef1 \u0111\u1ed9ng<\/p>\n<\/li>\n
  • \n
    C\u00e1c li\u00ean k\u1ebft ch\u00e9o (v\u00ed d\u1ee5: li\u00ean k\u1ebft m\u1ed9t Component v\u1edbi m\u1ed9t Jira epic ho\u1eb7c m\u1ed9t kho Git) v\u1eabn \u0111\u01b0\u1ee3c gi\u1eef nguy\u00ean<\/p>\n<\/li>\n
  • \n
    C\u00e1c th\u00e0nh vi\u00ean trong nh\u00f3m s\u1eed d\u1ee5ng giao di\u1ec7n \u0111\u1ed3 h\u1ecda s\u1ebd th\u1ea5y c\u00e1c thay \u0111\u1ed5i \u0111\u01b0\u1ee3c ph\u1ea3n \u00e1nh theo th\u1eddi gian th\u1ef1c<\/p>\n<\/li>\n
  • \n
    C\u00e1c cu\u1ed9c tr\u00f2 chuy\u1ec7n c\u1ee7a Chatbot AI c\u00f3 th\u1ec3 tham chi\u1ebfu \u0111\u1ebfn tr\u1ea1ng th\u00e1i hi\u1ec7n t\u1ea1i<\/em> c\u1ee7a m\u00f4 h\u00ecnh, kh\u00f4ng ph\u1ea3i m\u1ed9t b\u1ea3n sao l\u01b0u c\u0169<\/p>\n<\/li>\n<\/ul>\n
    \n
    \u26a0\ufe0f\u00a0C\u1ea3nh b\u00e1o quan tr\u1ecdng:<\/strong> Kh\u00f4ng bao gi\u1edd \u0111\u1ec3 PlantUML do AI t\u1ea1o ra v\u01b0\u1ee3t qua qu\u00e1 tr\u00ecnh ki\u1ec3m tra c\u1ee7a con ng\u01b0\u1eddi. AI th\u01b0\u1eddng xuy\u00ean ph\u00e1t minh ra c\u00e1c API kh\u00f4ng t\u1ed3n t\u1ea1i, g\u00e1n nh\u00e3n sai cho c\u00e1c giao th\u1ee9c ho\u1eb7c b\u1ecf s\u00f3t c\u00e1c ranh gi\u1edbi b\u1ea3o m\u1eadt quan tr\u1ecdng. Lu\u00f4n x\u00e1c minh m\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o ra so v\u1edbi c\u01a1 s\u1edf m\u00e3 th\u1ef1c t\u1ebf v\u00e0 m\u00f4 h\u00ecnh m\u1ed1i \u0111e d\u1ecda c\u1ee7a b\u1ea1n tr\u01b0\u1edbc khi cam k\u1ebft.<\/p>\n<\/blockquote>\n
    \n
    Danh s\u00e1ch ki\u1ec3m tra tri\u1ec3n khai cho c\u00e1c nh\u00f3m hi\u1ec7n \u0111\u1ea1i<\/h2>\n\n\n\n\n\n\n\n\n\n\n
    B\u01b0\u1edbc<\/th>\nH\u00e0nh \u0111\u1ed9ng<\/th>\nC\u00f4ng c\u1ee5<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\nKh\u1edfi t\u1ea1o m\u00f4 h\u00ecnh C4 ban \u0111\u1ea7u th\u00f4ng qua c\u00e1c c\u00e2u h\u1ecfi h\u1ed9i tho\u1ea1i<\/td>\nChatbot AI<\/td>\n<\/tr>\n
    2<\/td>\nTinh ch\u1ec9nh v\u00e0 s\u1eeda l\u1ed7i \u0111\u1ea7u ra c\u1ee7a AI th\u00f4ng qua tr\u00f2 chuy\u1ec7n l\u1eb7p l\u1ea1i<\/td>\nTr\u1ee3 l\u00fd \u1ea3o AI<\/td>\n<\/tr>\n
    3<\/td>\nXu\u1ea5t PlantUML \u0111\u00e3 \u0111\u01b0\u1ee3c x\u00e1c th\u1ef1c v\u00e0o kho l\u01b0u tr\u1eef c\u00f3 ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n<\/td>\nVPasCode<\/td>\n<\/tr>\n
    4<\/td>\nThi\u1ebft l\u1eadp quy tr\u00ecnh CI \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng hi\u1ec3n th\u1ecb khi c\u00f3 PR<\/td>\nCLI VPasCode<\/td>\n<\/tr>\n
    5<\/td>\nLi\u00ean k\u1ebft c\u00e1c th\u00e0nh ph\u1ea7n C4 v\u1edbi kho l\u01b0u tr\u1eef m\u00e3, phi\u1ebfu c\u00f4ng vi\u1ec7c v\u00e0 t\u00e0i li\u1ec7u<\/td>\nVisual Paradigm<\/td>\n<\/tr>\n
    6<\/td>\nL\u00ean l\u1ecbch \u0111\u00e1nh gi\u00e1 \u201cv\u1ec7 sinh m\u00f4 h\u00ecnh\u201d h\u00e0ng qu\u00fd b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng ph\u00ea b\u00ecnh c\u1ee7a AI<\/td>\nTr\u1ee3 l\u00fd \u1ea3o AI<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Suy ngh\u0129 cu\u1ed1i c\u00f9ng<\/h2>\n
    M\u00f4 h\u00ecnh h\u00f3a C4 kh\u00f4ng n\u00ean l\u00e0 g\u00e1nh n\u1eb7ng \u0111\u1ed1i v\u1edbi t\u1ed1c \u0111\u1ed9 c\u1ee7a \u0111\u1ed9i b\u1ea1n. B\u1eb1ng c\u00e1ch coi AI l\u00e0 tia l\u1eeda s\u00e1ng t\u1ea1o<\/strong> v\u00e0 VPasCode l\u00e0 neo x\u00e1c \u0111\u1ecbnh<\/strong>, b\u1ea1n s\u1ebd c\u00f3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u t\u1ed1t nh\u1ea5t t\u1eeb c\u1ea3 hai th\u1ebf gi\u1edbi: kh\u00e1m ph\u00e1 nhanh ch\u00f3ng v\u00e0<\/em>t\u00e0i li\u1ec7u b\u1ec1n v\u1eefng. D\u1eebng vi\u1ec7c k\u00e9o th\u1ea3 c\u00e1c h\u1ed9p. H\u00e3y b\u1eaft \u0111\u1ea7u ki\u1ebfn tr\u00fac h\u00f3a v\u1edbi t\u1ed1c \u0111\u1ed9 c\u1ee7a cu\u1ed9c tr\u00f2 chuy\u1ec7n.<\/p>\n","protected":false},"excerpt":{"rendered":"
    V\u1ea5n \u0110\u1ec1 C\u1ee7a Ki\u1ebfn Tr\u00fac L\u1ea5y Giao Di\u1ec7n Ng\u01b0\u1eddi D\u00f9ng (GUI) L\u00e0m Trung T\u00e2m Trong nhi\u1ec1u n\u0103m qua, m\u00f4 h\u00ecnh h\u00f3a C4 \u0111\u00e3 b\u1ecb m\u1eafc k\u1eb9t trong m\u1ed9t ngh\u1ecbch l\u00fd:…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","inline_featured_image":false,"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[24,12,22],"tags":[],"asset-category":[],"class_list":["post-498","post","type-post","status-publish","format-standard","hentry","category-ai-chatbot","category-c4-model","category-vsascode"],"source_url":"","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"\nD\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI - AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News<\/title>\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.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI - AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News\" \/>\n<meta property=\"og:description\" content=\"V\u1ea5n \u0110\u1ec1 C\u1ee7a Ki\u1ebfn Tr\u00fac L\u1ea5y Giao Di\u1ec7n Ng\u01b0\u1eddi D\u00f9ng (GUI) L\u00e0m Trung T\u00e2m Trong nhi\u1ec1u n\u0103m qua, m\u00f4 h\u00ecnh h\u00f3a C4 \u0111\u00e3 b\u1ecb m\u1eafc k\u1eb9t trong m\u1ed9t ngh\u1ecbch l\u00fd:…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\" \/>\n<meta property=\"og:site_name\" content=\"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-17T10:20:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1\"},\"headline\":\"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI\",\"datePublished\":\"2026-08-17T10:20:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\"},\"wordCount\":1745,\"publisher\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png\",\"articleSection\":[\"AI Chatbot\",\"C4 Model\",\"VSasCode\"],\"inLanguage\":\"vi\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\",\"url\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\",\"name\":\"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI - AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News\",\"isPartOf\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png\",\"datePublished\":\"2026-08-17T10:20:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage\",\"url\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png\",\"contentUrl\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ai-diagrams.com\/vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#website\",\"url\":\"https:\/\/www.ai-diagrams.com\/vn\/\",\"name\":\"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ai-diagrams.com\/vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#organization\",\"name\":\"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News\",\"url\":\"https:\/\/www.ai-diagrams.com\/vn\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ai-diagrams.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/ai-diagram-logo.png\",\"contentUrl\":\"https:\/\/www.ai-diagrams.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/ai-diagram-logo.png\",\"width\":648,\"height\":648,\"caption\":\"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News\"},\"image\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.ai-diagrams.com\/vn\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI - AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News","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.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","og_locale":"vi_VN","og_type":"article","og_title":"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI - AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News","og_description":"V\u1ea5n \u0110\u1ec1 C\u1ee7a Ki\u1ebfn Tr\u00fac L\u1ea5y Giao Di\u1ec7n Ng\u01b0\u1eddi D\u00f9ng (GUI) L\u00e0m Trung T\u00e2m Trong nhi\u1ec1u n\u0103m qua, m\u00f4 h\u00ecnh h\u00f3a C4 \u0111\u00e3 b\u1ecb m\u1eafc k\u1eb9t trong m\u1ed9t ngh\u1ecbch l\u00fd:…","og_url":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","og_site_name":"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News","article_published_time":"2026-08-17T10:20:02+00:00","og_image":[{"url":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png","type":"","width":"","height":""}],"author":"curtis","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":false,"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"4 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#article","isPartOf":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/"},"author":{"name":"curtis","@id":"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1"},"headline":"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI","datePublished":"2026-08-17T10:20:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/"},"wordCount":1745,"publisher":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/#organization"},"image":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png","articleSection":["AI Chatbot","C4 Model","VSasCode"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","url":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/","name":"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI - AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News","isPartOf":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage"},"image":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png","datePublished":"2026-08-17T10:20:02+00:00","breadcrumb":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#primaryimage","url":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png","contentUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/08\/img_6a82e01435401.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ai-diagrams.com\/vn\/stop-dragging-boxes-generating-c4-diagrams-via-vpascode-and-ai-chatbots\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ai-diagrams.com\/vn\/"},{"@type":"ListItem","position":2,"name":"D\u1eebng K\u00e9o C\u00e1c H\u1ed9p: T\u1ea1o S\u01a1 \u0110\u1ed3 C4 Th\u00f4ng Qua VPasCode v\u00e0 Chatbot AI"}]},{"@type":"WebSite","@id":"https:\/\/www.ai-diagrams.com\/vn\/#website","url":"https:\/\/www.ai-diagrams.com\/vn\/","name":"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News","description":"","publisher":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ai-diagrams.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.ai-diagrams.com\/vn\/#organization","name":"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News","url":"https:\/\/www.ai-diagrams.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.ai-diagrams.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/ai-diagram-logo.png","contentUrl":"https:\/\/www.ai-diagrams.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/ai-diagram-logo.png","width":648,"height":648,"caption":"AI Diagrams Ti\u1ebfng Vi\u1ec7t\u2013 Explore Artificial Intelligence Trends & News"},"image":{"@id":"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1","name":"curtis","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.ai-diagrams.com\/vn\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.ai-diagrams.com\/vn\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":0,"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/tags?post=498"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/vn\/wp-json\/wp\/v2\/asset-category?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}