{"id":12281,"date":"2026-10-13T15:47:48","date_gmt":"2026-10-13T07:47:48","guid":{"rendered":"https:\/\/www.cybermedian.com\/vn\/diagram-as-code-uml-sequence-diagrams-with-plantuml-and-vpascode\/"},"modified":"2026-10-14T13:08:38","modified_gmt":"2026-10-14T05:08:38","slug":"diagram-as-code-uml-sequence-diagrams-with-plantuml-and-vpascode","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/vn\/diagram-as-code-uml-sequence-diagrams-with-plantuml-and-vpascode\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3: Bi\u1ec3u \u0111\u1ed3 tr\u00ecnh t\u1ef1 UML v\u1edbi PlantUML v\u00e0 VPasCode"},"content":{"rendered":"

M\u1ed9t UML<\/a> bi\u1ec3u \u0111\u1ed3 tr\u00ecnh t\u1ef1<\/a> cho th\u1ea5y c\u00e1ch c\u00e1c th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng t\u00e1c theo th\u1eddi gian. N\u00f3 h\u1eefu \u00edch \u0111\u1ec3 t\u00e0i li\u1ec7u h\u00f3a m\u1ed9t k\u1ecbch b\u1ea3n s\u1eed d\u1ee5ng<\/a>, lu\u1ed3ng API, quy tr\u00ecnh kinh doanh ho\u1eb7c k\u1ecbch b\u1ea3n h\u1ec7 th\u1ed1ng. Th\u1eddi gian th\u01b0\u1eddng di chuy\u1ec3n t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi; v\u1ecb tr\u00ed ngang cho bi\u1ebft ai tham gia, ch\u1ee9 kh\u00f4ng ph\u1ea3i l\u00e0 ph\u00e9p \u0111o ch\u00ednh x\u00e1c v\u1ec1 th\u1eddi gian tr\u00f4i qua.<\/p>\n

PlantUML<\/a> cho ph\u00e9p b\u1ea1n m\u00f4 t\u1ea3 bi\u1ec3u \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng v\u0103n b\u1ea3n. Tr\u00ecnh ch\u1ec9nh s\u1eeda VPasCode c\u1ee7a Visual Paradigm<\/a> k\u1ebft h\u1ee3p tr\u00ecnh ch\u1ec9nh m\u00e3 v\u1edbi b\u1ea3n xem tr\u01b0\u1edbc tr\u1ef1c ti\u1ebfp v\u00e0 h\u1ed7 tr\u1ee3 AI \u0111\u1ec3 t\u1ea1o, s\u1eeda \u0111\u1ed5i v\u00e0 s\u1eeda m\u00e3 bi\u1ec3u \u0111\u1ed3. M\u1ed9t quy tr\u00ecnh l\u00e0m vi\u1ec7c t\u1ed1t l\u00e0 s\u1eed d\u1ee5ng AI \u0111\u1ec3 c\u00f3 b\u1ea3n nh\u00e1p \u0111\u1ea7u ti\u00ean, sau \u0111\u00f3 t\u1ef1 ki\u1ec3m tra v\u00e0 tinh ch\u1ec9nh m\u00e3 PlantUML.<\/p>\n

\"S\u01a1<\/p>\n

1. C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n<\/h2>\n

M\u1ed9t bi\u1ec3u \u0111\u1ed3 tr\u00ecnh t\u1ef1 PlantUML<\/a> b\u1eaft \u0111\u1ea7u b\u1eb1ng @startuml<\/code> v\u00e0 k\u1ebft th\u00fac b\u1eb1ng @enduml<\/code>. C\u00e1c th\u00e0nh ph\u1ea7n th\u01b0\u1eddng \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea tr\u01b0\u1edbc c\u00e1c th\u00f4ng \u0111i\u1ec7p \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t t\u00ean v\u00e0 th\u1ee9 t\u1ef1 c\u1ee7a ch\u00fang.<\/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\r\nactor Customer\r\nparticipant Browser\r\nparticipant \"Order API\" as API\r\ndatabase \"Order DB\" as DB\r\n\r\nCustomer -> Browser: Place order\r\nBrowser -> API: POST \/orders\r\nAPI -> DB: Save order\r\nDB --> API: Order ID\r\nAPI --> Browser: 201 Created\r\nBrowser --> Customer: Show confirmation\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<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Nh\u00e3n hi\u1ec3n th\u1ecb c\u1ee7a ng\u01b0\u1eddi tham gia c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c k\u00e9p, v\u1edbi as<\/code> \u0111\u1ec3 cung c\u1ea5p m\u1ed9t bi\u1ec7t danh ng\u1eafn g\u1ecdn h\u01a1n \u0111\u1ec3 s\u1eed d\u1ee5ng trong c\u00e1c th\u00f4ng b\u00e1o. C\u00e1c t\u1eeb kh\u00f3a ng\u01b0\u1eddi tham gia ph\u1ed5 bi\u1ebfn bao g\u1ed3m actor<\/code>, participant<\/code>, boundary<\/code>, control<\/code>, entity<\/code>, database<\/code>, v\u00e0 t\u1eadp h\u1ee3p<\/code>. H\u00e3y s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a truy\u1ec1n \u0111\u1ea1t t\u1ed1t nh\u1ea5t vai tr\u00f2 c\u1ee7a ng\u01b0\u1eddi tham gia; n\u00f3 kh\u00f4ng \u00e9p bu\u1ed9c m\u1ed9t ki\u1ebfn tr\u00fac c\u1ee5 th\u1ec3 n\u00e0o.<\/p>\n
2. \u0110\u1ecdc tin nh\u1eafn v\u00e0 th\u1eddi gian<\/h2>\n
M\u1ed7i tin nh\u1eafn \u0111\u01b0\u1ee3c vi\u1ebft d\u01b0\u1edbi d\u1ea1ng ng\u01b0\u1eddi g\u1eedi, m\u1ed9t m\u0169i t\u00ean, ng\u01b0\u1eddi nh\u1eadn v\u00e0 m\u1ed9t nh\u00e3n. Th\u1ee9 t\u1ef1 c\u1ee7a c\u00e1c d\u00f2ng tin nh\u1eafn x\u00e1c \u0111\u1ecbnh th\u1ee9 t\u1ef1 d\u1ecdc c\u1ee7a ch\u00fang trong s\u01a1 \u0111\u1ed3.<\/p>\n
\"S\u01a1<\/p>\n