{"id":11731,"date":"2026-06-01T17:23:04","date_gmt":"2026-06-01T09:23:04","guid":{"rendered":"https:\/\/blog.visual-paradigm.com\/vn\/case-study-accelerating-software-architecture-documentation-with-vpascode-a-diagram-as-code-revolution\/"},"modified":"2026-07-26T21:31:18","modified_gmt":"2026-07-26T13:31:18","slug":"case-study-accelerating-software-architecture-documentation-with-vpascode-a-diagram-as-code-revolution","status":"publish","type":"post","link":"https:\/\/blog.visual-paradigm.com\/vn\/case-study-accelerating-software-architecture-documentation-with-vpascode-a-diagram-as-code-revolution\/","title":{"rendered":"Nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p: T\u0103ng t\u1ed1c t\u00e0i li\u1ec7u ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m v\u1edbi VPasCode \u2013 Cu\u1ed9c c\u00e1ch m\u1ea1ng v\u1ec1 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3"},"content":{"rendered":"
\n

Ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft \u0111\u1ec1 xu\u1ea5t:<\/strong>\u00a0\u201cT\u1eeb v\u0103n b\u1ea3n \u0111\u1ebfn h\u00ecnh \u1ea3nh: VPasCode thay \u0111\u1ed5i quy tr\u00ecnh s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 cho c\u00e1c \u0111\u1ed9i ng\u0169 k\u1ef9 thu\u1eadt hi\u1ec7n \u0111\u1ea1i nh\u01b0 th\u1ebf n\u00e0o\u201d<\/em><\/p>\n<\/blockquote>\n

\n

Gi\u1edbi thi\u1ec7u: Kho\u1ea3ng tr\u1ed1ng v\u1ec1 t\u00e0i li\u1ec7u trong ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i<\/h2>\n

Trong m\u00f4i tr\u01b0\u1eddng k\u1ef9 thu\u1eadt nhanh ch\u00f3ng hi\u1ec7n nay, ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m ph\u00e1t tri\u1ec3n v\u1edbi t\u1ed1c \u0111\u1ed9 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi m\u00e3 ngu\u1ed3n. Tuy nhi\u00ean, m\u1ed9t th\u00e1ch th\u1ee9c dai d\u1eb3ng v\u1eabn t\u1ed3n t\u1ea1i:gi\u1eef cho t\u00e0i li\u1ec7u ki\u1ebfn tr\u00fac \u0111\u01b0\u1ee3c \u0111\u1ed3ng b\u1ed9 v\u1edbi tri\u1ec3n khai<\/strong>. C\u00e1c c\u00f4ng c\u1ee5 m\u00f4 h\u00ecnh h\u00f3a tr\u1ef1c quan truy\u1ec1n th\u1ed1ng, d\u00f9 m\u1ea1nh m\u1ebd, th\u01b0\u1eddng t\u1ea1o ra s\u1ef1 c\u1ea3n tr\u1edf\u2014ch\u00fang t\u1ed3n t\u1ea1i b\u00ean ngo\u00e0i kho m\u00e3 ngu\u1ed3n, y\u00eau c\u1ea7u c\u1eadp nh\u1eadt th\u1ee7 c\u00f4ng v\u00e0 g\u1eb7p kh\u00f3 kh\u0103n khi t\u00edch h\u1ee3p v\u1edbi h\u1ec7 th\u1ed1ng ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n v\u00e0 c\u00e1c lu\u1ed3ng CI\/CD.<\/p>\n

\"Accelerating<\/p>\n

Xin gi\u1edbi thi\u1ec7uVPasCode<\/strong><\/a>, n\u1ec1n t\u1ea3ng t\u00edch h\u1ee3p Diagram-as-Code (DaC) c\u1ee7a Visual Paradigm. B\u1eb1ng c\u00e1ch chuy\u1ec3n vi\u1ec7c t\u1ea1o s\u01a1 \u0111\u1ed3 v\u00e0o tr\u00ecnh so\u1ea1n th\u1ea3o v\u0103n b\u1ea3n\u2014n\u01a1i c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u00e3 d\u00e0nh ph\u1ea7n l\u1edbn th\u1eddi gian\u2014VPasCode x\u00f3a b\u1ecf kho\u1ea3ng c\u00e1ch gi\u1eefa m\u00e3 ngu\u1ed3n v\u00e0 tr\u1ef1c quan h\u00f3a. Nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p n\u00e0y kh\u00e1m ph\u00e1 c\u00e1ch VPasCode trao quy\u1ec1n cho c\u00e1c \u0111\u1ed9i ng\u0169 k\u1ef9 thu\u1eadt t\u1ea1o ra c\u00e1c s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac ch\u00ednh x\u00e1c, d\u1ec5 b\u1ea3o tr\u00ec v\u00e0 s\u1eb5n s\u00e0ng cho AI b\u1eb1ng c\u00fa ph\u00e1p v\u0103n b\u1ea3n thu\u1ea7n t\u00fay, \u0111\u1ed3ng th\u1eddi t\u00edch h\u1ee3p li\u1ec1n m\u1ea1ch v\u00e0o c\u00e1c quy tr\u00ecnh ph\u00e1t tri\u1ec3n hi\u1ec7n \u0111\u1ea1i.<\/p>\n

\n

\u0110\u1ec1 xu\u1ea5t gi\u00e1 tr\u1ecb c\u1ee7a VPasCode: V\u00ec sao s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 l\u1ea1i quan tr\u1ecdng<\/h2>\n

\"VPasCode
\nN\u1ec1n t\u1ea3ngVPasCode<\/a>tr\u00ecnh ch\u1ec9nh s\u1eeda s\u01a1 \u0111\u1ed3 t\u1eeb v\u0103n b\u1ea3n to\u00e0n di\u1ec7n cung c\u1ea5p kh\u00f4ng gian l\u00e0m vi\u1ec7c hai khung \u0111\u1ec3 hi\u1ec3n th\u1ecb tr\u1ef1c ti\u1ebfp<\/em><\/p>\n

T\u00e0i li\u1ec7u ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m c\u00f3 gi\u00e1 tr\u1ecb nh\u1ea5t khi n\u00f3 l\u00e0s\u1ed1ng \u0111\u1ed9ng, \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n v\u00e0 h\u1ee3p t\u00e1c<\/strong>. VPasCode mang l\u1ea1i \u0111i\u1ec1u n\u00e0y th\u00f4ng qua ba l\u1ee3i th\u1ebf c\u1ed1t l\u00f5i:<\/p>\n

\u2705 K\u1ef9 thu\u1eadt b\u1ed1 c\u1ee5c t\u1ef1 \u0111\u1ed9ng<\/h3>\n

C\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n x\u00e1c \u0111\u1ecbnh\u0111i\u1ec1u g\u00ec<\/em>k\u1ebft n\u1ed1i v\u1edbi\u0111i\u1ec1u g\u00ec<\/em>; VPasCode x\u1eed l\u00fd\u1edf \u0111\u00e2u<\/em>v\u00e0nh\u01b0 th\u1ebf n\u00e0o<\/em>. C\u00e1c b\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb c\u1ee7a n\u1ec1n t\u1ea3ng t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n ph\u00e2n b\u1ed1 kh\u00f4ng gian, kho\u1ea3ng c\u00e1ch l\u1ec1 v\u00e0 t\u1ef7 l\u1ec7 l\u01b0\u1edbi\u2014gi\u1ea3i ph\u00f3ng k\u1ef9 s\u01b0 kh\u1ecfi c\u00e1c nhi\u1ec7m v\u1ee5 c\u0103n ch\u1ec9nh th\u1ee7 c\u00f4ng v\u00e0 \u0111\u1ea3m b\u1ea3o \u0111\u1ea7u ra chuy\u00ean nghi\u1ec7p, nh\u1ea5t qu\u00e1n m\u1ed7i l\u1ea7n.<\/p>\n

\u2705 T\u00ednh nh\u1ea5t qu\u00e1n thi\u1ebft k\u1ebf \u0111\u1ed3ng \u0111\u1ec1u<\/h3>\n

C\u00e1c \u0111o\u1ea1n m\u00e3 \u0111i\u1ec1u khi\u1ec3n b\u1eb1ng v\u0103n b\u1ea3n thi\u1ebft l\u1eadp c\u00e1c ti\u00eau chu\u1ea9n th\u1ea9m m\u1ef9 tr\u00ean to\u00e0n \u0111\u1ed9i. C\u00e1c b\u1ed1 c\u1ee5c t\u1ef1 \u0111\u1ed9ng k\u1ebf th\u1eeba c\u00e1c quy t\u1eafc \u0111\u1ecbnh d\u1ea1ng c\u00f3 c\u1ea5u tr\u00fac, \u0111\u1ea3m b\u1ea3o m\u1ecdi s\u01a1 \u0111\u1ed3\u2014d\u00f9 \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi nh\u00e0 ph\u00e1t tri\u1ec3n c\u1ea5p th\u1ea5p hay ki\u1ebfn tr\u00fac s\u01b0 ch\u00ednh\u2014v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c s\u1ef1 nh\u1ea5t qu\u00e1n v\u1ec1 h\u00ecnh \u1ea3nh m\u00e0 kh\u00f4ng c\u1ea7n t\u1ed1n c\u00f4ng ch\u1ec9nh s\u1eeda th\u1ee7 c\u00f4ng.<\/p>\n

\n

H\u00e0nh tr\u00ecnh AI: T\u1eeb ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean \u0111\u1ebfn s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac<\/h2>\n

M\u1ed9t trong nh\u1eefngVPasCode<\/a>kh\u1ea3 n\u0103ng chuy\u1ec3n \u0111\u1ed5i m\u1ea1nh m\u1ebd nh\u1ea5t l\u00e0 kh\u1ea3 n\u0103ng c\u1ee7a n\u00f3\u00a0t\u01b0\u01a1ng th\u00edch b\u1ea3n \u0111\u1ecba v\u1edbi Tr\u00ed tu\u1ec7 nh\u00e2n t\u1ea1o<\/strong>. Trong khi c\u00e1c m\u00f4 h\u00ecnh ng\u00f4n ng\u1eef l\u1edbn g\u1eb7p kh\u00f3 kh\u0103n khi thao t\u00e1c v\u1edbi c\u00e1c b\u1ec1 m\u1eb7t h\u00ecnh \u1ea3nh ph\u1ee9c t\u1ea1p, ch\u00fang l\u1ea1i xu\u1ea5t s\u1eafc trong vi\u1ec7c t\u1ea1o ra v\u00e0 di\u1ec5n gi\u1ea3i v\u0103n b\u1ea3n c\u00f3 c\u1ea5u tr\u00fac.<\/p>\n

V\u00ec c\u00e1c c\u00f4ng c\u1ee5 DaC d\u1ef1a tr\u00ean c\u00e1c \u0111o\u1ea1n m\u00e3 ng\u1eef ngh\u0129a, AI c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng k\u1ebft n\u1ed1i m\u00f4 t\u1ea3 b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean v\u00e0 ki\u1ebfn tr\u00fac h\u00ecnh \u1ea3nh. V\u00ed d\u1ee5:<\/p>\n

\n

\u201cT\u1ea1o m\u1ed9t lu\u1ed3ng microservice n\u01a1i m\u1ed9t c\u1ed5ng API \u0111\u1ecbnh tuy\u1ebfn c\u00e1c y\u00eau c\u1ea7u \u0111\u1ebfn d\u1ecbch v\u1ee5 ng\u01b0\u1eddi d\u00f9ng v\u1edbi b\u1ed9 \u0111\u1ec7m Redis\u201d<\/em><\/p>\n<\/blockquote>\n

M\u1ed9t tr\u1ee3 l\u00fd AI c\u00f3 th\u1ec3 ngay l\u1eadp t\u1ee9c t\u1ea1o ra c\u00fa ph\u00e1p PlantUML ho\u1eb7c Mermaid ch\u00ednh x\u00e1c c\u1ea7n thi\u1ebft \u0111\u1ec3 hi\u1ec3n th\u1ecb lu\u1ed3ng c\u00f4ng vi\u1ec7c n\u00e0y:<\/p>\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 
graph TD\r\n    A[Y\u00eau c\u1ea7u t\u1eeb Client] --> B{C\u1ed5ng API}\r\n    B --> |Token h\u1ee3p l\u1ec7| C[D\u1ecbch v\u1ee5 X\u00e1c th\u1ef1c]\r\n    B --> |Token kh\u00f4ng h\u1ee3p l\u1ec7| D[Truy c\u1eadp b\u1ecb t\u1eeb ch\u1ed1i]\r\n    C --> E[(C\u01a1 s\u1edf d\u1eef li\u1ec7u Ng\u01b0\u1eddi d\u00f9ng)]\r\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
\"Mermaid
\nV\u00ed d\u1ee5: M\u1ed9t s\u01a1 \u0111\u1ed3 lu\u1ed3ng Mermaid.js \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb ngay l\u1eadp t\u1ee9c trongVPasCode<\/a> t\u1eeb c\u00fa ph\u00e1p v\u0103n b\u1ea3n thu\u1ea7n t\u00fay.<\/em><\/p>\n
S\u1ef1 k\u1ebft h\u1ee3p n\u00e0y khi\u1ebfn DaC tr\u1edf th\u00e0nh n\u1ec1n t\u1ea3ng b\u1ec1n v\u1eefng cho t\u01b0\u01a1ng lai v\u1ec1k\u1ef9 thu\u1eadt h\u1ed7 tr\u1ee3 b\u1edfi AI<\/strong>, t\u1ea1o t\u00e0i li\u1ec7u t\u1ef1 \u0111\u1ed9ng, v\u00e0 thi\u1ebft k\u1ebf ki\u1ebfn tr\u00fac theo c\u00e1ch h\u1ed9i tho\u1ea1i.<\/p>\n
\n
Eco h\u1ec7 th\u1ed1ng \u0111\u1ed9ng c\u01a1 th\u1ed1ng nh\u1ea5t: M\u1ed9t n\u1ec1n t\u1ea3ng, nhi\u1ec1u c\u00fa ph\u00e1p<\/h2>\n
C\u1ed9ng \u0111\u1ed3ng nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u00e3 t\u1ef1 nhi\u00ean ti\u1ebfp nh\u1eadn c\u00e1c c\u00f4ng c\u1ee5 v\u1ebd s\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n m\u1edf m\u1ea1nh m\u1ebd:<\/p>\n