{"id":11749,"date":"2026-07-09T16:42:16","date_gmt":"2026-07-09T08:42:16","guid":{"rendered":"https:\/\/blog.visual-paradigm.com\/vn\/beyond-static-images-unlocking-the-power-of-diagram-as-code-with-mermaid-and-ai-tooling\/"},"modified":"2026-07-09T18:04:06","modified_gmt":"2026-07-09T10:04:06","slug":"beyond-static-images-unlocking-the-power-of-diagram-as-code-with-mermaid-and-ai-tooling","status":"publish","type":"post","link":"https:\/\/blog.visual-paradigm.com\/vn\/beyond-static-images-unlocking-the-power-of-diagram-as-code-with-mermaid-and-ai-tooling\/","title":{"rendered":"V\u01b0\u1ee3t qua h\u00ecnh \u1ea3nh t\u0129nh: Gi\u1ea3i ph\u00f3ng s\u1ee9c m\u1ea1nh c\u1ee7a s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 v\u1edbi Mermaid v\u00e0 c\u00f4ng c\u1ee5 AI"},"content":{"rendered":"

Kh\u1ee7ng ho\u1ea3ng v\u1ec1 t\u00e0i li\u1ec7u<\/h2>\n

M\u1ecdi \u0111\u1ed9i k\u1ef9 thu\u1eadt \u0111\u1ec1u bi\u1ebft n\u1ed7i \u0111au n\u00e0y. B\u1ea1n d\u00e0nh h\u00e0ng tu\u1ea7n \u0111\u1ec3 thi\u1ebft k\u1ebf m\u1ed9t ki\u1ebfn tr\u00fac vi d\u1ecbch v\u1ee5 tuy\u1ec7t \u0111\u1eb9p, t\u1ec9 m\u1ec9 t\u1ea1o ra c\u00e1c s\u01a1 \u0111\u1ed3 Visio g\u00e2y \u1ea5n t\u01b0\u1ee3ng v\u1edbi c\u00e1c b\u00ean li\u00ean quan. S\u00e1u th\u00e1ng sau, h\u1ec7 th\u1ed1ng \u0111\u00e3 thay \u0111\u1ed5i\u2014c\u00e1c d\u1ecbch v\u1ee5 m\u1edbi \u0111\u01b0\u1ee3c th\u00eam v\u00e0o, c\u01a1 s\u1edf d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c di chuy\u1ec3n, c\u00e1c \u0111i\u1ec3m cu\u1ed1i API b\u1ecb lo\u1ea1i b\u1ecf\u2014nh\u01b0ng s\u01a1 \u0111\u1ed3 v\u1eabn \u0111\u00f3ng b\u0103ng trong th\u1eddi gian. \u0110\u00f3 l\u00e0 m\u1ed9t di t\u00edch. Th\u1eadm ch\u00ed l\u00e0 m\u1ed9t l\u1eddi n\u00f3i d\u1ed1i.<\/p>\n

\u0110\u00e2y l\u00e0 “s\u1ef1 m\u1ee5c n\u00e1t c\u1ee7a t\u00e0i li\u1ec7u” (doc-rot), v\u00e0 \u0111\u00f3 l\u00e0 k\u1ebb gi\u1ebft ng\u01b0\u1eddi th\u1ea7m l\u1eb7ng \u0111\u1ed1i v\u1edbi n\u0103ng su\u1ea5t k\u1ef9 thu\u1eadt. Khi s\u01a1 \u0111\u1ed3 n\u00f3i d\u1ed1i, c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n s\u1ebd b\u1ecf qua ch\u00fang. Khi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n b\u1ecf qua t\u00e0i li\u1ec7u, ki\u1ebfn th\u1ee9c b\u1ed9 t\u1ed9c s\u1ebd th\u1ed1ng tr\u1ecb. Khi ng\u01b0\u1eddi duy nh\u1ea5t hi\u1ec3u h\u1ec7 th\u1ed1ng r\u1eddi \u0111i, b\u1ea1n s\u1ebd c\u00f2n l\u1ea1i m\u1ed9t c\u01a1 s\u1edf m\u00e3 ph\u1ee9c t\u1ea1p v\u00e0 kh\u00f4ng c\u00f3 b\u1ea3n \u0111\u1ed3.<\/p>\n

S\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 (DaC)<\/strong> l\u00e0 gi\u1ea3i ph\u00e1p. V\u00e0 c\u1ed1t l\u00f5i c\u1ee7a n\u00f3 l\u00e0 Mermaid<\/strong>, c\u00f4ng c\u1ee5 t\u1ea1o s\u01a1 \u0111\u1ed3 d\u1ef1a tr\u00ean JavaScript bi\u1ebfn v\u0103n b\u1ea3n thu\u1ea7n t\u00fay th\u00e0nh h\u00ecnh \u1ea3nh \u0111\u1eb9p m\u1eaft.<\/p>\n

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

\n

Tri\u1ebft l\u00fd c\u1ed1t l\u00f5i: \u0110\u1ed1i x\u1eed v\u1edbi s\u01a1 \u0111\u1ed3 nh\u01b0 ph\u1ea7n m\u1ec1m<\/h2>\n

S\u1ef1 thay \u0111\u1ed5i c\u01a1 b\u1ea3n c\u1ee7a S\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 l\u00e0 \u0111\u1ed1i x\u1eed v\u1edbi s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n v\u1edbi c\u00f9ng s\u1ef1 nghi\u00eam ng\u1eb7t nh\u01b0 m\u00e3 \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0:<\/p>\n

1. Ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n l\u00e0 ti\u00eau chu\u1ea9n<\/h3>\n

Khi s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n l\u00e0 m\u1ed9t .mermaid<\/code> file, n\u00f3 t\u1ed3n t\u1ea1i trong kho l\u01b0u tr\u1eef Git c\u1ee7a b\u1ea1n b\u00ean c\u1ea1nh m\u00e3 ngu\u1ed3n. M\u1ecdi thay \u0111\u1ed5i \u0111\u1ec1u \u0111\u01b0\u1ee3c theo d\u00f5i. B\u1ea1n c\u00f3 th\u1ec3 git blame<\/code> \u0111\u1ec3 xem ai \u0111\u00e3 th\u00eam d\u1ecbch v\u1ee5 m\u1edbi \u0111\u00f3, git diff<\/code> \u0111\u1ec3 xem x\u00e9t c\u00e1c thay \u0111\u1ed5i tr\u01b0\u1edbc khi h\u1ee3p nh\u1ea5t, v\u00e0 quay l\u1ea1i b\u1ea5t k\u1ef3 tr\u1ea1ng th\u00e1i n\u00e0o tr\u01b0\u1edbc \u0111\u00f3.<\/p>\n

\"\"<\/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 
gitGraph\n    commit id: \"Ki\u1ebfn tr\u00fac ban \u0111\u1ea7u\"\n    commit id: \"Th\u00eam d\u1ecbch v\u1ee5 ng\u01b0\u1eddi d\u00f9ng\"\n    branch feature\/order-service\n    commit id: \"D\u1ecbch v\u1ee5 \u0111\u01a1n h\u00e0ng v1\"\n    commit id: \"Th\u00eam c\u1ed5ng thanh to\u00e1n\"\n    checkout main\n    merge feature\/order-service\n    commit id: \"C\u1eadp nh\u1eadt c\u1ed5ng API\"\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
V\u00ed d\u1ee5: Tr\u1ef1c quan h\u00f3a l\u1ecbch s\u1eed Git c\u1ee7a ch\u00ednh s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n b\u1eb1ng c\u00fa ph\u00e1p Git Graph c\u1ee7a Mermaid<\/em><\/p>\n
2. \u0110\u00e1nh gi\u00e1 m\u00e3 cho s\u01a1 \u0111\u1ed3<\/h3>\n
Y\u00eau c\u1ea7u k\u00e9o (pull requests) kh\u00f4ng c\u00f2n ch\u1ec9 d\u00e0nh cho m\u00e3 n\u1eefa. Khi m\u1ed9t nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u1ec1 xu\u1ea5t m\u1ed9t d\u1ecbch v\u1ee5 m\u1edbi ho\u1eb7c thay \u0111\u1ed5i lu\u1ed3ng d\u1eef li\u1ec7u, thay \u0111\u1ed5i \u0111\u00f3 s\u1ebd xu\u1ea5t hi\u1ec7n d\u01b0\u1edbi d\u1ea1ng diff d\u1ec5 \u0111\u1ecdc trong PR. Ng\u01b0\u1eddi xem x\u00e9t c\u00f3 th\u1ec3 b\u00ecnh lu\u1eadn tr\u1ef1c ti\u1ebfp v\u00e0o s\u01a1 \u0111\u1ed3, \u0111\u1ea3m b\u1ea3o c\u00e1c quy\u1ebft \u0111\u1ecbnh ki\u1ebfn tr\u00fac \u0111\u01b0\u1ee3c th\u1ea3o lu\u1eadn v\u00e0 ph\u00ea duy\u1ec7t tr\u01b0\u1edbc khi \u0111\u01b0\u1ee3c h\u1ee3p nh\u1ea5t.<\/p>\n
3. T\u00edch h\u1ee3p v\u00e0o quy tr\u00ecnh CI\/CD<\/h3>\n
S\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng t\u1ea1o v\u00e0 x\u00e1c th\u1ef1c trong quy tr\u00ecnh c\u1ee7a b\u1ea1n. H\u00e3y t\u01b0\u1edfng t\u01b0\u1ee3ng m\u1ed9t h\u00e0nh \u0111\u1ed9ng GitHub th\u1ef1c hi\u1ec7n:<\/p>\n