{"id":1946,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/vn\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","title":{"rendered":"S\u01a1 \u0111\u1ed3 \u0111\u1ea7u ti\u00ean c\u1ee7a b\u1ea1n trong VPasCode \u2013 H\u01b0\u1edbng d\u1eabn nhanh 5 ph\u00fat"},"content":{"rendered":"
\n
\n

VPasCode l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 diagram-as-code<\/a> v\u00e0 t\u00edch h\u1ee3p chuy\u1ec3n v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3<\/a>n\u1ec1n t\u1ea3ng cho ph\u00e9p b\u1ea1n t\u1ea1o s\u01a1 \u0111\u1ed3 b\u1eb1ng c\u00e1c \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn nh\u01b0 PlantUML, Mermaid v\u00e0 Graphviz.<\/p>\n<\/header>\n

\n

VPasCode l\u00e0 g\u00ec?<\/h2>\n

VPasCode (n\u1ec1n t\u1ea3ng diagram-as-code c\u1ee7a Visual Paradigm) l\u00e0 m\u1ed9t n\u1ec1n t\u1ea3ng t\u00edch h\u1ee3p chuy\u1ec3n v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3, cho ph\u00e9p b\u1ea1n t\u1ea1o s\u01a1 \u0111\u1ed3 b\u1eb1ng c\u00e1c \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn nh\u01b0 PlantUML, Mermaid v\u00e0 Graphviz. D\u00f9 b\u1ea1n \u0111ang t\u00e0i li\u1ec7u h\u00f3a ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m, l\u00ean k\u1ebf ho\u1ea1ch d\u1ef1 \u00e1n hay tr\u1ef1c quan h\u00f3a lu\u1ed3ng d\u1eef li\u1ec7u, VPasCode cung c\u1ea5p tr\u00ecnh so\u1ea1n th\u1ea3o m\u00e3 mi\u1ec5n ph\u00ed v\u00e0 tr\u00ecnh render s\u01a1 \u0111\u1ed3 t\u1ee9c th\u00ec \u0111\u1ec3 bi\u1ebfn \u00fd t\u01b0\u1edfng c\u1ee7a b\u1ea1n th\u00e0nh hi\u1ec7n th\u1ef1c.<\/p>\n

\u0110i\u1ec1u tuy\u1ec7t v\u1eddi nh\u1ea5t l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u t\u1ea1o s\u01a1 \u0111\u1ed3 ngay l\u1eadp t\u1ee9c t\u1ea1i www.vpascode.com<\/a> \u2013 kh\u00f4ng c\u1ea7n \u0111\u0103ng k\u00fd \u0111\u1ec3 s\u1eed d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n.<\/p>\n<\/section>\n

\n

B\u01b0\u1edbc 1: Truy c\u1eadp VPasCode<\/h2>\n

\u0110i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn www.vpascode.com<\/a>trong tr\u00ecnh duy\u1ec7t web c\u1ee7a b\u1ea1n. B\u1ea1n s\u1ebd th\u1ea5y giao di\u1ec7n s\u1ea1ch s\u1ebd v\u1edbi tr\u00ecnh so\u1ea1n th\u1ea3o m\u00e3 \u1edf b\u00ean tr\u00e1i v\u00e0 b\u1ea3ng xem tr\u01b0\u1edbc tr\u1ef1c ti\u1ebfp \u1edf b\u00ean ph\u1ea3i. N\u1ec1n t\u1ea3ng t\u1ea3i ngay l\u1eadp t\u1ee9c v\u1edbi m\u1ed9t s\u01a1 \u0111\u1ed3 m\u1eabu \u0111\u1ec3 gi\u00fap b\u1ea1n hi\u1ec3u c\u00fa ph\u00e1p.
\n<\/p>\n

\"VPasCode
Giao di\u1ec7n tr\u1ef1c quan c\u1ee7a VPasCode v\u1edbi so\u1ea1n th\u1ea3o m\u00e3 song song v\u00e0 xem tr\u01b0\u1edbc t\u1ee9c th\u00ec<\/figcaption><\/figure>\n

G\u1ee3i \u00fd h\u00ecnh \u1ea3nh:<\/strong>\u1ea2nh ch\u1ee5p m\u00e0n h\u00ecnh giao di\u1ec7n web VPasCode hi\u1ec3n th\u1ecb b\u1ed1 c\u1ee5c m\u00e0n h\u00ecnh chia \u0111\u00f4i v\u1edbi tr\u00ecnh so\u1ea1n th\u1ea3o m\u00e3 \u1edf b\u00ean tr\u00e1i hi\u1ec3n th\u1ecb c\u00fa ph\u00e1p Mermaid v\u00e0 s\u01a1 \u0111\u1ed3 lu\u1ed3ng \u0111\u01b0\u1ee3c render \u1edf b\u00ean ph\u1ea3i, giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i s\u1ea1ch s\u1ebd v\u1edbi thanh c\u00f4ng c\u1ee5 \u1edf tr\u00ean c\u00f9ng<\/p>\n<\/section>\n

\n

B\u01b0\u1edbc 1: Vi\u1ebft m\u00e3 s\u01a1 \u0111\u1ed3 lu\u1ed3ng c\u1ee7a b\u1ea1n<\/h2>\n

VPasCode ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t c\u00f4ng c\u1ee5 diagram-as-code linh ho\u1ea1t h\u1ed7 tr\u1ee3 nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng. \u0110\u1ed1i v\u1edbi h\u01b0\u1edbng d\u1eabn nhanh chuy\u1ec3n v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3 n\u00e0y, ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng Mermaid, m\u1ed9t trong nh\u1eefng l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn nh\u1ea5t cho s\u01a1 \u0111\u1ed3 lu\u1ed3ng.<\/p>\n

X\u00f3a m\u00e3 m\u1eabu v\u00e0 d\u00e1n v\u00ed d\u1ee5 s\u01a1 \u0111\u1ed3 lu\u1ed3ng \u0111\u01a1n gi\u1ea3n sau:<\/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[Start] --> B{N\u00f3 \u0111ang ho\u1ea1t \u0111\u1ed9ng?}\r\n    B -->|C\u00f3| C[Tuy\u1ec7t v\u1eddi!]\r\n    B -->|Kh\u00f4ng| D[S\u1eeda l\u1ed7i]\r\n    D --> B\r\n    C --> E[K\u1ebft th\u00fac]<\/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
C\u00fa ph\u00e1p Mermaid n\u00e0y t\u1ea1o ra m\u1ed9t s\u01a1 \u0111\u1ed3 lu\u1ed3ng quy\u1ebft \u0111\u1ecbnh c\u01a1 b\u1ea3n. \u0110\u00e2y l\u00e0 \u00fd ngh\u0129a c\u1ee7a n\u00f3:<\/p>\n