{"id":2074,"date":"2026-07-08T06:48:07","date_gmt":"2026-07-08T06:48:07","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-c4-diagram-syntax-architecture-guide\/"},"modified":"2026-07-08T06:48:07","modified_gmt":"2026-07-08T06:48:07","slug":"mermaid-js-c4-diagram-syntax-architecture-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide","title":{"rendered":"Ng\u1eef ph\u00e1p s\u01a1 \u0111\u1ed3 C4 c\u1ee7a Mermaid.js v\u00e0 H\u01b0\u1edbng d\u1eabn ki\u1ebfn tr\u00fac"},"content":{"rendered":"<p>S\u01a1 \u0111\u1ed3 C4 l\u00e0 m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p tr\u1ef1c quan h\u00f3a ki\u1ebfn tr\u00fac chu\u1ea9n h\u00f3a, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 m\u00f4 h\u00ecnh h\u00f3a c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m \u1edf nhi\u1ec1u c\u1ea5p \u0111\u1ed9 tr\u1eebu t\u01b0\u1ee3ng c\u1ea5u tr\u00fac kh\u00e1c nhau. \u0110\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n trong Mermaid.js, b\u1ed9 ph\u1eadn <code>c4<\/code>\u0111\u1ed9ng c\u01a1 tu\u00e2n theo b\u1ed1n t\u1ea7ng c\u1ed1t l\u00f5i c\u1ee7a m\u00f4 h\u00ecnh C4: <strong>B\u1ed1i c\u1ea3nh<\/strong> (h\u1ec7 sinh th\u00e1i quy m\u00f4 l\u1edbn), <strong>Th\u00f9ng ch\u1ee9a<\/strong> (\u1ee9ng d\u1ee5ng, d\u1ecbch v\u1ee5 v\u00e0 c\u01a1 s\u1edf d\u1eef li\u1ec7u), <strong>Th\u00e0nh ph\u1ea7n<\/strong> (c\u00e1c m\u00f4-\u0111un c\u1ea5u tr\u00fac n\u1ed9i b\u1ed9), v\u00e0 <strong>T\u01b0\u01a1ng t\u00e1c \u0111\u1ed9ng<\/strong>. C\u00f4ng c\u1ee5 n\u00e0y lo\u1ea1i b\u1ecf s\u1ef1 phi\u1ec1n to\u00e1i khi t\u00f9y ch\u1ec9nh ki\u1ec3u CSS b\u1eb1ng c\u00e1ch \u00e1p d\u1ee5ng c\u00e1c kh\u1ed1i ki\u1ebfn tr\u00fac nh\u1ea5t qu\u00e1n, s\u1eb5n s\u00e0ng tr\u00ecnh b\u00e0y d\u1ef1a tr\u00ean c\u00e1c khai b\u00e1o v\u0103n b\u1ea3n c\u1ee7a b\u1ea1n.<\/p>\n<h2>Hi\u1ec3u r\u00f5 c\u00e1c tr\u1eebu t\u01b0\u1ee3ng v\u00e0 t\u1eeb kh\u00f3a trong s\u01a1 \u0111\u1ed3 C4<\/h2>\n<p>Mermaid h\u1ed7 tr\u1ee3 b\u1ed1n ti\u00eau \u0111\u1ec1 kh\u1edfi t\u1ea1o s\u01a1 \u0111\u1ed3 chuy\u00ean bi\u1ec7t t\u00f9y thu\u1ed9c v\u00e0o m\u1ee9c \u0111\u1ed9 chi ti\u1ebft m\u00e0 b\u1ed1 c\u1ee5c h\u1ec7 th\u1ed1ng c\u1ee7a b\u1ea1n y\u00eau c\u1ea7u:<\/p>\n<ul>\n<li><code>C4Context<\/code>: T\u1eadp trung v\u00e0o c\u00e1i nh\u00ecn t\u1ed5ng th\u1ec3, hi\u1ec3n th\u1ecb ng\u01b0\u1eddi d\u00f9ng, c\u00e1c h\u1ec7 sinh th\u00e1i ph\u1ea7n m\u1ec1m c\u1ed1t l\u00f5i v\u00e0 c\u00e1c ph\u1ee5 thu\u1ed9c b\u00ean ngo\u00e0i c\u1ea5p cao.<\/li>\n<li><code>C4Container<\/code>: Thu nh\u1ecf m\u1ed9t c\u1ea5p \u0111\u1ed9 \u0111\u1ec3 ph\u00e2n t\u00edch c\u00e1c \u1ee9ng d\u1ee5ng \u0111\u1ed9c l\u1eadp, giao di\u1ec7n frontend, d\u1ecbch v\u1ee5 vi m\u00f4, h\u1ec7 th\u1ed1ng l\u01b0u tr\u1eef c\u01a1 s\u1edf d\u1eef li\u1ec7u v\u00e0 h\u00e0ng \u0111\u1ee3i.<\/li>\n<li><code>C4Component<\/code>: Khai th\u00e1c s\u00e2u b\u00ean trong m\u1ed9t th\u00f9ng ch\u1ee9a \u0111\u1ec3 tr\u01b0ng b\u00e0y c\u00e1c m\u00f4-\u0111un c\u1ea5p m\u00e3 ngu\u1ed3n b\u00ean trong, ch\u1eb3ng h\u1ea1n nh\u01b0 Controllers, Services v\u00e0 Repositories.<\/li>\n<li><code>C4Dynamic<\/code>: T\u1eadp trung v\u00e0o vi\u1ec7c theo d\u00f5i t\u01b0\u01a1ng t\u00e1c d\u1eef li\u1ec7u t\u1ea1i th\u1eddi \u0111i\u1ec3m ch\u1ea1y ho\u1eb7c th\u1ee9 t\u1ef1 giao d\u1ecbch t\u1eebng b\u01b0\u1edbc gi\u1eefa c\u00e1c kh\u1ed1i h\u1ea1 t\u1ea7ng.<\/li>\n<\/ul>\n<h2>C\u1ea5u tr\u00fac ng\u1eef ph\u00e1p c\u01a1 b\u1ea3n<\/h2>\n<p>M\u1ed7i s\u01a1 \u0111\u1ed3 C4 b\u1eaft \u0111\u1ea7u b\u1eb1ng ti\u00eau \u0111\u1ec1 t\u1ea7ng c\u1ee5 th\u1ec3, ti\u1ebfp theo l\u00e0 m\u1ed9t c\u00e2u ti\u00eau \u0111\u1ec1 t\u00f9y ch\u1ecdn v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n macro \u0111\u01b0\u1ee3c ph\u00e2n c\u00e1ch b\u1eb1ng d\u1ea5u ph\u1ea9y. C\u00e1c tham s\u1ed1 \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n, v\u1edbi chu\u1ed7i \u0111\u01b0\u1ee3c gi\u1edbi h\u1ea1n b\u1edfi d\u1ea5u ngo\u1eb7c k\u00e9p.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>\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:eNplT7tKA0EU7QX\/4TBVAmLlF7hNxAfB3V6ScdgZkr0Tdm8g+QJrS7tEEbGwELXJFBbzJfMn3k0EN9gMd+459zyyk8wTmwUfHgDseGqgTtPmicDWpc03YyIvxincO+gWsLAp3AksKyqhrcdF\/HI4E5maDKtWaWjqxlNPzxv2lamPoM5tXGu5jSs5uirjI+1mJdhlCg9i1GXoFF5GoD8edPwAx5UTnt8G1HENskI4Vv3WM182bKreeEQTR+VNs\/2K+qAbt+OMok7hXYPnS6lIbZBMysxsfJ3th1mYSgTip4zsaC\/Fr\/e1mXbK\/ouQp\/CG2xSed30HRTHMVf8Hbiae5A==\" \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\">C4Context\r\n  title \"B\u1ea3n thi\u1ebft k\u1ebf b\u1ed1i c\u1ea3nh h\u1ec7 th\u1ed1ng cho L\u00f5i Internet\"\r\n  Person(customer, \"Kh\u00e1ch h\u00e0ng Ng\u00e2n h\u00e0ng\", \"M\u1ed9t kh\u00e1ch h\u00e0ng c\u1ee7a ng\u00e2n h\u00e0ng c\u00f3 t\u00e0i kho\u1ea3n c\u00e1 nh\u00e2n.\")\r\n  System(banking_system, \"H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\", \"Cho ph\u00e9p kh\u00e1ch h\u00e0ng xem th\u00f4ng tin t\u00e0i kho\u1ea3n.\")\r\n  Rel(customer, banking_system, \"S\u1eed d\u1ee5ng\", \"HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplT7tKA0EU7QX\/4TBVAmLlF7hNxAfB3V6ScdgZkr0Tdm8g+QJrS7tEEbGwELXJFBbzJfMn3k0EN9gMd+459zyyk8wTmwUfHgDseGqgTtPmicDWpc03YyIvxincO+gWsLAp3AksKyqhrcdF\/HI4E5maDKtWaWjqxlNPzxv2lamPoM5tXGu5jSs5uirjI+1mJdhlCg9i1GXoFF5GoD8edPwAx5UTnt8G1HENskI4Vv3WM182bKreeEQTR+VNs\/2K+qAbt+OMok7hXYPnS6lIbZBMysxsfJ3th1mYSgTip4zsaC\/Fr\/e1mXbK\/ouQp\/CG2xSed30HRTHMVf8Hbiae5A==\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"eQIcfSE\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-981\" decoding=\"async\" fetchpriority=\"high\" height=\"486\" sizes=\"(max-width: 1002px) 100vw, 1002px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png 1002w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-300x146.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-768x373.png 768w\" width=\"1002\"\/><\/p>\n<h2>Ph\u00e2n lo\u1ea1i \u0111\u1ea7y \u0111\u1ee7 c\u00e1c macro th\u00e0nh ph\u1ea7n C4<\/h2>\n<p>Th\u01b0 vi\u1ec7n C4 c\u1ee7a Mermaid cung c\u1ea5p m\u1ed9t b\u1ed9 c\u00e1c macro chuy\u00ean bi\u1ec7t phong ph\u00fa \u0111\u1ec3 ph\u00e2n bi\u1ec7t r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n n\u1ed9i b\u1ed9, c\u00e1c h\u1ec7 th\u1ed1ng b\u00ean ngo\u00e0i v\u00e0 c\u00e1c l\u1edbp c\u01a1 s\u1edf d\u1eef li\u1ec7u \u1edf m\u1ecdi t\u1ea7ng tr\u1eebu t\u01b0\u1ee3ng.<\/p>\n<h3>1. Macro Ng\u01b0\u1eddi d\u00f9ng v\u00e0 Ng\u01b0\u1eddi<\/h3>\n<ul>\n<li><code>Person(alias, label, [descr], [sprite], [tags])<\/code>: M\u00f4 h\u00ecnh h\u00f3a m\u1ed9t ng\u01b0\u1eddi d\u00f9ng n\u1ed9i b\u1ed9 ho\u1eb7c b\u00ean li\u00ean quan.<\/li>\n<li><code>Person_Ext(alias, label, [descr], [sprite], [tags])<\/code>: M\u00f4 h\u00ecnh h\u00f3a m\u1ed9t ng\u01b0\u1eddi d\u00f9ng b\u00ean ngo\u00e0i (v\u00ed d\u1ee5: nh\u00e0 cung c\u1ea5p b\u00ean th\u1ee9 ba ho\u1eb7c ki\u1ec3m to\u00e1n vi\u00ean) n\u1eb1m ngo\u00e0i ranh gi\u1edbi t\u1ed5 ch\u1ee9c ch\u00ednh c\u1ee7a b\u1ea1n.<\/li>\n<\/ul>\n<h3>2. Macro H\u1ec7 th\u1ed1ng v\u00e0 Sinh th\u00e1i Ph\u1ea7n m\u1ec1m<\/h3>\n<ul>\n<li><code>System(alias, label, [descr], [sprite], [tags])<\/code>: \u0110\u1ea1i di\u1ec7n cho m\u1ed9t c\u1ee5m h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m n\u1ed9i b\u1ed9, n\u1eb1m trong ph\u1ea1m vi qu\u1ea3n l\u00fd tr\u1ef1c ti\u1ebfp c\u1ee7a b\u1ea1n.<\/li>\n<li><code>System_Ext(alias, label, [descr], [sprite], [tags])<\/code>: M\u00f4 h\u00ecnh h\u00f3a m\u1ed9t h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m b\u00ean ngo\u00e0i quan tr\u1ecdng \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u1edfi b\u00ean th\u1ee9 ba (v\u00ed d\u1ee5: nh\u00e0 cung c\u1ea5p x\u00e1c th\u1ef1c, s\u1ed5 c\u00e1i ng\u00e2n h\u00e0ng c\u1ed1t l\u00f5i).<\/li>\n<li><code>SystemDb(alias, label, [descr], [sprite], [tags])<\/code>: Hi\u1ec3n th\u1ecb m\u1ed9t h\u1ed9p kho l\u01b0u tr\u1eef d\u1eef li\u1ec7u c\u1ea5p h\u1ec7 th\u1ed1ng c\u00f3 h\u00ecnh d\u1ea1ng h\u00ecnh tr\u1ee5.<\/li>\n<li><code>SystemDb_Ext(alias, label, [descr], [sprite], [tags])<\/code>: Hi\u1ec3n th\u1ecb m\u1ed9t t\u1ea7ng c\u01a1 s\u1edf d\u1eef li\u1ec7u b\u00ean ngo\u00e0i do b\u00ean th\u1ee9 ba qu\u1ea3n l\u00fd.<\/li>\n<\/ul>\n<h3>3. Macro L\u1edbp Container (T\u1ea7ng C4Container)<\/h3>\n<ul>\n<li><code>Container(alias, label, technology, [descr], [sprite], [tags])<\/code>: M\u00f4 h\u00ecnh h\u00f3a m\u1ed9t \u1ee9ng d\u1ee5ng c\u00f3 th\u1ec3 ch\u1ea1y ri\u00eang bi\u1ec7t, m\u00e1y ch\u1ee7 API ho\u1eb7c giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng ph\u00eda tr\u01b0\u1edbc.<\/li>\n<li><code>ContainerDb(alias, label, technology, [descr], [sprite], [tags])<\/code>: Hi\u1ec3n th\u1ecb m\u1ed9t l\u1edbp bao b\u1ecdc \u0111\u1ed9ng c\u01a1 c\u01a1 s\u1edf d\u1eef li\u1ec7u quan h\u1ec7 ho\u1eb7c phi quan h\u1ec7 \u1edf c\u1ea5p container.<\/li>\n<li><code>Container_Ext(alias, label, technology, [descr], [sprite], [tags])<\/code>: \u0110\u1ea1i di\u1ec7n cho m\u1ed9t container \u0111\u00e1m m\u00e2y b\u00ean ngo\u00e0i ho\u1eb7c d\u1ecbch v\u1ee5 \u1ee9ng d\u1ee5ng.<\/li>\n<li><code>ContainerDb_Ext(alias, label, technology, [descr], [sprite], [tags])<\/code>: \u0110\u1ea1i di\u1ec7n cho m\u1ed9t t\u1ea7ng l\u01b0u tr\u1eef c\u01a1 s\u1edf d\u1eef li\u1ec7u \u0111\u00e1m m\u00e2y \u0111\u01b0\u1ee3c qu\u1ea3n l\u00fd b\u00ean ngo\u00e0i.<\/li>\n<\/ul>\n<h3>4. Macro L\u1edbp Th\u00e0nh ph\u1ea7n (T\u1ea7ng C4Component)<\/h3>\n<ul>\n<li><code>Component(alias, label, technology, [descr], [sprite], [tags])<\/code>: B\u1ea3n \u0111\u1ed3 h\u00f3a m\u1ed9t module c\u1ea5p m\u00e3 ngu\u1ed3n n\u1ed9i b\u1ed9, l\u1edbp ho\u1eb7c b\u1ed9 \u0111i\u1ec1u khi\u1ec3n l\u1edbp.<\/li>\n<li><code>ComponentDb(alias, label, technology, [descr], [sprite], [tags])<\/code>: M\u00f4 h\u00ecnh h\u00f3a m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0u tr\u1eef th\u00e0nh ph\u1ea7n vi m\u00f4 n\u1ed9i b\u1ed9 ho\u1eb7c h\u1ec7 th\u1ed1ng b\u1ed9 nh\u1edb \u0111\u1ec7m t\u1ec7p c\u1ea5p th\u1ea5p.<\/li>\n<\/ul>\n<hr \/>\n<h2>C\u00e1c h\u1ed9p ranh gi\u1edbi v\u00e0 bao b\u1ecdc c\u1ea5u tr\u00fac<\/h2>\n<p>\u0110\u1ec3 ch\u1ec9 ra c\u00e1c khu v\u1ef1c b\u1ea3o m\u1eadt, t\u01b0\u1eddng l\u1eeda doanh nghi\u1ec7p ho\u1eb7c c\u00e1c ranh gi\u1edbi \u1ee9ng d\u1ee5ng logic, Mermaid cung c\u1ea5p ba l\u1edbp bao b\u1ecdc h\u1ed9p \u0111\u01b0\u1ee3c \u0111\u00f3ng trong d\u1ea5u ngo\u1eb7c vu\u00f4ng. C\u00e1c th\u00e0nh ph\u1ea7n n\u1eb1m b\u00ean trong \u0111\u01b0\u1ee3c nh\u00f3m l\u1ea1i v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c.<\/p>\n<ul>\n<li><code>Enterprise_Boundary(alias, label) { ... }<\/code>: Bao b\u1ecdc c\u00e1c h\u1ec7 th\u1ed1ng c\u1ea5p cao b\u00ean trong m\u1ed9t ranh gi\u1edbi tr\u1ef1c quan r\u1ed9ng, \u0111\u1ea1i di\u1ec7n cho vi\u1ec1n to\u00e0n b\u1ed9 c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng doanh nghi\u1ec7p ho\u1eb7c c\u00f4ng ty.<\/li>\n<li><code>System_Boundary(alias, label) { ... }<\/code>: Nh\u00f3m c\u00e1c container \u1ee9ng d\u1ee5ng ho\u1eb7c microservice li\u00ean quan ch\u1eb7t ch\u1ebd b\u00ean trong m\u1ed9t h\u1ed9p sinh th\u00e1i ph\u1ea7n m\u1ec1m th\u1ed1ng nh\u1ea5t.<\/li>\n<li><code>Container_Boundary(alias, label) { ... }<\/code>: T\u00e1ch bi\u1ec7t c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea5p m\u00e3 ngu\u1ed3n b\u00ean trong m\u1ed9t l\u1edbp ng\u1eef c\u1ea3nh module \u1ee9ng d\u1ee5ng duy nh\u1ea5t.<\/li>\n<\/ul>\n<hr \/>\n<h2>To\u00e1n t\u1eed h\u01b0\u1edbng quan h\u1ec7 n\u00e2ng cao<\/h2>\n<p>Vi\u1ec7c k\u1ebft n\u1ed1i c\u00e1c kh\u1ed1i trong s\u01a1 \u0111\u1ed3 C4 ph\u1ee5 thu\u1ed9c v\u00e0o <code>Rel<\/code>macro ho\u1eb7c c\u00e1c bi\u1ebfn th\u1ec3 h\u01b0\u1edbng r\u00f5 r\u00e0ng c\u1ee7a n\u00f3. Thay v\u00ec truy\u1ec1n c\u00e1c \u0111\u01b0\u1eddng s\u01a1 \u0111\u1ed3 lu\u1ed3ng th\u00f4, b\u1ea1n theo d\u00f5i c\u00e1c k\u1ebft n\u1ed1i v\u1ec1 m\u1eb7t ng\u1eef ngh\u0129a b\u1eb1ng c\u00e1ch khai b\u00e1o c\u00e1c vector c\u00f4ng ngh\u1ec7 tr\u1ef1c ti\u1ebfp b\u00ean trong c\u00e1c kh\u1ed1i logic.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>M\u00e3 \u0111\u1ecbnh d\u1ea1ng c\u00fa ph\u00e1p quan h\u1ec7<\/th>\n<th>H\u01b0\u1edbng m\u0169i t\u00ean tr\u1ef1c quan<\/th>\n<th>B\u1ed1i c\u1ea3nh c\u0103n ch\u1ec9nh s\u1eed d\u1ee5ng<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>Rel(from, to, label, [tech])<\/code><\/td>\n<td>\u0110\u1ed9ng \/ T\u1ef1 \u0111\u1ed9ng<\/td>\n<td>Quan h\u1ec7 m\u1eb7c \u0111\u1ecbnh. \u0110\u1ec3 thu\u1eadt to\u00e1n b\u1ed1 c\u1ee5c x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1eddng \u0111i t\u1ed1t nh\u1ea5t.<\/td>\n<\/tr>\n<tr>\n<td><code>BiRel(from, to, label, [tech])<\/code><\/td>\n<td>Hai chi\u1ec1u (&lt;\u2013&gt;)<\/td>\n<td>Ch\u1ec9 ra c\u00e1c thao t\u00e1c giao ti\u1ebfp hai chi\u1ec1u, giao th\u1ee9c song c\u00f4ng ho\u1eb7c c\u00e1c quy tr\u00ecnh \u0111\u1ed3ng b\u1ed9.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Back(from, to, label, [tech])<\/code><\/td>\n<td>M\u0169i t\u00ean ng\u01b0\u1ee3c l\u00ean tr\u00ean (&lt;\u2013)<\/td>\n<td>V\u1ebd quan h\u1ec7 theo h\u01b0\u1edbng ti\u1ebfn trong logic m\u00e3 ngu\u1ed3n nh\u01b0ng \u0111\u1ea3o ng\u01b0\u1ee3c m\u0169i t\u00ean tr\u1ef1c quan ng\u01b0\u1ee3c l\u1ea1i.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Neighbor(from, to, label, [tech])<\/code><\/td>\n<td>\u01afu ti\u00ean b\u1ed1 c\u1ee5c ngang<\/td>\n<td>B\u1eaft bu\u1ed9c n\u00fat \u0111\u00edch ph\u1ea3i n\u1eb1m ngay b\u00ean c\u1ea1nh n\u00fat ngu\u1ed3n tr\u00ean c\u00f9ng m\u1ed9t h\u00e0ng ngang.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Down(from, to, label, [tech])<\/code> \/ <code>Rel_D(...)<\/code><\/td>\n<td>Th\u1eb3ng xu\u1ed1ng d\u01b0\u1edbi (v)<\/td>\n<td>B\u1eaft bu\u1ed9c lu\u1ed3ng d\u1eef li\u1ec7u th\u1eb3ng \u0111\u1ee9ng \u0111i xu\u1ed1ng c\u00e1c l\u1edbp c\u01a1 s\u1edf d\u1eef li\u1ec7u ho\u1eb7c c\u00e1c quy tr\u00ecnh n\u1ec1n ti\u1ebfp theo.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Up(t\u1eeb, \u0111\u1ebfn, nh\u00e3n, [c\u00f4ng ngh\u1ec7])<\/code> \/ <code>Rel_U(...)<\/code><\/td>\n<td>Th\u1eb3ng l\u00ean tr\u00ean (^)<\/td>\n<td>C\u01b0\u1ee1ng ch\u1ebf c\u00e1c \u0111\u01b0\u1eddng quan h\u1ec7 di chuy\u1ec3n th\u1eb3ng l\u00ean c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng kh\u00e1ch h\u00e0ng.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Left(t\u1eeb, \u0111\u1ebfn, nh\u00e3n, [c\u00f4ng ngh\u1ec7])<\/code> \/ <code>Rel_L(...)<\/code><\/td>\n<td>Th\u1eb3ng sang tr\u00e1i (&lt;-)<\/td>\n<td>\u0110i\u1ec1u h\u01b0\u1edbng c\u00e1c \u0111\u01b0\u1eddng \u0111i theo chi\u1ec1u ngang v\u1ec1 ph\u00eda b\u00ean tr\u00e1i c\u1ee7a ph\u1ea7n t\u1eed b\u1ea3ng v\u1ebd.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Right(t\u1eeb, \u0111\u1ebfn, nh\u00e3n, [c\u00f4ng ngh\u1ec7])<\/code> \/ <code>Rel_R(...)<\/code><\/td>\n<td>Th\u1eb3ng sang ph\u1ea3i (-&gt;)<\/td>\n<td>\u0110i\u1ec1u h\u01b0\u1edbng c\u00e1c \u0111\u01b0\u1eddng \u0111i theo chi\u1ec1u ngang v\u1ec1 ph\u00eda b\u00ean ph\u1ea3i c\u1ee7a ph\u1ea7n t\u1eed b\u1ea3ng v\u1ebd.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Thi\u1ebft k\u1ebf phong c\u00e1ch \u0111\u1ed9ng t\u00f9y ch\u1ec9nh &amp; G\u1eafn th\u1ebb (Ghi \u0111\u00e8 h\u00ecnh d\u1ea1ng C4)<\/h2>\n<p>\u0110\u1ec3 \u0111\u00e1nh d\u1ea5u c\u00e1c \u1ee9ng d\u1ee5ng c\u0169, n\u1ed5i b\u1eadt c\u00e1c h\u1ec7 th\u1ed1ng cao c\u1ea5p ho\u1eb7c l\u00e0m n\u1ed5i b\u1eadt lu\u1ed3ng d\u1eef li\u1ec7u an to\u00e0n, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c phong c\u00e1ch t\u00f9y ch\u1ec9nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng b\u1ed9 \u0111\u1ed9ng c\u01a1 g\u1eafn th\u1ebb ph\u1ea7n t\u1eed. B\u1ea1n x\u00e1c \u0111\u1ecbnh ma tr\u1eadn thu\u1ed9c t\u00ednh th\u1ebb \u1edf \u0111\u1ea7u t\u00e0i li\u1ec7u c\u1ee7a m\u00ecnh, sau \u0111\u00f3 th\u00eam nh\u00e3n th\u1ebb \u0111\u00f3 v\u00e0o \u0111\u1ecbnh ngh\u0129a ph\u1ea7n t\u1eed c\u1ee7a b\u1ea1n.<\/p>\n<h3>T\u1eeb kh\u00f3a ch\u1ec9nh s\u1eeda phong c\u00e1ch:<\/h3>\n<ul>\n<li><code>UpdateElementStyle(t\u00eanPh\u1ea7nT\u1eed, m\u00e0uN\u1ec1n, m\u00e0uCh\u1eef, [m\u00e0uVi\u1ec1n], [b\u00f3ng])<\/code>: Ghi \u0111\u00e8 tr\u1ef1c ti\u1ebfp b\u1ea3ng m\u00e0u n\u1ec1n m\u1eb7c \u0111\u1ecbnh c\u1ee7a m\u1ed9t h\u1ed9p ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3.<\/li>\n<li><code>UpdateRelStyle(t\u1eeb, \u0111\u1ebfn, m\u00e0u\u0110\u01b0\u1eddngD\u1eabn, m\u00e0uCh\u1eef)<\/code>: Nh\u1eafm m\u1ee5c ti\u00eau r\u00f5 r\u00e0ng v\u00e0o m\u1ed9t tuy\u1ebfn k\u1ebft n\u1ed1i \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u \u0111\u01b0\u1eddng d\u1eabn ho\u1eb7c m\u00f4 t\u1ea3 k\u1ebft n\u1ed1i.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>\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:eNptUMFKw0AQvQv+w5BSUBARm4K9GgTvVfBW0s02uyTZhHSLzVF6KB6LeBQaehAPooIemqV42Op\/7J8423qoxYVhdpg3b948z\/VSIelQ7u4ASC5jCs6pqWYClhOj7iDipvoUIHNdEZCpngogpnocQKJnGNMBSD0vgDCjbgVzLIuNdtGXNNmLaeiTouNn\/ACcc6PGIBE4ESHE+oNj4QtmWUtk\/XpyEHRl1DM2FxByH5ipSitkOcKJSC8Onf0N8iQNaC46WZpLP8ZRz6h7xC0n3KibAUQM80hg1iVhwFB6aDd4+h1RImRWzpAmcE27WH6\/GvXAIdBz7NrR8cqCquS\/W23U63Cxce7agL6pXtCb3Kg3TNavzGIvs8CX9CymCRWyLYuY\/rWjFrSaDbdnJdV6q7f6klbj6JisV\/5DsX10rUm6J02yzeISn7rI8gNSzb0s\" \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\">C4Context\r\n  title \"B\u1ea3n \u0111\u1ed3 ki\u1ebfn tr\u00fac to\u00e0n c\u1ea7u m\u00e3 m\u00e0u t\u00f9y ch\u1ec9nh\"\r\n  \r\n  System(legacy_api, \"H\u1ec7 th\u1ed1ng l\u00f5i thanh to\u00e1n c\u0169\", \"X\u1eed l\u00fd gia h\u1ea1n \u0111\u0103ng k\u00fd.\")\r\n  System(modern_portal, \"C\u1ed5ng \u0111i\u1ec1u khi\u1ec3n kh\u00e1ch h\u00e0ng\", \"C\u00f4ng ngh\u1ec7 xem web ng\u01b0\u1eddi d\u00f9ng hi\u1ec7n \u0111\u1ea1i.\")\r\n  \r\n  %% T\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc tr\u1ef1c ti\u1ebfp\r\n  UpdateElementStyle(legacy_api, \"#d9534f\", \"#ffffff\", \"#c9302c\")\r\n  UpdateElementStyle(modern_portal, \"#5cb85c\", \"#ffffff\", \"#4cae4c\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUMFKw0AQvQv+w5BSUBARm4K9GgTvVfBW0s02uyTZhHSLzVF6KB6LeBQaehAPooIemqV42Op\/7J8423qoxYVhdpg3b948z\/VSIelQ7u4ASC5jCs6pqWYClhOj7iDipvoUIHNdEZCpngogpnocQKJnGNMBSD0vgDCjbgVzLIuNdtGXNNmLaeiTouNn\/ACcc6PGIBE4ESHE+oNj4QtmWUtk\/XpyEHRl1DM2FxByH5ipSitkOcKJSC8Onf0N8iQNaC46WZpLP8ZRz6h7xC0n3KibAUQM80hg1iVhwFB6aDd4+h1RImRWzpAmcE27WH6\/GvXAIdBz7NrR8cqCquS\/W23U63Cxce7agL6pXtCb3Kg3TNavzGIvs8CX9CymCRWyLYuY\/rWjFrSaDbdnJdV6q7f6klbj6JisV\/5DsX10rUm6J02yzeISn7rI8gNSzb0s\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"dwmLoBg\"><img alt=\"\" class=\"alignnone size-full wp-image-982\" decoding=\"async\" height=\"438\" sizes=\"(max-width: 877px) 100vw, 877px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png 877w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-300x150.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-768x384.png 768w\" width=\"877\"\/><\/p>\n<hr \/>\n<h2>B\u1ea3n v\u1ebd th\u1ef1c t\u1ebf: B\u1ea3n \u0111\u1ed3 v\u00f9ng gi\u1edbi h\u1ea1n h\u1ec7 th\u1ed1ng th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed doanh nghi\u1ec7p<\/h2>\n<p>B\u1ea3n v\u1ebd th\u00f9ng ch\u1ee9a to\u00e0n di\u1ec7n, \u0111a t\u1ea7ng n\u00e0y theo d\u00f5i m\u1ed9t h\u1ec7 sinh th\u00e1i th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed tr\u1ef1c tuy\u1ebfn. N\u00f3 t\u00e1ch bi\u1ec7t c\u00e1c m\u00e1y ch\u1ee7 l\u00f5i n\u1ed9i b\u1ed9 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1ed9t<code>H\u1ec7 th\u1ed1ng_Bi\u00ean gi\u1edbi<\/code>kh\u1ed1i ch\u1ee9a, tri\u1ec3n khai c\u00e1c b\u1ed9 ti\u1ebfp nh\u1eadn th\u00f4ng b\u00e1o \u0111\u00e1m m\u00e2y b\u00ean ngo\u00e0i th\u00f4ng qua<code>System_Ext<\/code>, \u00e1nh x\u1ea1 c\u00e1c kho l\u01b0u tr\u1eef c\u01a1 s\u1edf d\u1eef li\u1ec7u quan h\u1ec7 n\u1ed9i b\u1ed9 c\u00f9ng v\u1edbi c\u00e1c d\u1ecbch v\u1ee5 theo d\u00f5i vi m\u00f4 b\u00ean ngo\u00e0i, v\u00e0 c\u1ed1 \u0111\u1ecbnh c\u00e1c \u0111\u01b0\u1eddng truy\u1ec1n th\u00f4ng tin b\u1eb1ng c\u00e1c tham s\u1ed1 c\u00f4ng ngh\u1ec7 r\u00f5 r\u00e0ng.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>\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:eNp9VM9rE0EUvgv9Hx4BIYViL\/4DbVLUtsTYBO0tbGbH7NhkZrs7GxPEgycPItqDBxExoYhWLG39gXQH8bAl\/8f8J743u7FLW7y0y8ub9773fd97tZs1JbUnJI8WrgFoofscKqs23ZegA2HTPxp28C\/8SwMWKGhY8wwTKK0H7WB2PJvix8CmUwFne8Ka5\/SrOYS68mQAshdQLKwsXKMuTR7FSlZZEms14NESVBq92bE17wUMEg+CbILFdGTNCQOdjLG9rGDSJuW807CLOSybMuxnPjLwqUP+OcwmiDr7MoDYTRAGNj0YUFhBDxG8KmrvWHOKiYlNDzWmmj1g1nzCzta8vFFZJIytcaz5oLM20tXQGw+41J2ep\/ljb4xI6ta8YAEMsSmsNO9AS0ci5IRxA8npz44TB\/8Ie9jUgM4OJfiYjK272Rdi1poD6HoOcNeatzAisvrZb4TpKcrF+g5JCcuqSqTvReMqZ2qAvDHeiZkKOba9n51SbUHF+9lP8T9NKovwhKrCuabVhxF+cul3vDDEctZ8xqcF4ge8C7ccqrxGDWsUItHEDT7SNx7FS7DFPaYpUkvwFbPpxxAnn4hCC312gDrRwP9mdSKGgUNdlkfO3eDTWIUgZbgs4GxHJboT82goGL8gyRB9lP1ADsgZWmVTZ5+G8rkDujYKIx7HFNueQ9lNxihZ9hUflJE4Q6F6RZncM38uI6p3qyryedTxu0TAbEqu+kAMHkGfaEugZc0bwD3A\/ckOQjh7jfKcs9hUse5FvHVvs3D63EGOIz\/7hmBK1oB+\/i8m\/ATSpXUd0dQjpmYxxgIXVGSDQ13gfpq76vp1qNGrsz3HNq1c4RlN4R1afkmkpIzSt3i\/tLEXDLPNL68cFrbpL10wiTBOyBYOk4Od24vGvd1uN1vL7Zx+HxfePNc5VGzaqavH8oJBr9D\/FpYUOQ1lnsoKnN8WvCDUd711t7G8tdZq0xLnDedNt0Qv0Ff4rKTyXKTUURZkuGblzvmiI2w3Igq7vOGuqcRzI2C9vlo7H3GTP7yq2eXDs03z0fXAy+hmZQleDxwZD5fA0ukUd06445zLuo9XMtvHsb97tBvvBIGhk9XebC073mFFkrknsrL4F9K+kfw=\" \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\">C4Container\r\n  title \"B\u1ea3n thi\u1ebft k\u1ebf Container cho N\u1ec1n t\u1ea3ng Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed Doanh nghi\u1ec7p\"\r\n\r\n  Person(customer, \"Ng\u01b0\u1eddi mua h\u00e0ng tr\u1ef1c tuy\u1ebfn\", \"L\u01b0\u1edbt qua c\u00e1c m\u1ee5c danh m\u1ee5c v\u00e0 th\u00eam s\u1ea3n ph\u1ea9m v\u00e0o gi\u1ecf h\u00e0ng k\u1ef9 thu\u1eadt s\u1ed1 c\u1ee7a h\u1ecd.\")\r\n  System_Ext(payment_gateway, \"D\u1ecbch v\u1ee5 API Stripe\", \"Kho l\u01b0u tr\u1eef th\u1ebb t\u00edn d\u1ee5ng b\u00ean th\u1ee9 ba v\u00e0 b\u1ed9 x\u1eed l\u00fd giao d\u1ecbch.\")\r\n\r\n  System_Boundary(ecommerce_scope, \"V\u00f9ng bi\u00ean l\u00f5i Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed\") {\r\n    Container(frontend_app, \"\u1ee8ng d\u1ee5ng Web Giao di\u1ec7n C\u1eeda h\u00e0ng\", \"Next.js, React\", \"Cung c\u1ea5p t\u00e0i s\u1ea3n t\u0129nh v\u00e0 x\u1eed l\u00fd c\u00e1c phi\u00ean gi\u1ecf h\u00e0ng ng\u01b0\u1eddi d\u00f9ng.\")\r\n    Container(checkout_service, \"D\u1ecbch v\u1ee5 vi m\u00f4 Thanh to\u00e1n\", \"Node.js, Express\", \"X\u1eed l\u00fd quy tr\u00ecnh gi\u1ecf h\u00e0ng v\u00e0 t\u00ednh to\u00e1n thu\u1ebf.\")\r\n    ContainerDb(order_db, \"C\u01a1 s\u1edf d\u1eef li\u1ec7u S\u1ed5 ghi ch\u00e9p \u0110\u01a1n h\u00e0ng\", \"PostgreSQL\", \"L\u01b0u tr\u1eef c\u00e1c d\u00f2ng giao d\u1ecbch l\u1ecbch s\u1eed v\u00e0 c\u00e1c b\u1ea3n ghi s\u1ed5 s\u00e1ch b\u1ea3o m\u1eadt.\")\r\n  }\r\n\r\n  %% C\u00e1c \u0111\u01b0\u1eddng t\u01b0\u01a1ng t\u00e1c ki\u1ebfn tr\u00fac\r\n  Rel(customer, frontend_app, \"Xem s\u1ea3n ph\u1ea9m v\u00e0 \u0111\u1eb7t h\u00e0ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng\", \"HTTPS\/Tr\u00ecnh duy\u1ec7t\")\r\n  Rel_Down(frontend_app, checkout_service, \"G\u1eedi c\u00e1c giao d\u1ecbch d\u1eef li\u1ec7u mua h\u00e0ng qua\", \"JSON\/REST API\")\r\n  \r\n  Rel_Right(checkout_service, order_db, \"L\u01b0u tr\u1ea1ng th\u00e1i giao d\u1ecbch b\u00ean trong\", \"SQL\/K\u1ebft n\u1ed1i JDBC\")\r\n  Rel_Left(checkout_service, payment_gateway, \"X\u00e1c th\u1ef1c c\u00e1c cu\u1ed9c g\u1ecdi n\u1ea1p ti\u1ec1n \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a v\u1edbi\", \"API TLS\/HTTPS An to\u00e0n\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9VM9rE0EUvgv9Hx4BIYViL\/4DbVLUtsTYBO0tbGbH7NhkZrs7GxPEgycPItqDBxExoYhWLG39gXQH8bAl\/8f8J743u7FLW7y0y8ub9773fd97tZs1JbUnJI8WrgFoofscKqs23ZegA2HTPxp28C\/8SwMWKGhY8wwTKK0H7WB2PJvix8CmUwFne8Ka5\/SrOYS68mQAshdQLKwsXKMuTR7FSlZZEms14NESVBq92bE17wUMEg+CbILFdGTNCQOdjLG9rGDSJuW807CLOSybMuxnPjLwqUP+OcwmiDr7MoDYTRAGNj0YUFhBDxG8KmrvWHOKiYlNDzWmmj1g1nzCzta8vFFZJIytcaz5oLM20tXQGw+41J2ep\/ljb4xI6ta8YAEMsSmsNO9AS0ci5IRxA8npz44TB\/8Ie9jUgM4OJfiYjK272Rdi1poD6HoOcNeatzAisvrZb4TpKcrF+g5JCcuqSqTvReMqZ2qAvDHeiZkKOba9n51SbUHF+9lP8T9NKovwhKrCuabVhxF+cul3vDDEctZ8xqcF4ge8C7ccqrxGDWsUItHEDT7SNx7FS7DFPaYpUkvwFbPpxxAnn4hCC312gDrRwP9mdSKGgUNdlkfO3eDTWIUgZbgs4GxHJboT82goGL8gyRB9lP1ADsgZWmVTZ5+G8rkDujYKIx7HFNueQ9lNxihZ9hUflJE4Q6F6RZncM38uI6p3qyryedTxu0TAbEqu+kAMHkGfaEugZc0bwD3A\/ckOQjh7jfKcs9hUse5FvHVvs3D63EGOIz\/7hmBK1oB+\/i8m\/ATSpXUd0dQjpmYxxgIXVGSDQ13gfpq76vp1qNGrsz3HNq1c4RlN4R1afkmkpIzSt3i\/tLEXDLPNL68cFrbpL10wiTBOyBYOk4Od24vGvd1uN1vL7Zx+HxfePNc5VGzaqavH8oJBr9D\/FpYUOQ1lnsoKnN8WvCDUd711t7G8tdZq0xLnDedNt0Qv0Ff4rKTyXKTUURZkuGblzvmiI2w3Igq7vOGuqcRzI2C9vlo7H3GTP7yq2eXDs03z0fXAy+hmZQleDxwZD5fA0ukUd06445zLuo9XMtvHsb97tBvvBIGhk9XebC073mFFkrknsrL4F9K+kfw=\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Ch\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iepSRLk\"><img alt=\"\" class=\"alignnone size-full wp-image-983\" decoding=\"async\" height=\"863\" sizes=\"(max-width: 1746px) 100vw, 1746px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png 1746w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-300x148.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1024x506.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-768x380.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1536x759.png 1536w\" width=\"1746\"\/><\/p>\n<hr \/>\n<h2>Nh\u1eefng l\u1ed7i c\u00fa ph\u00e1p ph\u1ed5 bi\u1ebfn &amp; C\u00e1c gi\u1edbi h\u1ea1n h\u1ec7 th\u1ed1ng<\/h2>\n<p>Khi bi\u00ean d\u1ecbch c\u00e1c b\u1ea3n \u0111\u1ed3 C4 s\u1ea1ch cho c\u00e1c khung ph\u1ea7n m\u1ec1m, h\u00e3y l\u01b0u \u00fd nh\u1eefng tham s\u1ed1 th\u1ef1c thi n\u00e0y \u0111\u1ec3 tr\u00e1nh l\u00e0m h\u1ecfng s\u01a1 \u0111\u1ed3:<\/p>\n<ul>\n<li><strong>\u0110\u1ecbnh d\u1ea1ng d\u1ea5u ph\u1ea9y ng\u0103n c\u00e1ch:<\/strong> Kh\u00e1c v\u1edbi h\u1ea7u h\u1ebft c\u00e1c s\u01a1 \u0111\u1ed3 Mermaid kh\u00e1c, c\u00e1c macro C4 y\u00eau c\u1ea7u d\u1ea5u ph\u1ea9y nghi\u00eam ng\u1eb7t gi\u1eefa c\u00e1c tham s\u1ed1: <code>Person(id, \"Nh\u00e3n\", \"M\u00f4 t\u1ea3\")<\/code>. B\u1ecf qu\u00ean d\u1ea5u ph\u1ea9y ng\u0103n c\u00e1ch s\u1ebd khi\u1ebfn tr\u00ecnh x\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c b\u1ecb s\u1eadp ho\u00e0n to\u00e0n.<\/li>\n<li><strong>D\u1ea5u ngo\u1eb7c k\u00e9p cho nh\u00e3n \u0111\u00e3 \u0111\u01b0\u1ee3c b\u1ea3o l\u01b0u:<\/strong> C\u00e1c tr\u01b0\u1eddng hi\u1ec3n th\u1ecb, th\u1ebb c\u00f4ng ngh\u1ec7 v\u00e0 c\u00e1c kh\u1ed1i m\u00f4 t\u1ea3 b\u00ean trong macro *ph\u1ea3i* \u0111\u01b0\u1ee3c bao quanh b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p r\u00f5 r\u00e0ng. \u0110\u01b0a v\u0103n b\u1ea3n th\u00f4 v\u00e0o c\u00e1c tr\u01b0\u1eddng m\u00e0 kh\u00f4ng c\u00f3 bao b\u1ecdc b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p s\u1ebd g\u00e2y ra l\u1ed7i ph\u00e2n t\u00edch c\u00fa ph\u00e1p l\u00e0m h\u1ecfng s\u01a1 \u0111\u1ed3.<\/li>\n<li><strong>Th\u1ee9 t\u1ef1 l\u1ed3ng gh\u00e9p bi\u00ean gi\u1edbi:<\/strong> Khi bao b\u1ecdc c\u00e1c ph\u1ea7n t\u1eed b\u00ean trong m\u1ed9t <code>System_Boundary<\/code> ho\u1eb7c <code>Enterprise_Boundary<\/code> kh\u1ed1i, b\u1ea1n ph\u1ea3i l\u00e0m tr\u1ed1ng n\u1ed9i dung kh\u00f4ng gian l\u00e0m vi\u1ec7c c\u1ee7a n\u00f3 m\u1ed9t c\u00e1ch r\u00f5 r\u00e0ng b\u1eb1ng c\u00e1c d\u1ea5u ngo\u1eb7c nh\u1ecdn chu\u1ea9n <code>{ }<\/code>. \u0110\u1ec3 d\u1ea5u ngo\u1eb7c bi\u00ean gi\u1edbi m\u1edf ho\u1eb7c gh\u00e9p ch\u00fang sai s\u1ebd l\u00e0m h\u1ecfng b\u1ed1 c\u1ee5c hi\u1ec3n th\u1ecb.<\/li>\n<li><strong>Kh\u1edfi t\u1ea1o bi\u1ec7t danh \u0111\u1ed9ng:<\/strong> B\u1ea1n kh\u00f4ng th\u1ec3 v\u1ebd c\u00e1c m\u1ed1i quan h\u1ec7 (<code>Rel<\/code>) \u0111\u1ebfn m\u1ed9t \u0111\u1ecbnh danh bi\u1ec7t danh ch\u01b0a \u0111\u01b0\u1ee3c khai b\u00e1o r\u00f5 r\u00e0ng b\u1edfi m\u1ed9t kh\u1ed1i macro ph\u1ea7n t\u1eed ph\u00eda tr\u00ean n\u00f3. H\u00e3y duy tr\u00ec lu\u1ed3ng khai b\u00e1o c\u1ee7a b\u1ea1n ch\u1ea1y li\u00ean t\u1ee5c t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"S\u01a1 \u0111\u1ed3 C4 l\u00e0 m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p tr\u1ef1c quan h\u00f3a ki\u1ebfn tr\u00fac chu\u1ea9n h\u00f3a, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 m\u00f4 h\u00ecnh h\u00f3a c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m \u1edf nhi\u1ec1u c\u1ea5p \u0111\u1ed9 tr\u1eebu t\u01b0\u1ee3ng c\u1ea5u tr\u00fac kh\u00e1c nhau. \u0110\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n&#8230;","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":24,"template":"","meta":{"_yoast_wpseo_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","_yoast_wpseo_metadesc":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"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":""},"ld_collection":[14],"class_list":["post-2074","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\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.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"name\":\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"datePublished\":\"2026-07-08T06:48:07+00:00\",\"description\":\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ng\u1eef ph\u00e1p s\u01a1 \u0111\u1ed3 C4 c\u1ee7a Mermaid.js v\u00e0 H\u01b0\u1edbng d\u1eabn ki\u1ebfn tr\u00fac\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","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.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","name":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","datePublished":"2026-07-08T06:48:07+00:00","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/vn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/vn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Ng\u1eef ph\u00e1p s\u01a1 \u0111\u1ed3 C4 c\u1ee7a Mermaid.js v\u00e0 H\u01b0\u1edbng d\u1eabn ki\u1ebfn tr\u00fac"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/2074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2074"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}