{"id":361,"date":"2026-08-19T06:25:25","date_gmt":"2026-08-19T06:25:25","guid":{"rendered":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/"},"modified":"2026-08-19T06:25:25","modified_gmt":"2026-08-19T06:25:25","slug":"from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode","status":"publish","type":"post","link":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/","title":{"rendered":"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode"},"content":{"rendered":"<h2>Gi\u1edbi thi\u1ec7u<\/h2>\n<p>Trong v\u00f2ng \u0111\u1eddi ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i, t\u00e0i li\u1ec7u th\u01b0\u1eddng \u0111i sau qu\u00e1 tr\u00ecnh tri\u1ec3n khai. C\u00e1c s\u01a1 \u0111\u1ed3 tr\u1ef1c quan d\u1ea7n m\u1ea5t \u0111\u1ed3ng b\u1ed9 v\u1edbi m\u00e3 ngu\u1ed3n, d\u1eabn \u0111\u1ebfn \u201cn\u1ee3 t\u00e0i li\u1ec7u\u201d v\u00e0 s\u1ef1 nh\u1ea7m l\u1eabn v\u1ec1 ki\u1ebfn tr\u00fac.<a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\"><strong>M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 (DaC)<\/strong><\/a>Gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng c\u00e1ch coi c\u00e1c m\u00f4 h\u00ecnh tr\u1ef1c quan l\u00e0 c\u00e1c t\u1ec7p v\u0103n b\u1ea3n\u2014c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n, xem x\u00e9t v\u00e0 t\u1ef1 \u0111\u1ed9ng h\u00f3a gi\u1ed1ng nh\u01b0 m\u00e3 ngu\u1ed3n.<\/p>\n<p><a href=\"https:\/\/www.visual-paradigm.com\/guide\/comprehensive-guide-to-vpascode-by-visual-paradigm\/\"><strong>VPasCode<\/strong><\/a>, \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi Visual Paradigm, l\u00e0 m\u1ed9t n\u1ec1n t\u1ea3ng DaC th\u1ed1ng nh\u1ea5t, d\u1ef1a tr\u00ean tr\u00ecnh duy\u1ec7t, t\u1eadp h\u1ee3p c\u00e1c c\u00f4ng c\u1ee5 chuy\u1ec3n \u0111\u1ed5i v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3 m\u1ea1nh m\u1ebd nh\u1ea5t th\u1ebf gi\u1edbi v\u00e0o m\u1ed9t giao di\u1ec7n duy nh\u1ea5t. Thay v\u00ec ph\u1ea3i qu\u1ea3n l\u00fd nhi\u1ec1u plugin ho\u1eb7c c\u00e0i \u0111\u1eb7t c\u1ee5c b\u1ed9, VPasCode cho ph\u00e9p c\u00e1c k\u1ef9 s\u01b0, ki\u1ebfn tr\u00fac s\u01b0 v\u00e0 nh\u00e0 ph\u00e2n t\u00edch vi\u1ebft k\u1ecbch b\u1ea3n b\u1eb1ng c\u00e1c ng\u00f4n ng\u1eef nh\u01b0 <a href=\"https:\/\/www.visual-paradigm.com\/features\/diagram-as-code-tool\/\">PlantUML, Mermaid, D2 v\u00e0 Graphviz<\/a>, bi\u1ebfn ch\u00fang ngay l\u1eadp t\u1ee9c th\u00e0nh c\u00e1c h\u00ecnh \u1ea3nh chuy\u00ean nghi\u1ec7p. H\u01b0\u1edbng d\u1eabn n\u00e0y kh\u00e1m ph\u00e1 c\u00e1ch t\u1eadn d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 n\u00e0y trong VPasCode \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a quy tr\u00ecnh thi\u1ebft k\u1ebf h\u1ec7 th\u1ed1ng v\u00e0 t\u00e0i li\u1ec7u c\u1ee7a b\u1ea1n.<\/p>\n<p id=\"leFlbPd\"><img fetchpriority=\"high\" alt=\"Visual Paradigm VPasCode: N\u1ec1n t\u1ea3ng S\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a\" class=\"alignnone wp-image-1666 size-full\" decoding=\"async\" fetchpriority=\"high\" height=\"485\" sizes=\"(max-width: 867px) 100vw, 867px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854e6372a57.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854e6372a57.png 867w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854e6372a57-300x168.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854e6372a57-768x430.png 768w\" width=\"867\"\/><\/p>\n<hr\/>\n<h2>Kh\u00e1i ni\u1ec7m C\u1ed1t l\u00f5i: M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 l\u00e0 g\u00ec?<\/h2>\n<p>M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 l\u00e0 m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p trong \u0111\u00f3 c\u00e1c s\u01a1 \u0111\u1ed3 \u0111\u01b0\u1ee3c t\u1ea1o ra t\u1eeb c\u00e1c m\u00f4 t\u1ea3 v\u0103n b\u1ea3n thay v\u00ec \u0111\u01b0\u1ee3c v\u1ebd th\u1ee7 c\u00f4ng b\u1eb1ng chu\u1ed9t.<\/p>\n<ul>\n<li>\n<p><strong>Th\u00e2n thi\u1ec7n v\u1edbi Ki\u1ec3m so\u00e1t Phi\u00ean b\u1ea3n:<\/strong>B\u1edfi v\u00ec c\u00e1c s\u01a1 \u0111\u1ed3 l\u00e0 v\u0103n b\u1ea3n (<code data-backticks=\"1\">.puml<\/code>,\u00a0<code data-backticks=\"1\">.mmd<\/code>,\u00a0<code data-backticks=\"1\">.d2<\/code>), ch\u00fang c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong Git. B\u1ea1n c\u00f3 th\u1ec3 xem ch\u00ednh x\u00e1c <em>c\u00e1i g\u00ec<\/em> \u0111\u00e3 thay \u0111\u1ed5i trong ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng gi\u1eefa c\u00e1c l\u1ea7n commit b\u1eb1ng c\u00f4ng c\u1ee5 <code data-backticks=\"1\">diff<\/code> ti\u00eau chu\u1ea9n.<\/p>\n<\/li>\n<li>\n<p><strong>S\u1eb5n s\u00e0ng cho AI:<\/strong>Nh\u01b0 \u0111\u01b0\u1ee3c th\u1ea5y trong giao di\u1ec7n VPasCode, t\u00ednh n\u0103ng \u201cT\u1ea1o b\u1eb1ng AI\u201d t\u1eadn d\u1ee5ng c\u00e1c M\u00f4 h\u00ecnh Ng\u00f4n ng\u1eef L\u1edbn \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i c\u00e1c l\u1ec7nh b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean tr\u1ef1c ti\u1ebfp th\u00e0nh c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3, gi\u1ea3m \u0111\u00e1ng k\u1ec3 th\u1eddi gian d\u00e0nh cho m\u00e3 m\u1eabu.<\/p>\n<\/li>\n<li>\n<p><strong>Hi\u1ec3n th\u1ecb Th\u1ed1ng nh\u1ea5t:<\/strong>VPasCode lo\u1ea1i b\u1ecf s\u1ef1 c\u1ea3n tr\u1edf khi chuy\u1ec3n \u0111\u1ed5i ng\u1eef c\u1ea3nh. D\u00f9 b\u1ea1n c\u1ea7n s\u01a1 \u0111\u1ed3 tr\u00ecnh t\u1ef1 UML hay bi\u1ec3u \u0111\u1ed3 tr\u1ef1c quan h\u00f3a d\u1eef li\u1ec7u, c\u00f4ng c\u1ee5 s\u1ebd x\u1eed l\u00fd logic hi\u1ec3n th\u1ecb ngay tr\u00ean tr\u00ecnh duy\u1ec7t.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>Kh\u00e1m ph\u00e1 S\u00e2u: C\u00e1c C\u00f4ng c\u1ee5 \u0110\u01b0\u1ee3c H\u1ed7 tr\u1ee3 &amp; V\u00ed d\u1ee5<\/h2>\n<p>VPasCode h\u1ed7 tr\u1ee3 m\u1ed9t h\u1ec7 sinh th\u00e1i \u0111a d\u1ea1ng c\u00e1c ng\u00f4n ng\u1eef m\u00f4 h\u00ecnh h\u00f3a. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ph\u00e2n t\u00edch chi ti\u1ebft v\u1ec1 c\u00e1c c\u00f4ng c\u1ee5 ch\u00ednh c\u00f3 th\u1ec3 th\u1ea5y trong thanh b\u00ean c\u1ee7a c\u00f4ng c\u1ee5, k\u00e8m theo c\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng v\u00e0 v\u00ed d\u1ee5 m\u00e3 ngu\u1ed3n.<\/p>\n<h3>1. PlantUML: Ti\u00eau chu\u1ea9n Doanh nghi\u1ec7p<\/h3>\n<p>PlantUML l\u00e0 nh\u00e0 v\u00f4 \u0111\u1ecbch h\u1ea1ng n\u1eb7ng trong m\u00f4 h\u00ecnh h\u00f3a ph\u1ea7n m\u1ec1m ch\u00ednh th\u1ee9c. N\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i cho c\u00e1c bi\u1ec3u \u0111\u1ed3 UML (Ng\u00f4n ng\u1eef M\u00f4 h\u00ecnh h\u00f3a Th\u1ed1ng nh\u1ea5t), bao g\u1ed3m bi\u1ec3u \u0111\u1ed3 th\u00e0nh ph\u1ea7n, tri\u1ec3n khai v\u00e0 tr\u00ecnh t\u1ef1. Trong h\u00ecnh ch\u1ee5p m\u00e0n h\u00ecnh \u0111\u01b0\u1ee3c cung c\u1ea5p, ch\u00fang ta th\u1ea5y m\u1ed9t <a href=\"https:\/\/www.visual-paradigm.com\/guide\/c4-container-diagram-a-practical-guide-for-beginners\/\"><strong>Bi\u1ec3u \u0111\u1ed3 Container C4<\/strong><\/a>\u00a0\u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb <a href=\"https:\/\/www.visual-paradigm.com\/features\/diagram-as-code-tool\/\">th\u00f4ng qua PlantUML<\/a>, m\u00f4 t\u1ea3 m\u1ed9t &#8216;H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Internet&#8217;.<\/p>\n<ul>\n<li>\n<p><strong>Ph\u00f9 h\u1ee3p nh\u1ea5t cho:<\/strong>\u00a0Ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p, m\u00f4 h\u00ecnh C4 v\u00e0 tu\u00e2n th\u1ee7 nghi\u00eam ng\u1eb7t UML.<\/p>\n<\/li>\n<li>\n<p><strong>V\u00ed d\u1ee5 (<a href=\"https:\/\/www.visual-paradigm.com\/features\/diagram-as-code-tool\/\">Bi\u1ec3u \u0111\u1ed3 Tr\u00ecnh t\u1ef1<\/a>):<\/strong><\/p>\n<\/li>\n<\/ul>\n<p id=\"cvFZAkl\"><img loading=\"lazy\" alt=\"Giao di\u1ec7n VPasCode PlantUML hi\u1ec3n th\u1ecb s\u01a1 \u0111\u1ed3 tr\u00ecnh t\u1ef1 cho lu\u1ed3ng \u0111\u0103ng nh\u1eadp c\u1ee7a H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn.\" class=\"alignnone size-full wp-image-1656\" decoding=\"async\" height=\"872\" loading=\"lazy\" sizes=\"auto, (max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b51c0754.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b51c0754.png 1914w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b51c0754-300x137.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b51c0754-1024x467.png 1024w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b51c0754-768x350.png 768w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b51c0754-1536x700.png 1536w\" width=\"1914\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuUKABKujKj2rKt0goYy7CgqK_0jIynHyyjCpynG24jDJURcWCY15mQb5PI0rxguX2lev83MyN10n1LraCpn2V7qKtFABSh6O7roQb9jPek1Sb9gIcbUIcPXJZDMA0FzWe1s9fIKPsAqmCZ1GyFTMq0Z9pqxDq-JbSaZDIm5w2000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuUKABKujKj2rKt0goYy7CgqK_0jIynHyyjCpynG24jDJURcWCY15mQb5PI0rxguX2lev83MyN10n1LraCpn2V7qKtFABSh6O7roQb9jPek1Sb9gIcbUIcPXJZDMA0FzWe1s9fIKPsAqmCZ1GyFTMq0Z9pqxDq-JbSaZDIm5w2000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuUKABKujKj2rKt0goYy7CgqKV1_kdgzGKfIObwvmPEAHPY2Lb_5mrze2NYwe4f3guDIYCf1YTzSG1VsS_FJCF5ukY9Y2Bh9XJfaFTpUNAkG-tBMwLC4ZnDS7YuNk3tUlpLGeoJYy1MXNIMOU4TO6-0S3xKqiBSd0RgsHWO62lxU2HaX-TcgU9Y-NGsfU2j2t0000\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nUser -&gt; Browser: M\u1edf trang \u0111\u0103ng nh\u1eadp\r\nBrowser -&gt; Server: GET \/login\r\nServer --&gt; Browser: Bi\u1ec3u m\u1eabu HTML\r\nUser -&gt; Browser: G\u1eedi th\u00f4ng tin \u0111\u0103ng nh\u1eadp\r\nBrowser -&gt; Server: POST \/auth\r\nServer --&gt; Browser: 200 OK (Token)\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuUKABKujKj2rKt0goYy7CgqKV1_kdgzGKfIObwvmPEAHPY2Lb_5mrze2NYwe4f3guDIYCf1YTzSG1VsS_FJCF5ukY9Y2Bh9XJfaFTpUNAkG-tBMwLC4ZnDS7YuNk3tUlpLGeoJYy1MXNIMOU4TO6-0S3xKqiBSd0RgsHWO62lxU2HaX-TcgU9Y-NGsfU2j2t0000\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuUKABKujKj2rKt0goYy7CgqK_0jIynHyyjCpynG24jDJURcWCY15mQb5PI0rxguX2lev83MyN10n1LraCpn2V7qKtFABSh6O7roQb9jPek1Sb9gIcbUIcPXJZDMA0FzWe1s9fIKPsAqmCZ1GyFTMq0Z9pqxDq-JbSaZDIm5w2000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuUKABKujKj2rKt0goYy7CgqK_0jIynHyyjCpynG24jDJURcWCY15mQb5PI0rxguX2lev83MyN10n1LraCpn2V7qKtFABSh6O7roQb9jPek1Sb9gIcbUIcPXJZDMA0FzWe1s9fIKPsAqmCZ1GyFTMq0Z9pqxDq-JbSaZDIm5w2000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>2. Mermaid: B\u1ea3n \u0111\u1ecba Markdown<\/h3>\n<p>Mermaid \u0111\u00e3 tr\u1edf n\u00ean ph\u1ed5 bi\u1ebfn nh\u1edd h\u1ed7 tr\u1ee3 b\u1ea3n \u0111\u1ecba trong GitHub, GitLab v\u00e0 Notion. N\u00f3 s\u1eed d\u1ee5ng c\u00fa ph\u00e1p l\u1ea5y c\u1ea3m h\u1ee9ng t\u1eeb Markdown, d\u1ec5 ti\u1ebfp c\u1eadn cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u nh\u01b0ng \u0111\u1ee7 m\u1ea1nh m\u1ebd \u0111\u1ec3 t\u1ea1o s\u01a1 \u0111\u1ed3 lu\u1ed3ng, bi\u1ec3u \u0111\u1ed3 Gantt v\u00e0 bi\u1ec3u \u0111\u1ed3 quan h\u1ec7 th\u1ef1c th\u1ec3.<\/p>\n<ul>\n<li>\n<p><strong>Ph\u00f9 h\u1ee3p nh\u1ea5t cho:<\/strong>\u00a0T\u00e0i li\u1ec7u nhanh, t\u1ec7p README v\u00e0 tr\u1ef1c quan h\u00f3a quy tr\u00ecnh l\u00e0m vi\u1ec7c linh ho\u1ea1t.<\/p>\n<\/li>\n<li>\n<p><strong>V\u00ed d\u1ee5 (<a href=\"https:\/\/www.visual-paradigm.com\/tutorials\/flowchart-tutorial\/\">S\u01a1 \u0111\u1ed3 lu\u1ed3ng<\/a>):<\/strong><\/p>\n<\/li>\n<\/ul>\n<p id=\"zZPZHBq\"><img loading=\"lazy\" alt=\"Tr\u00ecnh ch\u1ec9nh s\u1eeda s\u01a1 \u0111\u1ed3 lu\u1ed3ng Mermaid c\u1ee7a VPasCode hi\u1ec3n th\u1ecb c\u00fa ph\u00e1p m\u00e3 v\u00e0 s\u01a1 \u0111\u1ed3 c\u00e2y quy\u1ebft \u0111\u1ecbnh \u0111\u1ec3 tr\u1ef1c quan h\u00f3a quy tr\u00ecnh l\u00e0m vi\u1ec7c.\" class=\"alignnone size-full wp-image-1657\" decoding=\"async\" height=\"870\" loading=\"lazy\" sizes=\"auto, (max-width: 1916px) 100vw, 1916px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b7dea36c.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b7dea36c.png 1916w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b7dea36c-300x136.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b7dea36c-1024x465.png 1024w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b7dea36c-768x349.png 768w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854b7dea36c-1536x697.png 1536w\" width=\"1916\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIcbHm5VIAAsfo4JLEopJYBV1dOwWnas9ihcwShfL8ouzMvHT7WqgiJ6CsQmRqMViRc7R7UWpiiWIssqRfPljOJdolNak0HSblAjHVGgAdIR0m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIcbHm5VIAAsfo4JLEopJYBV1dOwWnas9ihcwShfL8ouzMvHT7WqgiJ6CsQmRqMViRc7R7UWpiiWIssqRfPljOJdolNak0HSblAjHVGgAdIR0m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIcbHm5VIAAsdop4e71pcoHJn4cNfy0lgFXV07Badqv8ObFZKBOCP\/4a6FYMndM\/PSFbIzDm\/JS7evhep1AqpWcAYqA2lyjg4prXy4u71Eoezh7rmZirHIirzBGsHqXKJdUpNK02HSLhAbrQH7uzR0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD;\r\n    A[B\u1eaft \u0111\u1ea7u] --&gt; B{N\u00f3 c\u00f3 ho\u1ea1t \u0111\u1ed9ng kh\u00f4ng?};\r\n    B -- C\u00f3 --&gt; C[Tuy\u1ec7t v\u1eddi!];\r\n    B -- Kh\u00f4ng --&gt; D[Debug];\r\n    D --&gt; B;<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIcbHm5VIAAsdop4e71pcoHJn4cNfy0lgFXV07Badqv8ObFZKBOCP\/4a6FYMndM\/PSFbIzDm\/JS7evhep1AqpWcAYqA2lyjg4prXy4u71Eoezh7rmZirHIirzBGsHqXKJdUpNK02HSLhAbrQH7uzR0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIcbHm5VIAAsfo4JLEopJYBV1dOwWnas9ihcwShfL8ouzMvHT7WqgiJ6CsQmRqMViRc7R7UWpiiWIssqRfPljOJdolNak0HSblAjHVGgAdIR0m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIcbHm5VIAAsfo4JLEopJYBV1dOwWnas9ihcwShfL8ouzMvHT7WqgiJ6CsQmRqMViRc7R7UWpiiWIssqRfPljOJdolNak0HSblAjHVGgAdIR0m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>3. D2 (V\u1ebd s\u01a1 \u0111\u1ed3 khai b\u00e1o): \u1ee8ng c\u1eed vi\u00ean hi\u1ec7n \u0111\u1ea1i<\/h3>\n<p>D2 l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1edbi \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1eb7c bi\u1ec7t cho tr\u1ea3i nghi\u1ec7m c\u1ee7a nh\u00e0 ph\u00e1t tri\u1ec3n hi\u1ec7n \u0111\u1ea1i. N\u00f3 t\u1eadp trung v\u00e0o t\u00ednh th\u1ea9m m\u1ef9 v\u00e0 kh\u1ea3 n\u0103ng \u0111\u1ecdc, cung c\u1ea5p c\u00fa ph\u00e1p s\u1ea1ch h\u01a1n Graphviz v\u00e0 c\u00e1c ch\u1ee7 \u0111\u1ec1 m\u1eb7c \u0111\u1ecbnh t\u1ed1t h\u01a1n PlantUML. D2 xu\u1ea5t s\u1eafc trong vi\u1ec7c t\u1ea1o ra c\u00e1c s\u01a1 \u0111\u1ed3 \u0111\u1ed9 trung th\u1ef1c cao, tr\u00f4ng \u0111\u1eb9p m\u1eaft trong c\u00e1c b\u00e0i thuy\u1ebft tr\u00ecnh m\u00e0 kh\u00f4ng c\u1ea7n ch\u1ec9nh s\u1eeda th\u1ee7 c\u00f4ng.<\/p>\n<ul>\n<li>\n<p><strong>Ph\u00f9 h\u1ee3p nh\u1ea5t cho:<\/strong>\u00a0T\u1ed5ng quan ki\u1ebfn tr\u00fac c\u1ea5p cao, s\u01a1 \u0111\u1ed3 m\u1ea1ng v\u00e0 h\u00ecnh \u1ea3nh s\u1eb5n s\u00e0ng cho b\u00e0i thuy\u1ebft tr\u00ecnh.<\/p>\n<\/li>\n<li>\n<p><strong>V\u00ed d\u1ee5:<\/strong><\/p>\n<\/li>\n<\/ul>\n<p id=\"IKTQGCj\"><img loading=\"lazy\" alt=\"Giao di\u1ec7n VPasCode D2 hi\u1ec3n th\u1ecb s\u01a1 \u0111\u1ed3 y\u00eau c\u1ea7u HTTPS gi\u1eefa m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7 \u0111\u01b0\u1ee3c t\u1ea1o t\u1eeb c\u00fa ph\u00e1p m\u00e3 khai b\u00e1o.\" class=\"alignnone size-full wp-image-1658\" decoding=\"async\" height=\"867\" loading=\"lazy\" sizes=\"auto, (max-width: 1915px) 100vw, 1915px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854bba478e3.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854bba478e3.png 1915w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854bba478e3-300x136.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854bba478e3-1024x464.png 1024w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854bba478e3-768x348.png 768w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854bba478e3-1536x695.png 1536w\" width=\"1915\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#d2:eNorzkgsSLVSSM4sSs5J5eUqLqnMSdVLy8zJsVJQUk4zAEElXi5eruSczNS8EiuFal4uBYViiKaC1KLi\/DxerlqgvtSistQiVOmi1OSSxLx0kLG1CCMUdO0UYKo9QkICghWCUgtLU4tLAGlqKmA=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda D2 trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#d2:eNorzkgsSLVSSM4sSs5J5eUqLqnMSdVLy8zJsVJQUk4zAEElXi5eruSczNS8EiuFal4uBYViiKaC1KLi\/DxerlqgvtSistQiVOmi1OSSxLx0kLG1CCMUdO0UYKo9QkICghWCUgtLU4tLAGlqKmA=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda D2 trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">D2<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#d2:eNorzkgsSLVSSM4sSs5J5eUqLqnMSdVLy8zJsVJQUk4zAEElXi5eruSczNS8EiuFal4uBYViiKaC1KLi\/DxerlqgvtSistQiVOmi1OSSxLx0kLG1CCMUdO0UYKo9QkICghWCUgtLU4tLAGlqKmA=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-d2\"><code class=\"language-d2\" data-language=\"d2\" class=\"language-d2\">shape: circle\r\nstyle.fill: \"#f0f0f0\"\r\n\r\nclient: {\r\n  shape: person\r\n}\r\nserver: {\r\n  shape: rectangle\r\n}\r\n\r\nclient -&gt; server: HTTPS Request\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#d2:eNorzkgsSLVSSM4sSs5J5eUqLqnMSdVLy8zJsVJQUk4zAEElXi5eruSczNS8EiuFal4uBYViiKaC1KLi\/DxerlqgvtSistQiVOmi1OSSxLx0kLG1CCMUdO0UYKo9QkICghWCUgtLU4tLAGlqKmA=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#d2:eNorzkgsSLVSSM4sSs5J5eUqLqnMSdVLy8zJsVJQUk4zAEElXi5eruSczNS8EiuFal4uBYViiKaC1KLi\/DxerlqgvtSistQiVOmi1OSSxLx0kLG1CCMUdO0UYKo9QkICghWCUgtLU4tLAGlqKmA=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda D2 trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#d2:eNorzkgsSLVSSM4sSs5J5eUqLqnMSdVLy8zJsVJQUk4zAEElXi5eruSczNS8EiuFal4uBYViiKaC1KLi\/DxerlqgvtSistQiVOmi1OSSxLx0kLG1CCMUdO0UYKo9QkICghWCUgtLU4tLAGlqKmA=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda D2 trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>4. Graphviz: C\u00f4ng c\u1ee5 b\u1ed1 c\u1ee5c d\u1ef1a tr\u00ean thu\u1eadt to\u00e1n<\/h3>\n<p><a href=\"https:\/\/www.visual-paradigm.com\/features\/graphviz-editor\/\">Graphviz s\u1eed d\u1ee5ng ng\u00f4n ng\u1eef DOT<\/a> \u0111\u1ec3 m\u00f4 t\u1ea3 \u0111\u1ed3 th\u1ecb. Kh\u00f4ng gi\u1ed1ng nh\u01b0 c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c n\u01a1i b\u1ea1n c\u00f3 th\u1ec3 g\u1ee3i \u00fd v\u1ec1 b\u1ed1 c\u1ee5c, Graphviz s\u1eed d\u1ee5ng c\u00e1c thu\u1eadt to\u00e1n tinh vi (nh\u01b0 Dot, Neato, Twopi) \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng s\u1eafp x\u1ebfp c\u00e1c n\u00fat nh\u1eb1m gi\u1ea3m thi\u1ec3u giao nhau c\u1ee7a c\u00e1c c\u1ea1nh v\u00e0 t\u1ed1i \u01b0u h\u00f3a kh\u1ea3 n\u0103ng \u0111\u1ecdc. \u0110\u00e2y l\u00e0 \u0111\u1ed9ng c\u01a1 \u0111\u1eb1ng sau nhi\u1ec1u c\u00f4ng c\u1ee5 tr\u1ef1c quan h\u00f3a kh\u00e1c.<\/p>\n<ul>\n<li>\n<p><strong>Ph\u00f9 h\u1ee3p nh\u1ea5t cho:<\/strong>\u00a0C\u00e1c \u0111\u1ed3 th\u1ecb ph\u1ee5 thu\u1ed9c quy m\u00f4 l\u1edbn, m\u00e1y tr\u1ea1ng th\u00e1i v\u00e0 c\u1ea5u tr\u00fac d\u1eef li\u1ec7u n\u01a1i b\u1ed1 c\u1ee5c t\u1ef1 \u0111\u1ed9ng l\u00e0 y\u1ebfu t\u1ed1 then ch\u1ed1t.<\/p>\n<\/li>\n<li>\n<p><strong>V\u00ed d\u1ee5:<\/strong><\/p>\n<\/li>\n<\/ul>\n<p id=\"RUHiwtd\"><img loading=\"lazy\" alt=\"Giao di\u1ec7n VPasCode Graphviz hi\u1ec3n th\u1ecb m\u00e3 DOT v\u00e0 \u0111\u1ed3 th\u1ecb c\u00f3 h\u01b0\u1edbng k\u1ebft qu\u1ea3 v\u1edbi c\u00e1c n\u00fat A, B, C v\u00e0 D.\" class=\"alignnone size-full wp-image-1659\" decoding=\"async\" height=\"869\" loading=\"lazy\" sizes=\"auto, (max-width: 1917px) 100vw, 1917px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854be873cfe.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854be873cfe.png 1917w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854be873cfe-300x136.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854be873cfe-1024x464.png 1024w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854be873cfe-768x348.png 768w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854be873cfe-1536x696.png 1536w\" width=\"1917\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNpLyUwvSizIUHBXqOblUgCCosS87JTMIlufIGuIgKOCrp2CE4hwRhaBccAyLkBOLQC2FxAA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda DOT trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNpLyUwvSizIUHBXqOblUgCCosS87JTMIlufIGuIgKOCrp2CE4hwRhaBccAyLkBOLQC2FxAA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda DOT trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNpLyUwvSizIUHBXqOblUgCCosS87JTMIlufIGuIgKOCrp2CE4hwRhaBccAyLkBOLQC2FxAA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph G {\r\n    rankdir=LR;\r\n    A -&gt; B -&gt; C;\r\n    A -&gt; C;\r\n    B -&gt; D;\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNpLyUwvSizIUHBXqOblUgCCosS87JTMIlufIGuIgKOCrp2CE4hwRhaBccAyLkBOLQC2FxAA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNpLyUwvSizIUHBXqOblUgCCosS87JTMIlufIGuIgKOCrp2CE4hwRhaBccAyLkBOLQC2FxAA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda DOT trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNpLyUwvSizIUHBXqOblUgCCosS87JTMIlufIGuIgKOCrp2CE4hwRhaBccAyLkBOLQC2FxAA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Ch\u1ec9nh s\u1eeda DOT trong VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>5. Markmap: Tr\u1ef1c quan h\u00f3a ki\u1ebfn th\u1ee9c<\/h3>\n<p>Markmap ph\u00e2n t\u00edch c\u00e1c ti\u00eau \u0111\u1ec1 v\u00e0 danh s\u00e1ch Markdown ti\u00eau chu\u1ea9n \u0111\u1ec3 t\u1ea1o ra c\u00e1c b\u1ea3n \u0111\u1ed3 t\u01b0 duy t\u01b0\u01a1ng t\u00e1c. \u0110\u00e2y l\u00e0 c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi \u0111\u1ec3 \u0111\u1ed9ng n\u00e3o, t\u00f3m t\u1eaft t\u00e0i li\u1ec7u d\u00e0i ho\u1eb7c tr\u1ef1c quan h\u00f3a ph\u00e2n c\u1ea5p d\u1ef1 \u00e1n.<\/p>\n<ul>\n<li>\n<p><strong>Ph\u00f9 h\u1ee3p nh\u1ea5t cho:<\/strong>\u00a0C\u00e1c bu\u1ed5i \u0111\u1ed9ng n\u00e3o, ghi ch\u00fa v\u00e0 t\u00f3m t\u1eaft t\u00e0i li\u1ec7u.<\/p>\n<\/li>\n<li>\n<p><strong>V\u00ed d\u1ee5:<\/strong><\/p>\n<\/li>\n<\/ul>\n<p id=\"kNYvPRx\"><img loading=\"lazy\" alt=\"Giao di\u1ec7n VPasCode Markmap hi\u1ec3n th\u1ecb s\u01a1 \u0111\u1ed3 t\u01b0 duy k\u1ebf ho\u1ea1ch d\u1ef1 \u00e1n \u0111\u01b0\u1ee3c t\u1ea1o t\u1eeb c\u00e1c ti\u00eau \u0111\u1ec1 v\u00e0 danh s\u00e1ch Markdown.\" class=\"alignnone size-full wp-image-1660\" decoding=\"async\" height=\"873\" loading=\"lazy\" sizes=\"auto, (max-width: 1917px) 100vw, 1917px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c1a444f1.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c1a444f1.png 1917w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c1a444f1-300x137.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c1a444f1-1024x466.png 1024w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c1a444f1-768x350.png 768w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c1a444f1-1536x699.png 1536w\" width=\"1917\"\/><\/p>\n<ul>\n<li>\n<pre class=\"lang-markdown\"><code data-language=\"markdown\"># K\u1ebf ho\u1ea1ch d\u1ef1 \u00e1n\r\n## Giai \u0111o\u1ea1n 1\r\n- Nghi\u00ean c\u1ee9u\r\n- Thi\u1ebft k\u1ebf\r\n## Giai \u0111o\u1ea1n 2\r\n- Ph\u00e1t tri\u1ec3n\r\n- Ki\u1ec3m th\u1eed\r\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>6. ECharts: Tr\u1ef1c quan h\u00f3a d\u1ef1a tr\u00ean d\u1eef li\u1ec7u<\/h3>\n<p>Trong khi c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c t\u1eadp trung v\u00e0o s\u01a1 \u0111\u1ed3 c\u1ea5u tr\u00fac, Apache ECharts l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n m\u1ea1nh m\u1ebd cho vi\u1ec7c tr\u1ef1c quan h\u00f3a d\u1eef li\u1ec7u th\u1ed1ng k\u00ea. N\u00f3 h\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb qua canvas\/SVG v\u00e0 c\u00f3 th\u1ec3 x\u1eed l\u00fd c\u00e1c b\u1ed9 d\u1eef li\u1ec7u kh\u1ed5ng l\u1ed3 m\u1ed9t c\u00e1ch t\u01b0\u01a1ng t\u00e1c.<\/p>\n<ul>\n<li>\n<p><strong>Ph\u00f9 h\u1ee3p nh\u1ea5t cho:<\/strong>B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n, b\u00e1o c\u00e1o t\u00e0i ch\u00ednh v\u00e0 ph\u00e2n t\u00edch d\u1eef li\u1ec7u ph\u1ee9c t\u1ea1p.<\/p>\n<\/li>\n<li>\n<p><strong>V\u00ed d\u1ee5 (\u0110o\u1ea1n c\u1ea5u h\u00ecnh JSON):<br \/>\n<\/strong><\/p>\n<\/li>\n<\/ul>\n<p id=\"kqDHqwn\"><img loading=\"lazy\" alt=\"Giao di\u1ec7n VPasCode ECharts hi\u1ec3n th\u1ecb c\u1ea5u h\u00ecnh JSON cho bi\u1ec3u \u0111\u1ed3 c\u1ed9t b\u00e1o c\u00e1o doanh s\u1ed1 theo qu\u00fd.\" class=\"alignnone size-full wp-image-1661\" decoding=\"async\" height=\"873\" loading=\"lazy\" sizes=\"auto, (max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c4487566.png\" srcset=\"https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c4487566.png 1914w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c4487566-300x137.png 300w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c4487566-1024x467.png 1024w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c4487566-768x350.png 768w, https:\/\/www.go-notes.com\/wp-content\/uploads\/2026\/08\/img_6a854c4487566-1536x701.png 1536w\" width=\"1914\"\/><\/p>\n<pre class=\"lang-javascript\"><code data-language=\"javascript\">option = {\r\n  title: { text: 'B\u00e1o c\u00e1o doanh thu' },\r\n  tooltip: {},\r\n  xAxis: { data: [\"Qu\u00fd 1\",\"Qu\u00fd 2\",\"Qu\u00fd 3\",\"Qu\u00fd 4\"] },\r\n  yAxis: {},\r\n  series: [{ name: 'Doanh thu', type: 'bar', data: [50, 80, 120, 90] }]\r\n};\r\n<\/code><\/pre>\n<hr\/>\n<h2>C\u00e1ch ch\u1ecdn c\u00f4ng c\u1ee5 ph\u00f9 h\u1ee3p trong VPasCode<\/h2>\n<table>\n<thead>\n<tr>\n<th align=\"left\">Y\u00eau c\u1ea7u<\/th>\n<th align=\"left\">C\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c khuy\u1ebfn ngh\u1ecb<\/th>\n<th align=\"left\">T\u1ea1i sao?<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\"><strong>Ki\u1ebfn tr\u00fac UML \/ C4 nghi\u00eam ng\u1eb7t<\/strong><\/td>\n<td align=\"left\"><strong>PlantUML<\/strong><\/td>\n<td align=\"left\">H\u1ed7 tr\u1ee3 s\u00e2u nh\u1ea5t cho c\u00e1c ti\u00eau chu\u1ea9n k\u1ef9 thu\u1eadt ph\u1ea7n m\u1ec1m ch\u00ednh th\u1ee9c.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><strong>T\u00e0i li\u1ec7u \/ Wiki<\/strong><\/td>\n<td align=\"left\"><strong>Mermaid<\/strong><\/td>\n<td align=\"left\">Hi\u1ec3n th\u1ecb g\u1ed1c tr\u00ean h\u1ea7u h\u1ebft c\u00e1c n\u1ec1n t\u1ea3ng Git v\u00e0 wiki hi\u1ec7n \u0111\u1ea1i.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><strong>T\u00ednh th\u1ea9m m\u1ef9 \/ Tr\u00ecnh b\u00e0y<\/strong><\/td>\n<td align=\"left\"><strong>D2<\/strong><\/td>\n<td align=\"left\">C\u00e1c m\u1eb7c \u0111\u1ecbnh hi\u1ec7n \u0111\u1ea1i v\u00e0 c\u00fa ph\u00e1p s\u1ea1ch s\u1ebd y\u00eau c\u1ea7u \u00edt m\u00e3 \u0111\u1ecbnh d\u1ea1ng h\u01a1n.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><strong>Ph\u1ee5 thu\u1ed9c ph\u1ee9c t\u1ea1p<\/strong><\/td>\n<td align=\"left\"><strong>Graphviz<\/strong><\/td>\n<td align=\"left\">Thu\u1eadt to\u00e1n b\u1ed1 tr\u00ed t\u1ef1 \u0111\u1ed9ng v\u01b0\u1ee3t tr\u1ed9i cho c\u00e1c k\u1ebft n\u1ed1i n\u00fat d\u00e0y \u0111\u1eb7c.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><strong>\u0110\u1ed9ng n\u00e3o \/ Ghi ch\u00fa<\/strong><\/td>\n<td align=\"left\"><strong>Markmap<\/strong><\/td>\n<td align=\"left\">Chuy\u1ec3n \u0111\u1ed5i ngay l\u1eadp t\u1ee9c c\u00e1c b\u1ea3n ph\u00e1c th\u1ea3o th\u00e0nh b\u1ea3n \u0111\u1ed3 t\u01b0 duy c\u00f3 th\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><strong>D\u1eef li\u1ec7u th\u1ed1ng k\u00ea<\/strong><\/td>\n<td align=\"left\"><strong>ECharts<\/strong><\/td>\n<td align=\"left\">\u0110\u01b0\u1ee3c thi\u1ebft k\u1ebf chuy\u00ean bi\u1ec7t cho bi\u1ec3u \u0111\u1ed3 t\u01b0\u01a1ng t\u00e1c v\u00e0 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u l\u1edbn.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>K\u1ebft lu\u1eadn<\/h2>\n<p>S\u1ef1 chuy\u1ec3n d\u1ecbch h\u01b0\u1edbng t\u1edbi <a href=\"https:\/\/www.vpascode.com\/docs\/vpascode-docs\/introduction-getting-started\/welcome-to-vpascode\/\">S\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3<\/a> \u0111\u1ea1i di\u1ec7n cho s\u1ef1 tr\u01b0\u1edfng th\u00e0nh c\u1ee7a c\u00e1c th\u1ef1c h\u00e0nh t\u00e0i li\u1ec7u h\u00f3a ph\u1ea7n m\u1ec1m. B\u1eb1ng c\u00e1ch \u00e1p d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/introducing-vpascode-the-ultimate-unified-text-to-diagram-platform\/\"><strong>VPasCode<\/strong><\/a>, c\u00e1c nh\u00f3m c\u00f3 th\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c t\u00e0i s\u1ea3n tr\u1ef1c quan c\u1ee7a h\u1ecd v\u1eabn l\u00e0 nh\u1eefng ph\u1ea7n s\u1ed1ng \u0111\u1ed9ng c\u1ee7a c\u01a1 s\u1edf m\u00e3, thay v\u00ec c\u00e1c h\u00ecnh \u1ea3nh t\u0129nh d\u1ea7n b\u1ecb l\u1ed7i th\u1eddi theo th\u1eddi gian. D\u00f9 b\u1ea1n \u0111ang \u00e1nh x\u1ea1 ki\u1ebfn tr\u00fac vi d\u1ecbch v\u1ee5 b\u1eb1ng <a href=\"https:\/\/www.vpascode.com\/docs\/vpascode-docs\/introduction-getting-started\/the-unified-engine-advantage-plantuml-mermaid-graphviz\/\">PlantUML, tr\u1ef1c quan h\u00f3a lu\u1ed3ng git b\u1eb1ng Mermaid<\/a>, ho\u1eb7c v\u1ebd bi\u1ec3u \u0111\u1ed3 ph\u00e2n t\u00edch b\u1eb1ng ECharts, kh\u1ea3 n\u0103ng \u0111\u1ecbnh ngh\u0129a h\u00ecnh \u1ea3nh d\u01b0\u1edbi d\u1ea1ng v\u0103n b\u1ea3n m\u1edf ra t\u1ef1 \u0111\u1ed9ng h\u00f3a, ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n v\u00e0 t\u1ea1o h\u1ed7 tr\u1ee3 b\u1edfi AI.<\/p>\n<p class=\"\">Nh\u01b0 \u0111\u00e3 minh h\u1ecda qua v\u00ed d\u1ee5 \u201cH\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\u201d trong giao di\u1ec7n VPasCode, c\u00e1c m\u1ed1i quan h\u1ec7 ph\u1ee9c t\u1ea1p gi\u1eefa c\u00e1c container c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a ch\u1ec9 b\u1eb1ng v\u00e0i d\u00f2ng m\u00e3, t\u1ea1o ra c\u00e1c s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac r\u00f5 r\u00e0ng, d\u1ec5 b\u1ea3o tr\u00ec v\u00e0 d\u1ec5 chia s\u1ebb. H\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i b\u1ea3n t\u00f3m t\u1eaft h\u1ec7 th\u1ed1ng quan tr\u1ecdng nh\u1ea5t c\u1ee7a b\u1ea1n th\u00e0nh m\u00e3 ngay h\u00f4m nay\u2014phi\u00ean b\u1ea3n t\u01b0\u01a1ng lai c\u1ee7a ch\u00ednh b\u1ea1n (v\u00e0 nh\u1eefng ng\u01b0\u1eddi xem x\u00e9t) s\u1ebd c\u1ea3m \u01a1n b\u1ea1n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gi\u1edbi thi\u1ec7u Trong v\u00f2ng \u0111\u1eddi ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i, t\u00e0i li\u1ec7u th\u01b0\u1eddng \u0111i sau qu\u00e1 tr\u00ecnh tri\u1ec3n khai. C\u00e1c s\u01a1 \u0111\u1ed3 tr\u1ef1c quan d\u1ea7n m\u1ea5t \u0111\u1ed3ng b\u1ed9 v\u1edbi&hellip;<\/p>\n","protected":false},"author":2,"featured_media":362,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","inline_featured_image":false,"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[3,19],"tags":[],"asset-category":[],"class_list":["post-361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-vpascode"],"source_url":"","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode - Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode - Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates\" \/>\n<meta property=\"og:description\" content=\"Gi\u1edbi thi\u1ec7u Trong v\u00f2ng \u0111\u1eddi ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i, t\u00e0i li\u1ec7u th\u01b0\u1eddng \u0111i sau qu\u00e1 tr\u00ecnh tri\u1ec3n khai. C\u00e1c s\u01a1 \u0111\u1ed3 tr\u1ef1c quan d\u1ea7n m\u1ea5t \u0111\u1ed3ng b\u1ed9 v\u1edbi&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\" \/>\n<meta property=\"og:site_name\" content=\"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-19T06:25:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png\" \/>\n\t<meta property=\"og:image:width\" content=\"867\" \/>\n\t<meta property=\"og:image:height\" content=\"485\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/#\/schema\/person\/6572013bb6169aa2643c647c071bc542\"},\"headline\":\"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode\",\"datePublished\":\"2026-08-19T06:25:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\"},\"wordCount\":2214,\"publisher\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png\",\"articleSection\":[\"AI\",\"VPasCode\"],\"inLanguage\":\"vi\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\",\"url\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\",\"name\":\"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode - Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates\",\"isPartOf\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png\",\"datePublished\":\"2026-08-19T06:25:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage\",\"url\":\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png\",\"contentUrl\":\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png\",\"width\":867,\"height\":485},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.go-notes.com\/vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/#website\",\"url\":\"https:\/\/www.go-notes.com\/vn\/\",\"name\":\"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.go-notes.com\/vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/#organization\",\"name\":\"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates\",\"url\":\"https:\/\/www.go-notes.com\/vn\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/go-notes-logo2.png\",\"contentUrl\":\"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/go-notes-logo2.png\",\"width\":843,\"height\":294,\"caption\":\"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates\"},\"image\":{\"@id\":\"https:\/\/www.go-notes.com\/vn\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/#\/schema\/person\/6572013bb6169aa2643c647c071bc542\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.go-notes.com\/vn\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.go-notes.com\/vn\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode - Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode - Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates","og_description":"Gi\u1edbi thi\u1ec7u Trong v\u00f2ng \u0111\u1eddi ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i, t\u00e0i li\u1ec7u th\u01b0\u1eddng \u0111i sau qu\u00e1 tr\u00ecnh tri\u1ec3n khai. C\u00e1c s\u01a1 \u0111\u1ed3 tr\u1ef1c quan d\u1ea7n m\u1ea5t \u0111\u1ed3ng b\u1ed9 v\u1edbi&hellip;","og_url":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/","og_site_name":"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates","article_published_time":"2026-08-19T06:25:25+00:00","og_image":[{"width":867,"height":485,"url":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":false,"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#article","isPartOf":{"@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/"},"author":{"name":"curtis","@id":"https:\/\/www.go-notes.com\/vn\/#\/schema\/person\/6572013bb6169aa2643c647c071bc542"},"headline":"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode","datePublished":"2026-08-19T06:25:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/"},"wordCount":2214,"publisher":{"@id":"https:\/\/www.go-notes.com\/vn\/#organization"},"image":{"@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png","articleSection":["AI","VPasCode"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/","url":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/","name":"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode - Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates","isPartOf":{"@id":"https:\/\/www.go-notes.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage"},"image":{"@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png","datePublished":"2026-08-19T06:25:25+00:00","breadcrumb":{"@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#primaryimage","url":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png","contentUrl":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/08\/img_6a854e6372a57.png","width":867,"height":485},{"@type":"BreadcrumbList","@id":"https:\/\/www.go-notes.com\/vn\/from-text-to-vision-the-ultimate-guide-to-diagram-as-code-with-vpascode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.go-notes.com\/vn\/"},{"@type":"ListItem","position":2,"name":"T\u1eeb V\u0103n b\u1ea3n \u0111\u1ebfn H\u00ecnh \u1ea3nh: H\u01b0\u1edbng d\u1eabn To\u00e0n di\u1ec7n v\u1ec1 M\u00f4 h\u00ecnh h\u00f3a d\u01b0\u1edbi d\u1ea1ng M\u00e3 v\u1edbi VPasCode"}]},{"@type":"WebSite","@id":"https:\/\/www.go-notes.com\/vn\/#website","url":"https:\/\/www.go-notes.com\/vn\/","name":"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates","description":"","publisher":{"@id":"https:\/\/www.go-notes.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.go-notes.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.go-notes.com\/vn\/#organization","name":"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates","url":"https:\/\/www.go-notes.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.go-notes.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/go-notes-logo2.png","contentUrl":"https:\/\/www.go-notes.com\/vn\/wp-content\/uploads\/sites\/25\/2026\/03\/go-notes-logo2.png","width":843,"height":294,"caption":"Go Notes Ti\u1ebfng Vi\u1ec7t\u2013 AI Knowledge, Tips &amp; Latest Updates"},"image":{"@id":"https:\/\/www.go-notes.com\/vn\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.go-notes.com\/vn\/#\/schema\/person\/6572013bb6169aa2643c647c071bc542","name":"curtis","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.go-notes.com\/vn\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.go-notes.com\/vn\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/posts\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/comments?post=361"}],"version-history":[{"count":0,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/posts\/361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/media\/362"}],"wp:attachment":[{"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/media?parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/categories?post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/tags?post=361"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.go-notes.com\/vn\/wp-json\/wp\/v2\/asset-category?post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}