{"id":12225,"date":"2026-08-03T14:46:11","date_gmt":"2026-08-03T06:46:11","guid":{"rendered":"https:\/\/www.cybermedian.com\/vn\/diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot\/"},"modified":"2026-09-03T22:38:44","modified_gmt":"2026-09-03T14:38:44","slug":"diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/vn\/diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot\/","title":{"rendered":"\ud83d\udcd8Case Study v\u1ec1 V\u1ebd Bi\u1ec3u \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi Mermaid: T\u0103ng t\u1ed1c M\u00f4 h\u00ecnh h\u00f3a UML v\u1edbi Tr\u1ee3 l\u00fd AI Visual Paradigm"},"content":{"rendered":"

1. Gi\u1edbi thi\u1ec7u & Ph\u00e1t bi\u1ec3u V\u1ea5n \u0111\u1ec1<\/h2>\n

Ph\u01b0\u01a1ng ph\u00e1p truy\u1ec1n th\u1ed1ng m\u00f4 h\u00ecnh h\u00f3a UML<\/a>c\u00f3 s\u1ee9c m\u1ea1nh nh\u01b0ng l\u1ea1i ch\u1eadm. C\u00e1c nh\u00e0 thi\u1ebft k\u1ebf d\u00e0nh h\u00e0ng gi\u1edd \u0111\u1ec3 v\u1eadt l\u1ed9n v\u1edbi c\u00fa ph\u00e1p, ghi nh\u1edb c\u00e1c k\u00fd hi\u1ec7u \u0111\u1eb7c th\u00f9 cho t\u1eebng lo\u1ea1i bi\u1ec3u \u0111\u1ed3 v\u00e0 th\u1ee7 c\u00f4ng chuy\u1ec3n \u0111\u1ed5i \u00fd t\u01b0\u1edfng b\u1eb1ng l\u1eddi th\u00e0nh m\u1ed9t m\u00f4 h\u00ecnh ch\u00ednh x\u00e1c, kh\u00f4ng l\u1ed7i. Trong c\u00e1c nh\u00f3m ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m ho\u1ea1t \u0111\u1ed9ng v\u1edbi t\u1ed1c \u0111\u1ed9 cao, s\u1ef1 c\u1ea3n tr\u1edf n\u00e0y l\u00e0m ch\u1eadm qu\u00e1 tr\u00ecnh xem x\u00e9t thi\u1ebft k\u1ebf v\u00e0 khi\u1ebfn nh\u1eefng ng\u01b0\u1eddi kh\u00f4ng ph\u1ea3i k\u1ef9 s\u01b0 ng\u1ea1i tham gia.<\/p>\n

\"Visual<\/p>\n

Tr\u1ee3 l\u00fd AI Visual Paradigm<\/a><\/strong> gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng c\u00e1ch cho ph\u00e9p b\u1ea1n m\u00f4 t\u1ea3 h\u1ec7 th\u1ed1ng b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean v\u00e0 ngay l\u1eadp t\u1ee9c nh\u1eadn \u0111\u01b0\u1ee3c m\u00e3 bi\u1ec3u \u0111\u1ed3 ch\u1ea5t l\u01b0\u1ee3ng s\u1ea3n xu\u1ea5t m\u00e3 bi\u1ec3u \u0111\u1ed3<\/a> \u2014 d\u01b0\u1edbi d\u1ea1ng Mermaid, PlantUML ho\u1eb7c Graphviz<\/strong> \u2014 \u0111\u00e3 \u0111\u01b0\u1ee3c x\u00e1c minh t\u00ednh ch\u00ednh x\u00e1c tr\u01b0\u1edbc khi g\u1eedi \u0111\u1ebfn b\u1ea1n.<\/p>\n\n

2. C\u00e1c Kh\u00e1i ni\u1ec7m Ch\u00ednh<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Kh\u00e1i ni\u1ec7m<\/th>\n\u00dd ngh\u0129a<\/th>\n<\/tr>\n<\/thead>\n
Ng\u00f4n ng\u1eef T\u1ef1 nhi\u00ean \u2192 Bi\u1ec3u \u0111\u1ed3<\/strong><\/td>\nM\u00f4 t\u1ea3 h\u1ec7 th\u1ed1ng c\u1ee7a b\u1ea1n (v\u00ed d\u1ee5: “lu\u1ed3ng \u0111\u0103ng nh\u1eadp c\u00f3 nh\u00e1nh qu\u00e1 h\u1ea1n”) v\u00e0 tr\u1ee3 l\u00fd s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u1ea1o m\u00e3 bi\u1ec3u \u0111\u1ed3.<\/td>\n<\/tr>\n
H\u1ed7 tr\u1ee3 \u0110a \u0111\u1ecbnh d\u1ea1ng<\/strong><\/td>\nM\u1ed9t m\u00f4 t\u1ea3 duy nh\u1ea5t c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb d\u01b0\u1edbi d\u1ea1ng Mermaid (bi\u1ec3u \u0111\u1ed3 v\u0103n b\u1ea3n nhanh), PlantUML (\u0111\u1ea7y \u0111\u1ee7 UML<\/a>\/SysML<\/a>\/C4<\/a>), ho\u1eb7c Graphviz (bi\u1ec3u \u0111\u1ed3 m\u1ea1ng\/tr\u1ea1ng th\u00e1i).<\/td>\n<\/tr>\n
Ph\u00e2n t\u00edch H\u00ecnh \u1ea3nh<\/strong><\/td>\nD\u00e1n \u1ea3nh ch\u1ee5p m\u00e0n h\u00ecnh ho\u1eb7c b\u1ea3n ph\u00e1c th\u1ea3o (k\u1ec3 c\u1ea3 \u1ea3nh ch\u1ee5p b\u1ea3ng tr\u1eafng v\u1ebd tay) \u2014 tr\u1ee3 l\u00fd s\u1ebd \u0111\u1ecdc n\u1ed9i dung v\u00e0 chuy\u1ec3n \u0111\u1ed5i c\u00e1c \u0111i\u1ec3m ch\u00ednh v\u1ec1 v\u0103n b\u1ea3n\/c\u1ea5u tr\u00fac th\u00e0nh \u0111\u1ea7u v\u00e0o m\u00f4 h\u00ecnh h\u00f3a.<\/td>\n<\/tr>\n
X\u00e1c minh T\u1ef1 \u0111\u1ed9ng<\/strong><\/td>\nM\u00e3 bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1ee3c t\u1ea1o s\u1ebd \u0111\u01b0\u1ee3c ki\u1ec3m tra c\u00fa ph\u00e1p tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb, lo\u1ea1i b\u1ecf c\u00e1c v\u00f2ng l\u1eb7p “bi\u1ec3u \u0111\u1ed3 b\u1ecb l\u1ed7i”.<\/td>\n<\/tr>\n
Khung Kh\u1ed5 Infographic<\/strong><\/td>\nNgo\u00e0i UML, n\u00f3 t\u1ea1o ra SWOT<\/a>, PESTLE<\/a>, McKinsey 7S<\/a>, s\u01a1 \u0111\u1ed3 t\u01b0 duy<\/a>, v\u00e0 bi\u1ec3u \u0111\u1ed3 d\u1ef1a tr\u00ean ECharts<\/a>d\u01b0\u1edbi d\u1ea1ng JSON c\u00f3 c\u1ea5u tr\u00fac.<\/td>\n<\/tr>\n
Tinh ch\u1ec9nh l\u1eb7p l\u1ea1i<\/strong><\/td>\nB\u1ea1n theo d\u00f5i (\u201cl\u00e0m cho n\u00f3 b\u1ea5t \u0111\u1ed3ng b\u1ed9\u201d, \u201cth\u00eam c\u00e1c l\u00e0n b\u01a1i\u201d) v\u00e0 tr\u1ee3 l\u00fd t\u1ea1o l\u1ea1i \u2014 m\u1ed9t v\u00f2ng l\u1eb7p thi\u1ebft k\u1ebf s\u1ed1ng \u0111\u1ed9ng, h\u1ee3p t\u00e1c.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

3. C\u00e1ch ho\u1ea1t \u0111\u1ed9ng \u2014 Quy tr\u00ecnh t\u1eeb \u0111\u1ea7u \u0111\u1ebfn cu\u1ed1i<\/h2>\n

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

S\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3<\/a>s\u1eed d\u1ee5ng Mermaid<\/p>\n

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

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\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 
flowchart LR\n    A[Y\u00eau c\u1ea7u c\u1ee7a ng\u01b0\u1eddi d\u00f9ng b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean] --> B[Chatbot AI VP]\n    B --> C{Hi\u1ec3u \u00fd \u0111\u1ecbnh}\n    C -->|Y\u00eau c\u1ea7u s\u01a1 \u0111\u1ed3| D[T\u1ea1o m\u00e3 s\u01a1 \u0111\u1ed3 UML]\n    C -->|H\u00ecnh \u1ea3nh\/B\u1ed1i c\u1ea3nh| E[Ph\u00e2n t\u00edch h\u00ecnh \u1ea3nh v\u00e0 tr\u00edch xu\u1ea5t chi ti\u1ebft]\n    C -->|Khung chi\u1ebfn l\u01b0\u1ee3c| F[X\u00e2y d\u1ef1ng JSON khung chi\u1ebfn l\u01b0\u1ee3c]\n    D --> G[M\u00e3 Mermaid\/PlantUML\/Graphviz]\n    G --> H[Ki\u1ec3m tra c\u00fa ph\u00e1p]\n    H -->|H\u1ee3p l\u1ec7| I[Hi\u1ec3n th\u1ecb s\u01a1 \u0111\u1ed3]\n    H -->|Kh\u00f4ng h\u1ee3p l\u1ec7| J[S\u1eeda v\u00e0 ki\u1ec3m tra l\u1ea1i]\n    J --> H\n    I --> K[Ng\u01b0\u1eddi d\u00f9ng xem x\u00e9t v\u00e0 l\u1eb7p l\u1ea1i]\n    K --> B\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<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
V\u00ed d\u1ee5 s\u01a1 \u0111\u1ed3 1 \u2014 S\u01a1 \u0111\u1ed3 tr\u00ecnh t\u1ef1<\/a> (\u0111\u01b0\u1ee3c t\u1ea1o theo y\u00eau c\u1ea7u)<\/h3>\n
M\u1ed9t t\u01b0\u01a1ng t\u00e1c \u0111i\u1ec3n h\u00ecnh khi ng\u01b0\u1eddi d\u00f9ng y\u00eau c\u1ea7u lu\u1ed3ng \u0111\u0103ng nh\u1eadp v\u1edbi nh\u00e1nh h\u1ebft th\u1eddi gian:<\/p>\n
\"S\u01a1<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\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                    
s\u01a1 \u0111\u1ed3 tr\u00ecnh t\u1ef1\n    ng\u01b0\u1eddi tham gia U l\u00e0 Ng\u01b0\u1eddi d\u00f9ng\n    ng\u01b0\u1eddi tham gia AI l\u00e0 Tr\u1ee3 l\u00fd \u1ea3o AI VP\n    ng\u01b0\u1eddi tham gia V l\u00e0 B\u1ed9 ki\u1ec3m tra\n    \n    U->>AI: \"V\u1ebd s\u01a1 \u0111\u1ed3 tr\u00ecnh t\u1ef1 UML cho \u0111\u0103ng nh\u1eadp ng\u01b0\u1eddi d\u00f9ng\"\n    AI->>AI: Ph\u00e2n t\u00edch \u00fd \u0111\u1ecbnh & ch\u1ecdn lo\u1ea1i s\u01a1 \u0111\u1ed3\n    AI->>AI: T\u1ea1o m\u00e3 Mermaid\n    AI->>V: Ki\u1ec3m tra c\u00fa ph\u00e1p\n    V-->>AI: H\u1ee2P L\u1ec6\n    AI-->>U: Tr\u00ecnh b\u00e0y m\u00e3 Mermaid + gi\u1ea3i th\u00edch\n    U->>AI: \"Th\u00eam nh\u00e1nh d\u1ef1 ph\u00f2ng khi h\u1ebft th\u1eddi gian\"\n    AI->>AI: T\u1ea1o l\u1ea1i v\u1edbi c\u00e1c nh\u00e1nh\n    AI-->>U: S\u01a1 \u0111\u1ed3 \u0111\u00e3 c\u1eadp nh\u1eadt\n    U->>AI: \"Xu\u1ea5t sang \u0111\u1ecbnh d\u1ea1ng PlantUML\"\n    AI->>AI: Chuy\u1ec3n m\u00e3 sang PlantUML\n    AI-->>U: Phi\u00ean b\u1ea3n PlantUML\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<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
V\u00ed d\u1ee5 s\u01a1 \u0111\u1ed3 2 \u2014 S\u01a1 \u0111\u1ed3 l\u1edbp<\/a> (m\u00f4 h\u00ecnh h\u00f3a mi\u1ec1n)
\n\"S\u01a1<\/h3>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\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                    
s\u01a1 \u0111\u1ed3 l\u1edbp\n    class User {\n        +String username\n        +String email\n        +login()\n        +logout()\n    }\n    class Order {\n        +int orderId\n        +String status\n        +float total\n        +calculateTotal()\n        +ship()\n    }\n    class PaymentProcessor {\n        +process(payment)\n        +refund(orderId)\n    }\n    class InventorySystem {\n        +checkStock(itemId)\n        +reserveItem(itemId)\n    }\n    User \"1\" --> \"nhi\u1ec1u\" Order : t\u1ea1o\n    Order \"1\" --> \"1\" PaymentProcessor : s\u1eed d\u1ee5ng\n    Order \"1\" --> \"1\" InventorySystem : truy v\u1ea5n\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<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
V\u00ed d\u1ee5 s\u01a1 \u0111\u1ed3 3 \u2014 H\u1ee3p t\u00e1c gi\u1eefa c\u00e1c vai tr\u00f2<\/h3>\n
\"S\u01a1<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\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                    
s\u01a1 \u0111\u1ed3 lu\u1ed3ng LR\n    subgraph BA[Ph\u00e2n t\u00edch vi\u00ean nghi\u1ec7p v\u1ee5]\n        A1[M\u00f4 t\u1ea3 y\u00eau c\u1ea7u b\u1eb1ng ti\u1ebfng Anh \u0111\u01a1n gi\u1ea3n]\n        A2[\u0110\u00e1nh gi\u00e1 l\u1ea1i tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng v\u00e0 ho\u1ea1t \u0111\u1ed9ng \u0111\u00e3 t\u1ea1o]\n    end\n    subgraph DEV[Nh\u00e0 ph\u00e1t tri\u1ec3n]\n        B1[Ch\u1ec9nh s\u1eeda th\u00e0nh s\u01a1 \u0111\u1ed3 l\u1edbp v\u00e0 s\u01a1 \u0111\u1ed3 tr\u00ecnh t\u1ef1]\n        B2[Ki\u1ec3m tra v\u00e0 xu\u1ea5t sang m\u00e3]\n    end\n    subgraph QA\n        C1[T\u1ea1o s\u01a1 \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p ki\u1ec3m th\u1eed]\n    end\n    A1 --> B1 --> A2 --> C1\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<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n\n
4. L\u1ee3i \u00edch<\/h2>\n