{"id":2076,"date":"2026-07-08T06:20:18","date_gmt":"2026-07-08T06:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"},"modified":"2026-07-08T06:20:18","modified_gmt":"2026-07-08T06:20:18","slug":"mermaid-js-block-diagram-syntax-grid-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 kh\u1ed1i Mermaid.js v\u00e0 b\u1ed1 c\u1ee5c l\u01b0\u1edbi"},"content":{"rendered":"<p>S\u01a1 \u0111\u1ed3 kh\u1ed1i l\u00e0 m\u1ed9t b\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c c\u00f3 c\u1ea5u tr\u00fac \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 bi\u1ec3u di\u1ec5n c\u00e1c ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m ph\u1ee9c t\u1ea1p, c\u00e1c n\u1ec1n t\u1ea3ng ph\u1ea7n c\u1ee9ng ho\u1eb7c c\u00e1c m\u00f4 h\u00ecnh t\u1ed5 ch\u1ee9c. \u0110\u01b0\u1ee3c gi\u1edbi thi\u1ec7u s\u1eb5n trong Mermaid.js, b\u1ed9 ph\u1eadn<code>block<\/code>\u0111\u1ed9ng c\u01a1 x\u1eed l\u00fd b\u1ec1 m\u1eb7t b\u1ed1 c\u1ee5c nh\u01b0 m\u1ed9t ma tr\u1eadn l\u01b0\u1edbi to\u00e1n h\u1ecdc tuy\u1ec7t \u0111\u1ed1i. \u0110i\u1ec1u n\u00e0y cung c\u1ea5p ki\u1ec3m so\u00e1t ch\u00ednh x\u00e1c v\u1ec1 c\u0103n ch\u1ec9nh c\u1ed9t, c\u00e1c ranh gi\u1edbi l\u1ed3ng gh\u00e9p b\u1ed1 c\u1ee5c ri\u00eang bi\u1ec7t, c\u00e1c kh\u1ed1i kho\u1ea3ng c\u00e1ch c\u1ea5u tr\u00fac v\u00e0 c\u00e1c c\u1ea5u h\u00ecnh k\u1ebft n\u1ed1i c\u1ed5ng c\u1ea1nh r\u00f5 r\u00e0ng.<\/p>\n<h2>Hi\u1ec3u v\u1ec1 chi\u1ebfn l\u01b0\u1ee3c ma tr\u1eadn l\u01b0\u1edbi<\/h2>\n<p>Kh\u00e1c v\u1edbi c\u00e1c s\u01a1 \u0111\u1ed3 lu\u1ed3ng d\u1ea1ng t\u1ef1 do ti\u00eau chu\u1ea9n, n\u01a1i m\u00e0 b\u1ed1 c\u1ee5c \u0111\u01b0\u1ee3c suy \u0111o\u00e1n \u0111\u1ed9ng, s\u01a1 \u0111\u1ed3 kh\u1ed1i \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng tr\u00ean m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi t\u1ecda \u0111\u1ed9 tuy\u1ebfn t\u00ednh c\u1ee9ng nh\u1eafc:<\/p>\n<ul>\n<li><strong>Ng\u01b0\u1ee1ng c\u1ed9t:<\/strong>B\u1ea1n thi\u1ebft l\u1eadp m\u1ed9t tr\u1ea7n ngang nghi\u00eam ng\u1eb7t b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng<code>columns<\/code>tham s\u1ed1 \u0111i\u1ec1u ch\u1ec9nh. Khi l\u01b0\u1edbi \u0111\u1ea7y c\u00e1c kh\u1ed1i, c\u00e1c ph\u1ea7n t\u1eed b\u1ed5 sung s\u1ebd t\u1ef1 \u0111\u1ed9ng cu\u1ed9n sang h\u00e0ng ti\u1ebfp theo m\u1ed9t c\u00e1ch g\u1ecdn g\u00e0ng.<\/li>\n<li><strong>\u0110\u1ecbnh c\u1ee1 theo c\u00e1c tr\u01b0\u1eddng l\u01b0\u1edbi:<\/strong>M\u1eb7c \u0111\u1ecbnh, m\u1ed7i kh\u1ed1i chi\u1ebfm m\u1ed9t \u00f4 t\u1ecda \u0111\u1ed9 duy nh\u1ea5t ($1 times 1$). B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i h\u00e0nh vi n\u00e0y b\u1eb1ng c\u00e1ch g\u00e1n chi\u1ec1u r\u1ed9ng c\u1ed9t r\u00f5 r\u00e0ng \u0111\u1ec3 c\u00e1c ph\u1ea7n t\u1eed bao ph\u1ee7 ch\u00ednh x\u00e1c qua nhi\u1ec1u \u0111\u01b0\u1eddng d\u1eabn.<\/li>\n<\/ul>\n<h2>C\u1ea5u tr\u00fac c\u00fa ph\u00e1p c\u01a1 b\u1ea3n<\/h2>\n<p>M\u1ecdi b\u1ed1 c\u1ee5c \u0111\u1ec1u b\u1eaft \u0111\u1ea7u b\u1eb1ng<code>block<\/code>ti\u00eau \u0111\u1ec1 khai b\u00e1o. Ti\u1ebfp theo l\u00e0 vi\u1ec7c thi\u1ebft l\u1eadp dung l\u01b0\u1ee3ng chi\u1ec1u r\u1ed9ng h\u00e0ng b\u1eb1ng t\u1eeb kh\u00f3a<code>columns<\/code>v\u00e0 khai b\u00e1o c\u00e1c kh\u1ed1i tr\u00ean c\u00e1c d\u00f2ng li\u00ean ti\u1ebfp.<\/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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" 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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5W8Mx7unpipcGTiw13LSxVKMg+vylOKRVHkBFeUnvlw9\/pENGlnuHQSUK9CQcbDXYszlWIBBQ0wZg==\" \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\">block\r\n  columns 3\r\n  componentA[\"Kh\u1ed1i \u0111\u1ea7u ti\u00ean\"]\r\n  componentB[\"Kh\u1ed1i gi\u1eefa\"]\r\n  componentC[\"Kh\u1ed1i b\u00ean ph\u1ea3i\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5W8Mx7unpipcGTiw13LSxVKMg+vylOKRVHkBFeUnvlw9\/pENGlnuHQSUK9CQcbDXYszlWIBBQ0wZg==\" \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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" 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<p id=\"MVMmAKu\"><img alt=\"\" class=\"alignnone size-full wp-image-966\" decoding=\"async\" height=\"42\" sizes=\"(max-width: 321px) 100vw, 321px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png 321w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466-300x39.png 300w\" width=\"321\"\/><\/p>\n<h2>Tham chi\u1ebfu c\u00fa ph\u00e1p<\/h2>\n<p>B\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y ph\u00e2n t\u00edch c\u00e1c tham s\u1ed1 d\u1eef li\u1ec7u n\u1ec1n t\u1ea3ng, c\u00e1c t\u1eeb kh\u00f3a \u0111\u1ecbnh d\u1ea1ng t\u00f9y ch\u1ec9nh v\u00e0 c\u00e1c container c\u1ea5u tr\u00fac \u0111\u01b0\u1ee3c b\u1ed9 th\u00f4ng d\u1ecbch kh\u1ed1i nh\u1eadn di\u1ec7n m\u1ed9t c\u00e1ch t\u1ef1 nhi\u00ean.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Th\u00e0nh ph\u1ea7n c\u00fa ph\u00e1p<\/th>\n<th>Y\u00eau c\u1ea7u ki\u1ec3u<\/th>\n<th>M\u00f4 t\u1ea3 v\u00e0 quy t\u1eafc b\u1ed1 c\u1ee5c h\u00ecnh \u1ea3nh<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Khai b\u00e1o<\/strong><\/td>\n<td>\u0110\u1ecbnh danh t\u1eeb kh\u00f3a<\/td>\n<td>Kh\u1edfi t\u1ea1o b\u1ec1 m\u1eb7t canvas kh\u1ed1i ma tr\u1eadn l\u01b0\u1edbi. Ph\u1ea3i s\u1eed d\u1ee5ng ch\u00ednh x\u00e1c<code>kh\u1ed1i<\/code> chu\u1ed7i ti\u00eau \u0111\u1ec1.<\/td>\n<\/tr>\n<tr>\n<td><strong>B\u1ed9 c\u1ed9t<\/strong><\/td>\n<td>T\u1eeb kh\u00f3a + S\u1ed1 nguy\u00ean<\/td>\n<td>X\u00e1c \u0111\u1ecbnh t\u1ed5ng s\u1ed1 khe ngang tr\u01b0\u1edbc khi chuy\u1ec3n d\u00f2ng (v\u00ed d\u1ee5: <code>c\u1ed9t 4<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Kh\u1ed1i chu\u1ea9n<\/strong><\/td>\n<td>ID + Nh\u00e3n t\u00f9y ch\u1ecdn<\/td>\n<td>T\u1ea1o m\u1ed9t h\u1ed9p d\u1eef li\u1ec7u chu\u1ea9n: <code>id[\"V\u0103n b\u1ea3n nh\u00e3n\"]<\/code>. C\u00e1c b\u1ed9 trang tr\u00ed h\u00ecnh d\u1ea1ng tu\u00e2n theo c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 lu\u1ed3ng (v\u00ed d\u1ee5: <code>(())<\/code> cho h\u00ecnh tr\u00f2n, <code>[()]<\/code> cho c\u01a1 s\u1edf d\u1eef li\u1ec7u).<\/td>\n<\/tr>\n<tr>\n<td><strong>Ghi \u0111\u00e8 k\u00edch th\u01b0\u1edbc kh\u1ed1i<\/strong><\/td>\n<td>Kh\u1ed1i tham s\u1ed1 d\u1ea5u hai ch\u1ea5m<\/td>\n<td>Ghi \u0111\u00e8 k\u00edch th\u01b0\u1edbc l\u01b0\u1edbi b\u1ed1 c\u1ee5c m\u1eb7c \u0111\u1ecbnh $1 times 1$ b\u1eb1ng c\u00e1ch g\u00e1n r\u00f5 r\u00e0ng c\u00e1c kh\u1ed1i chi\u1ec1u r\u1ed9ng c\u1ed9t t\u00f9y ch\u1ec9nh: <code>id:chi\u1ec1u r\u1ed9ng<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Y\u1ebfu t\u1ed1 kho\u1ea3ng c\u00e1ch<\/strong><\/td>\n<td>T\u1eeb kh\u00f3a \u0111\u01b0\u1ee3c b\u1ea3o l\u01b0u<\/td>\n<td>Ch\u00e8n m\u1ed9t \u00f4 kho\u1ea3ng c\u00e1ch tr\u1ed1ng v\u00f4 h\u00ecnh, c\u1ea5u tr\u00fac $1 times 1$ v\u00e0o h\u00e0ng \u0111ang ho\u1ea1t \u0111\u1ed9ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng ch\u00ednh x\u00e1c t\u1eeb kh\u00f3a <code>space<\/code> keyword. B\u1ea1n c\u00f3 th\u1ec3 nh\u00e2n \u0111\u1ed9 r\u1ed9ng c\u00e1c kho\u1ea3ng c\u00e1ch ngay tr\u00ean d\u00f2ng nh\u01b0 <code>space:2<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>M\u0169i t\u00ean kh\u1ed1i<\/strong><\/td>\n<td>ID th\u1ef1c th\u1ec3 chuy\u00ean bi\u1ec7t<\/td>\n<td>Hi\u1ec3n th\u1ecb m\u1ed9t h\u1ed9p m\u0169i t\u00ean chuy\u1ec3n ti\u1ebfp d\u00e0y, c\u00f3 c\u1ea5u tr\u00fac b\u00ean trong m\u1ed9t \u00f4 l\u01b0\u1edbi: <code>arrowId&lt;[\"Nh\u00e3n\"]&gt;(h\u01b0\u1edbng)<\/code>. C\u00e1c h\u01b0\u1edbng bao g\u1ed3m <code>l\u00ean<\/code>, <code>xu\u1ed1ng<\/code>, <code>tr\u00e1i<\/code>, <code>ph\u1ea3i<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bao b\u1ecdc t\u1ed5ng h\u1ee3p<\/strong><\/td>\n<td>Kh\u1ed1i \/ Kh\u1ed1i k\u1ebft th\u00fac<\/td>\n<td>Ch\u00e8n m\u1ed9t ma tr\u1eadn l\u01b0\u1edbi con \u0111\u1ed9c l\u1eadp, t\u00e1ch bi\u1ec7t tr\u1ef1c ti\u1ebfp b\u00ean trong m\u1ed9t \u00f4 kh\u1ed1i cha: <code>block:SubID ... end<\/code>. C\u00e1c kh\u1ed1i con c\u00f3 th\u1ec3 khai b\u00e1o gi\u1edbi h\u1ea1n c\u1ed9t \u0111\u1ed9c l\u1eadp c\u1ee7a ri\u00eang ch\u00fang.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>T\u00ednh n\u0103ng n\u00e2ng cao: K\u00edch th\u01b0\u1edbc kh\u1ed1i r\u00f5 r\u00e0ng &amp; B\u1ed9 \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch<\/h2>\n<p>\u0110\u1ed1i v\u1edbi b\u1ed1 c\u1ee5c b\u1ea5t \u0111\u1ed1i x\u1ee9ng, b\u1ea1n c\u00f3 th\u1ec3 truy\u1ec1n c\u00e1c th\u00f4ng s\u1ed1 k\u00edch th\u01b0\u1edbc ngang r\u00f5 r\u00e0ng tr\u1ef1c ti\u1ebfp l\u00ean c\u00e1c kh\u1ed1i chu\u1ea9n ho\u1eb7c b\u1ed9 chia kho\u1ea3ng c\u00e1ch b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng k\u00fd hi\u1ec7u d\u1ea5u hai ch\u1ea5m l\u00e0m d\u1ea5u ph\u00e2n c\u00e1ch (<code>:chi\u1ec1u r\u1ed9ng<\/code>). \u0110i\u1ec1u n\u00e0y bu\u1ed9c c\u00e1c ph\u1ea7n t\u1eed ph\u1ea3i k\u00e9o d\u00e0i qua nhi\u1ec1u v\u1ecb tr\u00ed l\u01b0\u1edbi m\u1ed9t c\u00e1ch 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><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" 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:eNpLyslPzublUlBIfrh7ZomCCYhZnpmS6pyfW5Cfl5pXEq0Uknl4VanCkYkPdzcqOD3ctTgvHcjJBPJKFbIzgHRznkIRUHNeulKsFVh\/TmpaiVNiEVBnRmJehkLS4VV5SrEKxQWJyalWRgpFmekZEGmoYckZh9fmZSjFAgBYzDhL\" \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\">block\r\n  c\u1ed9t 4\r\n  wideComponent[\"Ti\u00eau \u0111\u1ec1 B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n r\u1ed9ng\"]:4\r\n  leftBar[\"Thanh b\u00ean\"] space:2 rightBar[\"B\u1ea3ng ch\u00ednh\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIfrh7ZomCCYhZnpmS6pyfW5Cfl5pXEq0Uknl4VanCkYkPdzcqOD3ctTgvHcjJBPJKFbIzgHRznkIRUHNeulKsFVh\/TmpaiVNiEVBnRmJehkLS4VV5SrEKxQWJyalWRgpFmekZEGmoYckZh9fmZSjFAgBYzDhL\" \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:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" 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<p id=\"ZuoRoRz\"><img alt=\"\" class=\"alignnone size-full wp-image-967\" decoding=\"async\" height=\"82\" sizes=\"(max-width: 372px) 100vw, 372px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png 372w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a-300x66.png 300w\" width=\"372\"\/><\/p>\n<hr\/>\n<h2>T\u00ednh n\u0103ng n\u00e2ng cao: Lo\u1ea1i c\u1ea1nh, H\u01b0\u1edbng v\u00e0 T\u00f9y ch\u1ecdn k\u1ebft n\u1ed1i<\/h2>\n<p>C\u00e1c k\u1ebft n\u1ed1i b\u00ean trong <code>block<\/code>\u0111\u1ed9ng c\u01a1 \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c \u0111\u01b0\u1eddng ng\u1eef ngh\u0129a chu\u1ea9n v\u00e0 c\u00e1c m\u0169i t\u00ean kh\u1ed1i b\u1ed1 c\u1ee5c c\u1ea5u tr\u00fac. C\u00e1c \u0111\u01b0\u1eddng k\u1ebft n\u1ed1i chu\u1ea9n h\u1ed7 tr\u1ee3 x\u00e1c \u0111\u1ecbnh r\u00e0ng bu\u1ed9c h\u01b0\u1edbng r\u00f5 r\u00e0ng \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh c\u00e1ch c\u00e1c \u0111\u01b0\u1eddng bao quanh c\u00e1c ph\u1ea7n t\u1eed.<\/p>\n<h3>1. B\u1ed9 n\u1ed1i \u0111\u01b0\u1eddng chu\u1ea9n<\/h3>\n<p>C\u00e1c k\u1ebft n\u1ed1i kh\u1ed1i s\u1eed d\u1ee5ng c\u00e1c to\u00e1n t\u1eed li\u00ean k\u1ebft chu\u1ea9n (<code>--&gt;<\/code>, <code>--<\/code>, <code>&lt;--&gt;<\/code>). Tuy nhi\u00ean, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u khi\u1ec3n lu\u1ed3ng b\u1eb1ng c\u00e1ch th\u00eam h\u01b0\u1edbng \u0111i ho\u1eb7c tham s\u1ed1 \u0111i\u1ec1u ch\u1ec9nh b\u00ean trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> : V\u1ebd m\u1ed9t \u0111\u01b0\u1eddng h\u01b0\u1edbng \u0111i ti\u00eau chu\u1ea9n t\u1eeb ph\u1ea7n t\u1eed A \u0111\u1ebfn ph\u1ea7n t\u1eed B.<\/li>\n<li><code>A -- x B<\/code> : V\u1ebd m\u1ed9t \u0111\u01b0\u1eddng k\u1ebft n\u1ed1i k\u1ebft th\u00fac b\u1eb1ng d\u1ea5u \u201cX\u201d cho th\u1ea5y \u0111\u01b0\u1eddng \u0111i b\u1ecb ch\u1eb7n.<\/li>\n<li><code>A -- o B<\/code> : V\u1ebd m\u1ed9t \u0111\u01b0\u1eddng k\u1ebft n\u1ed1i k\u1ebft th\u00fac b\u1eb1ng \u0111i\u1ec3m n\u1ed1i h\u00ecnh tr\u00f2n m\u1edf.<\/li>\n<\/ul>\n<h3>2. M\u0169i t\u00ean kh\u1ed1i b\u1ed1 c\u1ee5c \u0111\u1ed9ng<\/h3>\n<p>M\u0169i t\u00ean kh\u1ed1i \u0111\u01b0\u1ee3c x\u1eed l\u00fd nh\u01b0 c\u00e1c th\u00e0nh ph\u1ea7n b\u1ed1 c\u1ee5c th\u1ef1c t\u1ebf, chi\u1ebfm m\u1ed9t kh\u1ed1i ch\u1ec9 s\u1ed1 t\u1ecda \u0111\u1ed9 th\u1ef1c t\u1ebf trong ma tr\u1eadn ng\u00e2n s\u00e1ch h\u00e0ng c\u1ee7a b\u1ea1n. Ch\u00fang s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh c\u00fa ph\u00e1p l\u1edbn h\u01a1n v\u00e0 nh\u1ecf h\u01a1n \u0111\u1ec3 \u00e1nh x\u1ea1 c\u00e1c \u0111\u01b0\u1eddng \u0111i v\u1eadt l\u00fd:<\/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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" 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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopX80o9teLh7bqZC8cNdi\/MUKkof7lpaouDycPd6hZzMh7vbS5ViQRpyM1Mci4ryy22ilZwzSisf7m7OUzgy8eHuqZkKPsc2lCrkgExZnJeuFGunUZSZnlGiCbEzr7g0F8WakszDq0oVSjIe7l6KagsAR6FJfg==\" \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\">block\r\n  columns 3\r\n  producer[\"Ng\u01b0\u1eddi s\u1ea3n xu\u1ea5t D\u1eef li\u1ec7u\"]\r\n  midArrow&lt;[\"Chuy\u1ec3n \u0111\u1ed5i L\u01b0u l\u01b0\u1ee3ng\"]&gt;(right)\r\n  consumer[\"Ng\u01b0\u1eddi ti\u00eau th\u1ee5 D\u1eef li\u1ec7u\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopX80o9teLh7bqZC8cNdi\/MUKkof7lpaouDycPd6hZzMh7vbS5ViQRpyM1Mci4ryy22ilZwzSisf7m7OUzgy8eHuqZkKPsc2lCrkgExZnJeuFGunUZSZnlGiCbEzr7g0F8WakszDq0oVSjIe7l6KagsAR6FJfg==\" \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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" 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<p id=\"uiUqlGG\"><img alt=\"\" class=\"alignnone size-full wp-image-968\" decoding=\"async\" height=\"50\" sizes=\"(max-width: 477px) 100vw, 477px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png 477w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30-300x31.png 300w\" width=\"477\"\/><\/p>\n<hr\/>\n<h2>T\u00ednh n\u0103ng n\u00e2ng cao: \u0110\u00f3ng g\u00f3i ma tr\u1eadn kh\u1ed1i con (Nh\u00f3m h\u1ee3p th\u00e0nh)<\/h2>\n<p>Ph\u1ea7n <code>block:id<\/code>b\u1ecdc ch\u1ee9c n\u0103ng nh\u01b0 m\u1ed9t m\u00f4i tr\u01b0\u1eddng ng\u1eef c\u1ea3nh h\u1ed9p b\u1ed1 c\u1ee5c t\u00e1ch bi\u1ec7t. M\u1ed9t container nh\u00f3m \u1ee9ng d\u1ee5ng c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp s\u1ed1 c\u1ed9t ngang ri\u00eang bi\u1ec7t b\u00ean trong m\u1ed9t kh\u1ed1i con, cho ph\u00e9p c\u00e1c th\u00e0nh ph\u1ea7n ph\u1ee9c t\u1ea1p \u0111\u01b0\u1ee3c nh\u00f3m ch\u1eb7t ch\u1ebd m\u00e0 kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn kho\u1ea3ng c\u00e1ch c\u1ee7a l\u01b0\u1edbi b\u1ed1 c\u1ee5c m\u1eabu canvas cha to\u00e0n c\u1ee5c.<\/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:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" 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:eNpLyslPzublUlBIzs8pzc0rVjACcYry80vcE0tSyxMro5WcH+6empeuUJJ\/eEGeQvLDXctLlWJBikA4CaTdKjczuSi\/OLWoLDM51TmntLgktQgkiTDUGMJNLC3JiFbyO7yrRCHi8MJkhZKMh7s3JkNMA8oWZEYrOQZ4Kvgc3poJEyzPL8pOLYpWOjLh4e6ZQFckH1uo4Jd+bMPD3XMzFXIOL8hVKMt8uLsdakhqXgoA\/+1L9Q==\" \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\">block\r\n  columns 2\r\n  rootGateway[\"C\u1ed5ng to\u00e0n c\u1ea7u\"]\r\n  \r\n  block:microserviceCluster\r\n    columns 3\r\n    auth[\"N\u00fat X\u00e1c th\u1ef1c\"]\r\n    api[\"API L\u00f5i\"]\r\n    worker[\"\u0110\u1ed9ng c\u01a1 Ng\u01b0\u1eddi l\u00e0m vi\u1ec7c\"]\r\n  end<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjACcYry80vcE0tSyxMro5WcH+6empeuUJJ\/eEGeQvLDXctLlWJBikA4CaTdKjczuSi\/OLWoLDM51TmntLgktQgkiTDUGMJNLC3JiFbyO7yrRCHi8MJkhZKMh7s3JkNMA8oWZEYrOQZ4Kvgc3poJEyzPL8pOLYpWOjLh4e6ZQFckH1uo4Jd+bMPD3XMzFXIOL8hVKMt8uLsdakhqXgoA\/+1L9Q==\" \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:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" 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<p id=\"kcZGAdG\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-969\" decoding=\"async\" height=\"58\" loading=\"lazy\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png 747w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8-300x23.png 300w\" width=\"747\"\/><\/p>\n<hr\/>\n<h2>B\u1ea3n thi\u1ebft k\u1ebf th\u1ef1c t\u1ebf: C\u01a1 s\u1edf h\u1ea1 t\u1ea7ng \u0111a t\u1ea7ng v\u1edbi b\u1ed9 nh\u1edb \u0111\u1ec7m<\/h2>\n<p>B\u1ea3n thi\u1ebft k\u1ebf to\u00e0n di\u1ec7n, \u0111a h\u00e0ng n\u00e0y minh h\u1ecda m\u1ed9t c\u1ea5u h\u00ecnh c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng s\u1ea3n xu\u1ea5t s\u1ea1ch s\u1ebd. N\u00f3 thi\u1ebft l\u1eadp b\u1ed1 c\u1ee5c l\u01b0\u1edbi x\u1eed l\u00fd 3 c\u1ed9t, s\u1eed d\u1ee5ng c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea5u tr\u00fac<code>space<\/code> c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ec3 t\u00e1ch bi\u1ec7t t\u1ea7ng c\u01a1 s\u1edf d\u1eef li\u1ec7u, \u00e1nh x\u1ea1 m\u1ed9t \u0111\u01b0\u1eddng \u0111i d\u00e0y xu\u1ed1ng ph\u00eda d\u01b0\u1edbi<code>blockArrow<\/code>, v\u00e0 t\u00e1ch bi\u1ec7t m\u1ed9t b\u1ed9 ch\u1ee9a h\u1ec7 th\u1ed1ng con n\u1ed9i b\u1ed9 ri\u00eang bi\u1ec7t b\u1eb1ng c\u00e1ch nh\u00fang <code>block:id ... end<\/code> bao b\u1ecdc t\u1ed5ng h\u1ee3p.<\/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:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" 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:eNptUk1LJDEQvQv+h6JBmDl4UG\/DIuyOHkQFV4VdGOaQzoTuYCZpOsmo5z2I7GlY9rjsuIOIgqigl87BQwb\/R\/6JlWn8GNlDp0nVq\/dePZIKRQ\/m5wCoErYvNazMz8XrwgLsqkNYasFacD9pDoPgzmEyDNWFhYEfqQjqSd0WnEnTaCSbuT9DWO5HMoNvLE2azQgRivS+EEEkZWUnaft\/EtJQ3SHGhGrMIeX+SibdCNUFoWxGfbkFWza4X4g+CNWjARnckKMLDkdYH2Kdoipsc1oqzcoBp0y\/o0KH6lDuKmvYJxTP7XFwPyQYjmQFiKdbG4\/gxjJLuquNCG7+38lKCzbzqXjf33MwZRz7g\/rBXeLZw3CmK7nf+EPguIjDaQy3RYqiLaw2rIy1t6SX6yuxJt+rvXeS73EdgwR3tA4F+wVflxmX2N2PzCD8qA8DHtwJhc87G0DRl8HqA69HmOzNZkAMSYlmnUbSfjoDHdzfaPgGROSwsKO0yUq293UraXZft97P+TRyEarroo55MnzZmk4wRopuTmWO+tW5xUh8RaH0D\/jFJ5Ah+Q2pB\/sE28gjP74IWFxchdl83m7T5ov5Z6SbCGY=\" \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\">block\r\n  columns 3\r\n\r\n  %% Row 1: D\u1ecbch v\u1ee5 \u0111\u1ea7u v\u00e0o\r\n  dnsClient((\"Kh\u00e1ch h\u00e0ng Web\"))\r\n  loadBalancer[\"C\u00e2n b\u1eb1ng t\u1ea3i bi\u00ean\"]\r\n  space\r\n\r\n  %% Row 2: Lu\u1ed3ng k\u1ebft n\u1ed1i \u0111i xu\u1ed1ng c\u00e1c Microservices\r\n  space\r\n  downRoute&lt;[\"Chuy\u1ec3n ti\u1ebfp l\u01b0u l\u01b0\u1ee3ng\"]&gt;(down)\r\n  space\r\n\r\n  %% Row 3: Kh\u1ed1i m\u00f4i tr\u01b0\u1eddng \u1ee9ng d\u1ee5ng t\u1ed5ng h\u1ee3p\r\n  block:appCluster\r\n    columns 2\r\n    authService[\"X\u00e1c th\u1ef1c\"]\r\n    apiEngine[\"Th\u1ee3 l\u00e0m vi\u1ec7c API c\u1ed1t l\u00f5i\"]\r\n  end\r\n  space\r\n  database[(\"C\u01a1 s\u1edf d\u1eef li\u1ec7u PostgreSQL\")]\r\n\r\n  %% Thi\u1ebft l\u1eadp c\u00e1c \u0111\u01b0\u1eddng c\u0103n ch\u1ec9nh c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c ma tr\u1eadn\r\n  loadBalancer --&gt; appCluster\r\n  appCluster --&gt; database<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUk1LJDEQvQv+h6JBmDl4UG\/DIuyOHkQFV4VdGOaQzoTuYCZpOsmo5z2I7GlY9rjsuIOIgqigl87BQwb\/R\/6JlWn8GNlDp0nVq\/dePZIKRQ\/m5wCoErYvNazMz8XrwgLsqkNYasFacD9pDoPgzmEyDNWFhYEfqQjqSd0WnEnTaCSbuT9DWO5HMoNvLE2azQgRivS+EEEkZWUnaft\/EtJQ3SHGhGrMIeX+SibdCNUFoWxGfbkFWza4X4g+CNWjARnckKMLDkdYH2Kdoipsc1oqzcoBp0y\/o0KH6lDuKmvYJxTP7XFwPyQYjmQFiKdbG4\/gxjJLuquNCG7+38lKCzbzqXjf33MwZRz7g\/rBXeLZw3CmK7nf+EPguIjDaQy3RYqiLaw2rIy1t6SX6yuxJt+rvXeS73EdgwR3tA4F+wVflxmX2N2PzCD8qA8DHtwJhc87G0DRl8HqA69HmOzNZkAMSYlmnUbSfjoDHdzfaPgGROSwsKO0yUq293UraXZft97P+TRyEarroo55MnzZmk4wRopuTmWO+tW5xUh8RaH0D\/jFJ5Ah+Q2pB\/sE28gjP74IWFxchdl83m7T5ov5Z6SbCGY=\" \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:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" 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<p id=\"nAmZcPX\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-970\" decoding=\"async\" height=\"284\" loading=\"lazy\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png 838w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-300x102.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-768x260.png 768w\" width=\"838\"\/><\/p>\n<hr\/>\n<h2>Nh\u1eefng l\u1ed7i c\u00fa ph\u00e1p ph\u1ed5 bi\u1ebfn &amp; Gi\u1edbi h\u1ea1n h\u1ec7 th\u1ed1ng<\/h2>\n<p>Khi bi\u00ean d\u1ecbch c\u00e1c b\u1ea3n \u0111\u1ed3 ma tr\u1eadn l\u01b0\u1edbi ch\u00ednh x\u00e1c, h\u00e3y l\u01b0u \u00fd c\u00e1c ki\u1ec3m tra x\u00e1c th\u1ef1c sau \u0111\u1ec3 tr\u00e1nh l\u1ed7i ph\u00e2n t\u00edch c\u00fa ph\u00e1p:<\/p>\n<ul>\n<li><strong>Th\u1ef1c thi ng\u00e2n s\u00e1ch c\u1ed9t:<\/strong>H\u00e3y theo d\u00f5i c\u1ea9n th\u1eadn s\u1ed1 l\u01b0\u1ee3ng c\u1ed9t c\u1ee7a b\u1ea1n. N\u1ebfu b\u1ea1n ch\u1ec9 \u0111\u1ecbnh <code>columns 3<\/code> v\u00e0 vi\u1ebft 4 kh\u1ed1i tu\u1ea7n t\u1ef1 tr\u00ean m\u1ed9t h\u00e0ng, kh\u1ed1i th\u1ee9 t\u01b0 s\u1ebd t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n xu\u1ed1ng h\u00e0ng th\u1ee9 2, \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0m h\u1ecfng c\u00e1c \u0111\u01b0\u1eddng k\u1ebft n\u1ed1i theo chi\u1ec1u tr\u00e1i sang ph\u1ea3i mong mu\u1ed1n.<\/li>\n<li><strong>Th\u1ee9 t\u1ef1 l\u1ed3ng gh\u00e9p t\u1ed5ng h\u1ee3p:<\/strong> Khi x\u00e2y d\u1ef1ng c\u00e1c b\u1ed9 ch\u1ee9a b\u00ean trong b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <code>block:id<\/code>, b\u1ea1n lu\u00f4n ph\u1ea3i \u0111\u00f3ng k\u00edn kh\u00f4ng gian l\u00e0m vi\u1ec7c l\u01b0\u1edbi con b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a <code>end<\/code> tr\u00ean m\u1ed9t d\u00f2ng ri\u00eang bi\u1ec7t tr\u01b0\u1edbc khi khai b\u00e1o c\u00e1c ph\u1ea7n t\u1eed ti\u1ebfp theo. Kh\u00f4ng \u0111\u00f3ng kh\u1ed1i s\u1ebd l\u00e0m d\u1eebng vi\u1ec7c x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3.<\/li>\n<li><strong>H\u1ea1n ch\u1ebf m\u1ee5c ti\u00eau m\u0169i t\u00ean kh\u1ed1i:<\/strong> Thu\u1ed9c t\u00ednh h\u01b0\u1edbng \u0111\u01b0\u1ee3c \u0111\u00f3ng trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n sau m\u0169i t\u00ean kh\u1ed1i (v\u00ed d\u1ee5 nh\u01b0 <code>(up)<\/code>, <code>(down)<\/code>) ph\u1ea3i l\u00e0 m\u1ed9t t\u1eeb kh\u00f3a vi\u1ebft th\u01b0\u1eddng kh\u1edbp ch\u00ednh x\u00e1c v\u1edbi t\u1eeb kh\u00f3a h\u1ec7 th\u1ed1ng. Vi\u1ebft hoa t\u1eeb h\u01b0\u1edbng s\u1ebd d\u1eabn \u0111\u1ebfn l\u1ed7i x\u1eed l\u00fd.<\/li>\n<li><strong>Xung \u0111\u1ed9t bi\u00ean nh\u00e3n:<\/strong> C\u00e1c b\u1ed9 trang tr\u00ed h\u00ecnh d\u1ea1ng s\u01a1 \u0111\u1ed3 lu\u1ed3ng chu\u1ea9n (nh\u01b0 d\u1ea5u ngo\u1eb7c \u0111\u01a1n <code>()<\/code> cho c\u00e1c h\u1ed9p tr\u00f2n ho\u1eb7c d\u1ea5u ngo\u1eb7c nh\u1ecdn <code>{}<\/code> \u0111\u1ed1i v\u1edbi kim c\u01b0\u01a1ng) \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 ho\u00e0n to\u00e0n. \u0110\u1ea3m b\u1ea3o t\u1ea5t c\u1ea3 nh\u00e3n v\u0103n b\u1ea3n hi\u1ec3n th\u1ecb b\u00ean trong c\u00e1c h\u00ecnh d\u1ea1ng s\u1eed d\u1ee5ng d\u1ea5u ngo\u1eb7c k\u00e9p s\u1ea1ch \u0111\u1ec3 tr\u00e1nh lo\u1ea1i b\u1ecf k\u00fd t\u1ef1.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>S\u01a1 \u0111\u1ed3 kh\u1ed1i l\u00e0 m\u1ed9t b\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c c\u00f3 c\u1ea5u tr\u00fac \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 bi\u1ec3u di\u1ec5n c\u00e1c ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m ph\u1ee9c t\u1ea1p, c\u00e1c n\u1ec1n t\u1ea3ng ph\u1ea7n c\u1ee9ng ho\u1eb7c c\u00e1c m\u00f4 h\u00ecnh t\u1ed5 ch\u1ee9c. \u0110\u01b0\u1ee3c gi\u1edbi thi\u1ec7u&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":22,"template":"","meta":{"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":""}}},"ld_collection":[14],"class_list":["post-2076","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 Block Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free 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-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-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_6a4ded6cdf466.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-block-diagram-syntax-grid-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"name\":\"Mermaid Block Diagram 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-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"datePublished\":\"2026-07-08T06:20:18+00:00\",\"description\":\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-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\":\"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 kh\u1ed1i Mermaid.js v\u00e0 b\u1ed1 c\u1ee5c l\u01b0\u1edbi\"}]},{\"@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 Block Diagram Syntax | VPasCode Text to Diagram Guide","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free 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-block-diagram-syntax-grid-layout-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.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-block-diagram-syntax-grid-layout-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","name":"Mermaid Block Diagram 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-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","datePublished":"2026-07-08T06:20:18+00:00","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-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":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 kh\u1ed1i Mermaid.js v\u00e0 b\u1ed1 c\u1ee5c l\u01b0\u1edbi"}]},{"@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\/2076","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=2076"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}