{"id":2108,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-flowchart-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-flowchart-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 lu\u1ed3ng Mermaid.js"},"content":{"rendered":"<h2>S\u01a1 \u0111\u1ed3 lu\u1ed3ng l\u00e0 g\u00ec?<\/h2>\n<p>M\u1ed9t <strong>S\u01a1 \u0111\u1ed3 lu\u1ed3ng<\/strong>l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 h\u00e0nh vi n\u1ec1n t\u1ea3ng, gi\u00fap tr\u1ef1c quan h\u00f3a quy tr\u00ecnh v\u1eadn h\u00e0nh t\u1eebng b\u01b0\u1edbc, quy tr\u00ecnh thu\u1eadt to\u00e1n ho\u1eb7c logic kinh doanh tu\u1ea7n t\u1ef1. B\u1eb1ng c\u00e1ch bi\u1ec3u di\u1ec5n c\u00e1c h\u00e0nh \u0111\u1ed9ng h\u1ec7 th\u1ed1ng d\u01b0\u1edbi d\u1ea1ng c\u00e1c h\u00ecnh h\u1ecdc ri\u00eang bi\u1ec7t v\u00e0 v\u1ebd lu\u1ed3ng \u0111i\u1ec1u khi\u1ec3n b\u1eb1ng c\u00e1c m\u0169i t\u00ean h\u01b0\u1edbng, s\u01a1 \u0111\u1ed3 lu\u1ed3ng gi\u00fap c\u00e1c k\u1ef9 s\u01b0 ph\u1ea7n m\u1ec1m v\u00e0 ki\u1ebfn tr\u00fac s\u01b0 h\u1ec7 th\u1ed1ng d\u1ec5 d\u00e0ng theo d\u00f5i c\u00e1c \u0111\u01b0\u1eddng \u0111i th\u1ef1c thi \u0111i\u1ec1u ki\u1ec7n, t\u00e1ch bi\u1ec7t c\u00e1c kh\u1ed1i \u0111i\u1ec3m l\u1ed7i duy nh\u1ea5t, v\u00e0 ph\u00e2n t\u00edch c\u00e1c v\u00f2ng l\u1eb7p logic h\u1ec7 th\u1ed1ng tr\u01b0\u1edbc khi vi\u1ebft m\u00e3 backend th\u1ef1c t\u1ebf.<\/p>\n<p>V\u1edbi <strong>Mermaid.js<\/strong>, b\u1ea1n kh\u00f4ng c\u1ea7n m\u1ea5t h\u00e0ng gi\u1edd k\u00e9o th\u1ea3 c\u00e1c h\u1ed9p, \u0111i\u1ec1u ch\u1ec9nh chi ti\u1ebft c\u00e1c \u0111\u01b0\u1eddng l\u01b0\u1edbi hay t\u00ednh to\u00e1n l\u1ea1i c\u00e1c bi\u1ebfn kho\u1ea3ng c\u00e1ch l\u1ec1. B\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c s\u1ebd t\u00ednh to\u00e1n t\u1ecda \u0111\u1ed9 c\u00e1c n\u00fat m\u1ed9t c\u00e1ch \u0111\u1ed9ng t\u1eeb c\u00e1c \u0111o\u1ea1n m\u00e3 khai b\u00e1o th\u00f4 c\u1ee7a b\u1ea1n, gi\u00fap b\u1ea1n t\u1eadp trung ho\u00e0n to\u00e0n v\u00e0o logic c\u1ed1t l\u00f5i c\u1ee7a h\u1ec7 th\u1ed1ng.<\/p>\n<h2>H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p c\u1ed1t l\u00f5i: C\u00e1c th\u00e0nh ph\u1ea7n v\u00e0 c\u1ea5u tr\u00fac<\/h2>\n<p>\u0110\u1ec3 thi\u1ebft k\u1ebf m\u1ed9t s\u01a1 \u0111\u1ed3 lu\u1ed3ng tinh t\u1ebf, d\u1ec5 \u0111\u1ecdc cao trong Mermaid, b\u1ea1n ph\u1ea3i th\u00e0nh th\u1ea1o c\u00e1c ch\u1ec9 b\u00e1o h\u01b0\u1edbng khung, c\u00e1c bao b\u1ecdc h\u00ecnh h\u1ecdc cho n\u00fat, c\u00e1c bi\u1ebfn d\u00e2y n\u1ed1i v\u00e0 c\u00e1c c\u1ea5u tr\u00fac \u0111\u1ed3 th\u1ecb con.<\/p>\n<h3>1. Thi\u1ebft l\u1eadp h\u01b0\u1edbng khung<\/h3>\n<p>H\u01b0\u1edbng c\u1ee7a s\u01a1 \u0111\u1ed3 lu\u1ed3ng c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh tr\u1ef1c ti\u1ebfp \u1edf d\u00f2ng \u0111\u1ea7u ti\u00ean th\u00f4ng qua c\u1eb7p t\u1eeb kh\u00f3a \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho <code>graph<\/code> ho\u1eb7c <code>flowchart<\/code>b\u1ecdc. B\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t h\u01b0\u1edbng m\u1edf r\u1ed9ng h\u00ecnh \u1ea3nh c\u1ee7a b\u1ed1 c\u1ee5c b\u1eb1ng b\u1ed1n kh\u00f3a \u0111\u1ecbnh h\u01b0\u1edbng ch\u00ednh:<\/p>\n<ul>\n<li><code>flowchart TD<\/code> (T\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi \/ H\u01b0\u1edbng th\u1eb3ng \u0111\u1ee9ng)<\/li>\n<li><code>flowchart BU<\/code> (T\u1eeb d\u01b0\u1edbi l\u00ean tr\u00ean)<\/li>\n<li><code>flowchart LR<\/code> (T\u1eeb tr\u00e1i sang ph\u1ea3i \/ H\u01b0\u1edbng n\u1eb1m ngang)<\/li>\n<li><code>flowchart RL<\/code> (T\u1eeb ph\u1ea3i sang tr\u00e1i)<\/li>\n<\/ul>\n<h3>2. T\u00f9y ch\u1ec9nh h\u00ecnh h\u1ecdc n\u00fat (h\u00ecnh d\u1ea1ng)<\/h3>\n<p>M\u1eb7c \u0111\u1ecbnh, m\u1ed9t khai b\u00e1o ID \u0111\u01a1n gi\u1ea3n s\u1ebd hi\u1ec3n th\u1ecb d\u01b0\u1edbi d\u1ea1ng h\u1ed9p ch\u1eef nh\u1eadt s\u1eafc n\u00e9t. \u0110\u1ec3 l\u00e0m cho s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n, h\u00e3y s\u1eed d\u1ee5ng c\u00e1c d\u1ea5u ngo\u1eb7c bao b\u1ecdc chuy\u00ean bi\u1ec7t c\u1ee7a Mermaid \u0111\u1ec3 \u0111\u01b0a ngay l\u1eadp t\u1ee9c ng\u1eef c\u1ea3nh h\u00ecnh \u1ea3nh v\u00e0o c\u00e1c b\u01b0\u1edbc quy tr\u00ecnh kh\u00e1c nhau. M\u1ed7i kh\u1ed1i khai b\u00e1o ph\u1ea3i \u0111\u01b0\u1ee3c \u0111i tr\u01b0\u1edbc b\u1edfi m\u1ed9t k\u00fd hi\u1ec7u b\u1ed1 c\u1ee5c \u0111\u1ecbnh h\u01b0\u1edbng \u0111\u1ec3 \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch \u0111\u00fang c\u00e1ch:<\/p>\n<ul>\n<li><strong>C\u1ea1nh tr\u00f2n:<\/strong> <code>id(V\u0103n b\u1ea3n)<\/code> \u2014 \u0110\u1ea1i di\u1ec7n cho m\u1ed9t b\u01b0\u1edbc x\u1eed l\u00fd chung.<\/li>\n<li><strong>H\u00ecnh d\u1ea1ng s\u00e2n v\u1eadn \u0111\u1ed9ng\/V\u1ecf thu\u1ed1c:<\/strong> <code>id([V\u0103n b\u1ea3n])<\/code> \u2014 Bi\u1ec3u t\u01b0\u1ee3ng ti\u00eau chu\u1ea9n cho c\u00e1c m\u1ed1c gi\u1edbi h\u1ea1n b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac.<\/li>\n<li><strong>Th\u1ee7 t\u1ee5c con\/Quy tr\u00ecnh \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc:<\/strong> <code>id[[V\u0103n b\u1ea3n]]<\/code> \u2014 \u0110\u1ea1i di\u1ec7n cho m\u1ed9t th\u1ee7 t\u1ee5c h\u1ec7 th\u1ed1ng \u0111\u01b0\u1ee3c \u0111\u00f3ng g\u00f3i ho\u1eb7c m\u00e3 k\u1ecbch b\u1ea3n l\u1edbp b\u00ean ngo\u00e0i.<\/li>\n<li><strong>H\u00ecnh tr\u1ee5\/C\u01a1 s\u1edf d\u1eef li\u1ec7u:<\/strong> <code>id[(V\u0103n b\u1ea3n)]<\/code> \u2014 \u0110\u1ea1i di\u1ec7n cho t\u00ednh b\u1ec1n v\u1eefng c\u01a1 s\u1edf d\u1eef li\u1ec7u, b\u1ed9 nh\u1edb \u0111\u1ec7m ho\u1eb7c kho d\u1eef li\u1ec7u.<\/li>\n<li><strong>H\u00ecnh thoi\/Chim th\u00e1p quy\u1ebft \u0111\u1ecbnh:<\/strong> <code>id{V\u0103n b\u1ea3n}<\/code> \u2014 \u0110\u1ea1i di\u1ec7n cho c\u00e1c c\u00f4ng t\u1eafc \u0111i\u1ec1u ki\u1ec7n, nh\u00e1nh if\/else ho\u1eb7c c\u00e1c \u0111i\u1ec3m \u0111\u00e1nh gi\u00e1.<\/li>\n<li><strong>H\u00ecnh b\u00ecnh h\u00e0nh:<\/strong> <code>id[\/V\u0103n b\u1ea3n\/]<\/code> ho\u1eb7c <code>id[V\u0103n b\u1ea3n]<\/code> \u2014 V\u1ebd c\u00e1c bi\u00ean gi\u1edbi xi\u00ean \u0111\u1ec3 \u0111\u1ea1i di\u1ec7n cho d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o\/\u0111\u1ea7u ra (I\/O) r\u00f5 r\u00e0ng.<\/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><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLy8kvT85ILCpRCHHh5VIAguISIC8+Lz8lVSM6GMRWcK1ITS4tyczPi9WEKCksTS2qjE9JitYIyC8uSS9KDQ70UfDMA+rMS07VjIUoKkvMyUxJLEmNT85ITc6u9ixWcCwtycgvyqxKTbGvBQBvyCjM\" 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:eNpLyny4u7lU4cjEh7snK+SUAsm8dIUQF14uBSAoLkksKonPy09J1Yh2erhrfQlI3a7lpQolGQ93b0wGUpmxmhClhaWpRZXxKUnRGiEwOaDBCgH5xSXpRanBgT6asRCFZYk5mSmJJanxyRmpydnVRyYc2\/Bw9+JkhYe7l1cCTal8uLsxTyE549iGRPtaAL3EQ9A=\" \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\">bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng TD\r\n    start_node([B\u1eaft \u0111\u1ea7u th\u1ef1c thi])\r\n    query_db[(Th\u1ef1c th\u1ec3 PostgreSQL)]\r\n    validate_check{\u0110\u01b0\u1ee3c \u1ee7y quy\u1ec1n ch\u01b0a?}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyny4u7lU4cjEh7snK+SUAsm8dIUQF14uBSAoLkksKonPy09J1Yh2erhrfQlI3a7lpQolGQ93b0wGUpmxmhClhaWpRZXxKUnRGiEwOaDBCgH5xSXpRanBgT6asRCFZYk5mSmJJanxyRmpydnVRyYc2\/Bw9+JkhYe7l1cCTal8uLsxTyE549iGRPtaAL3EQ9A=\" \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:eNpLy8kvT85ILCpRCHHh5VIAguISIC8+Lz8lVSM6GMRWcK1ITS4tyczPi9WEKCksTS2qjE9JitYIyC8uSS9KDQ70UfDMA+rMS07VjIUoKkvMyUxJLEmNT85ITc6u9ixWcCwtycgvyqxKTbGvBQBvyCjM\" 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=\"jWBAKCL\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-613\" decoding=\"async\" fetchpriority=\"high\" height=\"173\" sizes=\"(max-width: 570px) 100vw, 570px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.png 570w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5-300x91.png 300w\" width=\"570\"\/><\/p>\n<h3>3. Quy t\u1eafc n\u1ed1i d\u00e2y v\u00e0 nh\u00e3n nh\u00fang<\/h3>\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh c\u00e1c \u0111\u01b0\u1eddng n\u1ed1i \u0111\u1ec3 bi\u1ec3u di\u1ec5n c\u00e1c m\u1ed1i quan h\u1ec7 c\u1ea5u tr\u00fac kh\u00e1c nhau v\u00e0 c\u00e1c phong c\u00e1ch giao ti\u1ebfp. \u0110\u1ec3 gi\u1eef cho bi\u1ec3u \u0111\u1ed3 c\u1ee7a b\u1ea1n g\u1ecdn g\u00e0ng, h\u00e3y ch\u00e8n c\u00e1c nh\u00e3n m\u00f4 t\u1ea3 tr\u1ef1c ti\u1ebfp l\u00ean c\u00e1c \u0111\u01b0\u1eddng n\u1ed1i:<\/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:eNp9zL8KwjAYBPC90Hc4Ch2rT1Chf1wcVGjBOU0iCYZ8kH5ahT68sYI4iDfdcPc7O5qkEYHRt2mCmDxHx8IrERQkea8lU4AIgSZMlg1Y3xlODNq9DxWKYoM523WHPY7i4UiobEadJh+wJWat1tX48NIE8nQd4azXv8EaxWoRlz22N+05gs0X2BsrLxjIKa3+SA3K8gU1wbKVwuEUi45W+wR14EpC\" 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:eNpLyny4u7lU4cjEh7snK+SUAsm8dIUQF14uBSBQVVXwPboyU6Hk8Ko8hbyHuycCmZmHV5UqJGeUPty1Mk+h7OHu2ZkKeRmHFwPZR5rzFJIe7lqcB9HsqKCra6dQo+TycPd6hRygNe2lCl7B\/n5KNQpOvFxwC45MOLbh4e65QFuTMx7uWpoLpfTBLgKKJj3cPROvPU4Kunpgi4If7t6okA2yCCy\/tEQB2Qygtc5YrQUq2rU2F68Vzgq2tiAb3DMyFVKQvFNYmpinUFL0cHdvXjrQfBcAB3KN2g==\" \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\">bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng TD\r\n    %% M\u0169i t\u00ean n\u1ed1i ti\u00eau chu\u1ea9n v\u1edbi nh\u00e3n v\u0103n b\u1ea3n\r\n    A --&gt; |\"D\u1eef li\u1ec7u JSON\"| B\r\n\r\n    %% \u0110\u01b0\u1eddng ch\u1ea5m ch\u1ea5m\/\u0111\u1ed3ng b\u1ed9 v\u1edbi nh\u00e3n v\u0103n b\u1ea3n\r\n    B -.-&gt; |\"S\u1ef1 ki\u1ec7n b\u1ea5t \u0111\u1ed3ng b\u1ed9\"| C\r\n\r\n    %% \u0110\u01b0\u1eddng \u0111\u1eadm v\u1edbi nh\u00e3n v\u0103n b\u1ea3n\r\n    C ==&gt; |\"Ghi d\u1eef li\u1ec7u quan tr\u1ecdng\"| D<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyny4u7lU4cjEh7snK+SUAsm8dIUQF14uBSBQVVXwPboyU6Hk8Ko8hbyHuycCmZmHV5UqJGeUPty1Mk+h7OHu2ZkKeRmHFwPZR5rzFJIe7lqcB9HsqKCra6dQo+TycPd6hRygNe2lCl7B\/n5KNQpOvFxwC45MOLbh4e65QFuTMx7uWpoLpfTBLgKKJj3cPROvPU4Kunpgi4If7t6okA2yCCy\/tEQB2Qygtc5YrQUq2rU2F68Vzgq2tiAb3DMyFVKQvFNYmpinUFL0cHdvXjrQfBcAB3KN2g==\" \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:eNp9zL8KwjAYBPC90Hc4Ch2rT1Chf1wcVGjBOU0iCYZ8kH5ahT68sYI4iDfdcPc7O5qkEYHRt2mCmDxHx8IrERQkea8lU4AIgSZMlg1Y3xlODNq9DxWKYoM523WHPY7i4UiobEadJh+wJWat1tX48NIE8nQd4azXv8EaxWoRlz22N+05gs0X2BsrLxjIKa3+SA3K8gU1wbKVwuEUi45W+wR14EpC\" 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=\"igwGmSf\"><img alt=\"\" class=\"alignnone size-full wp-image-614\" decoding=\"async\" height=\"454\" sizes=\"(max-width: 113px) 100vw, 113px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902ac35bd4.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902ac35bd4.png 113w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902ac35bd4-75x300.png 75w\" width=\"113\"\/><\/p>\n<h3>4. C\u00e1ch ly theo m\u00f4-\u0111un th\u00f4ng qua c\u00e1c \u0111\u1ed3 th\u1ecb con<\/h3>\n<p>\u0110\u1ec3 thi\u1ebft l\u1eadp c\u00e1c bi\u00ean gi\u1edbi m\u1ea1ng s\u1ea1ch s\u1ebd, nh\u00f3m c\u00e1c d\u1ecbch v\u1ee5 vi m\u00f4 ho\u1eb7c t\u00e1ch bi\u1ec7t tr\u00e1ch nhi\u1ec7m c\u1ee7a nh\u00f3m, h\u00e3y nh\u00f3m c\u00e1c ph\u1ea7n t\u1eed c\u1ee7a b\u1ea1n b\u00ean trong c\u00e1c bao b\u1ecdc c\u1ea5u tr\u00fac<code>\u0111\u1ed3 th\u1ecb con<\/code> bao b\u1ecdc. B\u1ea1n \u0111\u1ecbnh ngh\u0129a m\u1ed9t \u0111\u1ed3 th\u1ecb con b\u1eb1ng c\u00e1ch g\u00e1n cho n\u00f3 m\u1ed9t ID n\u1ed9i b\u1ed9, m\u1ed9t ti\u00eau \u0111\u1ec1 hi\u1ec3n th\u1ecb t\u00f9y ch\u1ecdn, v\u00e0 \u0111\u00f3ng n\u00f3 b\u1eb1ng m\u1ed9t<code>k\u1ebft th\u00fac<\/code>nh\u00e3n:<\/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:eNpLy8kvT85ILCpRCHHh5VIAguLSpPSixIIMhcTSkox4IC9aKTg1ubQos6RSwSm\/NC8lsahSKRaiFgTSE0tSyxMrox0DPBXcIexYBV1dO4j+8vyi7NQijZD87NQ8hbDEnMyUxJL8Ik2I9tS8FAChvimf\" 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:eNpLyny4u7lU4cjEh7snK+SUAsm8dIUQF14uBSAoLk1KL0osyFBILC3JiAfyopWcMg+vylNIB+qanamQ9HDX4nyF3Ie71pYoxUK0gEB6YklqeWJltGOAp4I7hB2roKtrBzGmPL8oO7VII6To8Jq8DIWKwwuTFUoyHu7eCKTys1PzNCHmpOalAAA2mjw\/\" \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\">bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng TD\r\n    subgraph auth_sub[\"Bi\u00ean gi\u1edbi b\u1ea3o m\u1eadt\"]\r\n        gateway[API Gateway] --&gt; auth_worker(Tr\u00ecnh x\u00e1c th\u1ef1c token)\r\n    end<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyny4u7lU4cjEh7snK+SUAsm8dIUQF14uBSAoLk1KL0osyFBILC3JiAfyopWcMg+vylNIB+qanamQ9HDX4nyF3Ie71pYoxUK0gEB6YklqeWJltGOAp4I7hB2roKtrBzGmPL8oO7VII6To8Jq8DIWKwwuTFUoyHu7eCKTys1PzNCHmpOalAAA2mjw\/\" \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:eNpLy8kvT85ILCpRCHHh5VIAguLSpPSixIIMhcTSkox4IC9aKTg1ubQos6RSwSm\/NC8lsahSKRaiFgTSE0tSyxMrox0DPBXcIexYBV1dO4j+8vyi7NQijZD87NQ8hbDEnMyUxJL8Ik2I9tS8FAChvimf\" 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=\"GfaAkHz\"><img alt=\"\" class=\"alignnone size-full wp-image-615\" decoding=\"async\" height=\"140\" sizes=\"(max-width: 457px) 100vw, 457px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902bb7e3ea.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902bb7e3ea.png 457w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902bb7e3ea-300x92.png 300w\" width=\"457\"\/><\/p>\n<h2>C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t cho s\u01a1 \u0111\u1ed3 lu\u1ed3ng s\u1ea1ch<\/h2>\n<ul>\n<li><strong>T\u00e1ch r\u1eddi b\u1ed1 c\u1ee5c theo chi\u1ec1u ngang:<\/strong> \u0110\u1ed1i v\u1edbi c\u00e1c lu\u1ed3ng k\u1ef9 thu\u1eadt d\u00e0i v\u00e0 nhi\u1ec1u b\u01b0\u1edbc, h\u00e3y ch\u1ecdn m\u1ed9t <code>bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng LR<\/code>h\u01b0\u1edbng. \u0110i\u1ec1u n\u00e0y m\u1edf r\u1ed9ng t\u1ed1t h\u01a1n nhi\u1ec1u tr\u00ean c\u00e1c m\u00e0n h\u00ecnh r\u1ed9ng ti\u00eau chu\u1ea9n \u1edf ch\u1ebf \u0111\u1ed9 n\u1eb1m ngang so v\u1edbi b\u1ed1 c\u1ee5c d\u1ecdc d\u00e0i.<\/li>\n<li><strong>T\u00e1ch bi\u1ec7t c\u00e1c v\u00f2ng l\u1eb7p ph\u1ee9c t\u1ea1p:<\/strong> N\u1ebfu m\u1ed9t quy tr\u00ecnh c\u00f3 v\u00f2ng l\u1eb7p l\u1eb7p l\u1ea1i n\u1eb7ng, h\u00e3y \u0111\u00e1nh d\u1ea5u r\u00f5 r\u00e0ng k\u1ebft n\u1ed1i ng\u01b0\u1ee3c (v\u00ed d\u1ee5 nh\u01b0 <code>retry --&gt; |\"Th\u1eed l\u1ea1i l\u1ea7n n\u1eefa\"| start<\/code>) \u0111\u1ec3 ng\u0103n ng\u01b0\u1eddi \u0111\u1ecdc nh\u1ea7m l\u1eabn v\u00f2ng l\u1eb7p v\u1edbi \u0111\u01b0\u1eddng \u0111i th\u00f4ng th\u01b0\u1eddng.<\/li>\n<li><strong>Tr\u00e1nh tr\u1ed9n l\u1eabn c\u00e1c lo\u1ea1i s\u01a1 \u0111\u1ed3:<\/strong> Duy tr\u00ec s\u1eed d\u1ee5ng <code>bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng<\/code> t\u1eeb kh\u00f3a thay v\u00ec <code>graph<\/code>c\u1edd khi v\u1ebd b\u1ea3n \u0111\u1ed3 ph\u1ee9c t\u1ea1p. B\u1ed9 x\u1eed l\u00fd <code>bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng<\/code>s\u1eed d\u1ee5ng thu\u1eadt to\u00e1n b\u1ed1 c\u1ee5c c\u1eadp nh\u1eadt h\u1ed7 tr\u1ee3 c\u00e1c k\u1ebft h\u1ee3p m\u0169i t\u00ean n\u00e2ng cao v\u00e0 \u0111\u1ecbnh tuy\u1ebfn \u0111\u01b0\u1eddng \u0111i s\u1ea1ch h\u01a1n.<\/li>\n<\/ul>\n<h2>C\u00e1c v\u00ed d\u1ee5 s\u01a1 \u0111\u1ed3 lu\u1ed3ng Mermaid.js trong th\u1ebf gi\u1edbi th\u1ef1c<\/h2>\n<h3>V\u00ed d\u1ee5 1: M\u1ea1ng thu th\u1eadp d\u1eef li\u1ec7u d\u1ef1a tr\u00ean s\u1ef1 ki\u1ec7n c\u1ee7a microservice (ki\u1ebfn tr\u00fac tr\u00e1i sang ph\u1ea3i)<\/h3>\n<p>B\u1ea3n thi\u1ebft k\u1ebf ch\u1ee9c n\u0103ng n\u00e0y m\u00f4 h\u00ecnh h\u00f3a m\u1ed9t d\u1ecbch v\u1ee5 thu th\u1eadp d\u1eef li\u1ec7u web telemetry. N\u00f3 minh h\u1ecda c\u00e1ch k\u1ebft h\u1ee3p \u0111\u1ea7u v\u00e0o d\u1eef li\u1ec7u, h\u00ecnh thoi quy\u1ebft \u0111\u1ecbnh v\u00e0 c\u00e1c h\u00ecnh d\u1ea1ng c\u01a1 s\u1edf d\u1eef li\u1ec7u \u0111\u00e1m m\u00e2y tr\u00ean m\u1ed9t m\u1eb7t ph\u1eb3ng ngang 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:eNp1UU1v2zAMvQ\/YfyA6FHCBBW36gQ497NAExbbu0AZuezACQ5HomrAseRJVpx\/775PtuPMO04EAqfceycdC21aWwjH8XH38APHt78MSCzIIqLFGw2CsQg8tcQm4bTRJYnhEWyO7Z\/ClaNAPVDLESfaAm9LaCq7IoVofwGz2Nf40gXOy2eFCNBwcwrc0vYEV\/gro+XA98gdUTxGBy1yWKKvXe6FJCUZIbYXm9wAe4l9UT3rb+26eOvQA3XsDdC73bJskW2FsbOD0aA53puNZRy\/dhP9R6rvCj4c0qrSOGPM4bMAsuwkbTb4EtnAtikrAbVdfr6dzTQi9XGtdhS5vnJXJwhofanSwFFhbs+s\/QfQMtenmdpglKdXopdC4vISFDp7RHeyajaCeEet1kqUxkoluKbiKx+3Wez\/sbaC4nowStgbPzxrBPkWHSI0nHIoTLwrS+uJTURQnUn327KKtXSrnR+e7dNaS4vLiuNlOJUbfR4Ev6lyJdwElT85Oz\/4VmDfbPxln1jw=\" 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:eNp1Us9rE0EUvgv+D49KIQFDG9tS6cGDFRTbg8pCC0sIm9nZzLCb2e1kxjRYD9KDiBQsHr00hFIpCgp6cPfgYYL\/x\/wnvtlN4vbgws7w3nzf9372uC1ONczObfEREo2n6MP+i9u3AL\/VVTg0E1K+vhcMiDOEyRUoZi7QkTGbXwl4aYtPHJj5gq7Q5hOUqAxmizMC0vzE\/0L0K1UuuGr4B7TH0jRG7T\/fbDElEJuvBBkp8lWnCa3WA0RmWnV56q\/totJlBmNzrYFgTA1PPO\/ZWmehWOFKUqAV6xJGSfyqTF4h9TteaUzF6wpfnf+AJe9kxXMQiJn54QrApDJIbPF25QSolN2hSrOG70mbT13Bb2BzvQ17FXhZhC2uxnCkx\/guOs3\/xHl64N2UH0muaPdIU019f\/ZhdoqSCuNwSMy1ANfrfjkE9OwFURx0OvVCavQywiiVMZXdTKak8VybCShZTkNx1z7Xj8t5ajVkyQx7rkxJ\/cYuggbg8QEdkiChjx425yEXkBKvqBw0\/P352szOzRRim\/8u9yMnrgHLRXrMuAN8xp1JEetWCTMyv8ZAMKF3mJ5ggWAVfqjGCa03LuJJsnMniqINEt4dKomTciZpr2\/PzdaIh4rt3MuO6xKLwS0E7ofbYbAUCMnG1ubWTYF2dvwXuY019w==\" \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\">bi\u1ec3u \u0111\u1ed3 lu\u1ed3ng LR\r\n    %% X\u00e1c \u0111\u1ecbnh c\u00e1c n\u00fat th\u00e0nh ph\u1ea7n v\u1edbi h\u00ecnh d\u1ea1ng h\u00ecnh h\u1ecdc r\u00f5 r\u00e0ng\r\n    init([Webhook \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t]) --&gt; input_io[\/Ch\u1ee5p y\u00eau c\u1ea7u HTTP\/]\r\n    input_io --&gt; auth_check{X\u00e1c th\u1ef1c token}\r\n    \r\n    auth_check --&gt; |\"Token kh\u00f4ng h\u1ee3p l\u1ec7\"| err_stop([Tr\u1ea3 v\u1ec1 401 Kh\u00f4ng \u0111\u01b0\u1ee3c \u1ee7y quy\u1ec1n])\r\n    auth_check --&gt; |\"JWT h\u1ee3p l\u1ec7\"| write_queue[[\u0110\u0103ng t\u1ea3i l\u00ean h\u00e0ng \u0111\u1ee3i Kafka]]\r\n    \r\n    write_queue --&gt; worker_proc(Qu\u00e1 tr\u00ecnh ti\u00eau th\u1ee5)\r\n    worker_proc --&gt; db_store[(C\u1ee5m TimescaleDB)]\r\n    db_store --&gt; term([Lu\u1ed3ng \u0111\u00e3 k\u1ebft th\u00fac])\r\n\r\n    %% Ghi \u0111\u00e8 phong c\u00e1ch t\u00f9y ch\u1ec9nh nhanh\r\n    style auth_check fill:#fff3cd,stroke:#ffc107,stroke-width:2px\r\n    style err_stop fill:#f8d7da,stroke:#dc3545,stroke-width:1px<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1Us9rE0EUvgv+D49KIQFDG9tS6cGDFRTbg8pCC0sIm9nZzLCb2e1kxjRYD9KDiBQsHr00hFIpCgp6cPfgYYL\/x\/wnvtlN4vbgws7w3nzf9372uC1ONczObfEREo2n6MP+i9u3AL\/VVTg0E1K+vhcMiDOEyRUoZi7QkTGbXwl4aYtPHJj5gq7Q5hOUqAxmizMC0vzE\/0L0K1UuuGr4B7TH0jRG7T\/fbDElEJuvBBkp8lWnCa3WA0RmWnV56q\/totJlBmNzrYFgTA1PPO\/ZWmehWOFKUqAV6xJGSfyqTF4h9TteaUzF6wpfnf+AJe9kxXMQiJn54QrApDJIbPF25QSolN2hSrOG70mbT13Bb2BzvQ17FXhZhC2uxnCkx\/guOs3\/xHl64N2UH0muaPdIU019f\/ZhdoqSCuNwSMy1ANfrfjkE9OwFURx0OvVCavQywiiVMZXdTKak8VybCShZTkNx1z7Xj8t5ajVkyQx7rkxJ\/cYuggbg8QEdkiChjx425yEXkBKvqBw0\/P352szOzRRim\/8u9yMnrgHLRXrMuAN8xp1JEetWCTMyv8ZAMKF3mJ5ggWAVfqjGCa03LuJJsnMniqINEt4dKomTciZpr2\/PzdaIh4rt3MuO6xKLwS0E7ofbYbAUCMnG1ubWTYF2dvwXuY019w==\" \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:eNp1UU1v2zAMvQ\/YfyA6FHCBBW36gQ497NAExbbu0AZuezACQ5HomrAseRJVpx\/775PtuPMO04EAqfceycdC21aWwjH8XH38APHt78MSCzIIqLFGw2CsQg8tcQm4bTRJYnhEWyO7Z\/ClaNAPVDLESfaAm9LaCq7IoVofwGz2Nf40gXOy2eFCNBwcwrc0vYEV\/gro+XA98gdUTxGBy1yWKKvXe6FJCUZIbYXm9wAe4l9UT3rb+26eOvQA3XsDdC73bJskW2FsbOD0aA53puNZRy\/dhP9R6rvCj4c0qrSOGPM4bMAsuwkbTb4EtnAtikrAbVdfr6dzTQi9XGtdhS5vnJXJwhofanSwFFhbs+s\/QfQMtenmdpglKdXopdC4vISFDp7RHeyajaCeEet1kqUxkoluKbiKx+3Wez\/sbaC4nowStgbPzxrBPkWHSI0nHIoTLwrS+uJTURQnUn327KKtXSrnR+e7dNaS4vLiuNlOJUbfR4Ev6lyJdwElT85Oz\/4VmDfbPxln1jw=\" 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=\"mpzcybi\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-616\" decoding=\"async\" height=\"181\" loading=\"lazy\" sizes=\"auto, (max-width: 1597px) 100vw, 1597px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902c872f26.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902c872f26.png 1597w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902c872f26-300x34.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902c872f26-1024x116.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902c872f26-768x87.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902c872f26-1536x174.png 1536w\" width=\"1597\"\/><\/p>\n<p><strong>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p:<\/strong> S\u01a1 \u0111\u1ed3 n\u00e0y ch\u1ea3y tr\u01a1n tru t\u1eeb tr\u00e1i sang ph\u1ea3i. B\u01b0\u1edbc x\u00e1c th\u1ef1c s\u1eed d\u1ee5ng h\u00ecnh thoi quy\u1ebft \u0111\u1ecbnh m\u00e0u v\u00e0ng (<code>auth_check{X\u00e1c th\u1ef1c Token}<\/code>), gi\u00fap chia t\u00e1ch \u0111\u01b0\u1eddng th\u1ef1c thi m\u1ed9t c\u00e1ch r\u00f5 r\u00e0ng th\u00e0nh hai k\u1ebft qu\u1ea3 kh\u00e1c nhau. C\u00e1c kho l\u01b0u tr\u1eef d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c nh\u1eadn di\u1ec7n ngay l\u1eadp t\u1ee9c nh\u1edd h\u00ecnh tr\u1ee5 c\u01a1 s\u1edf d\u1eef li\u1ec7u t\u00f9y ch\u1ec9nh (<code>[(Cluster TimescaleDB)]<\/code>) v\u00e0 c\u00e1c \u0111\u1ea7u v\u00e0o h\u00ecnh thang.<\/p>\n<h3>V\u00ed d\u1ee5 2: B\u1ed9 \u0111\u1ed9ng c\u01a1 \u0111\u0103ng k\u00fd ng\u01b0\u1eddi d\u00f9ng \u0111a t\u1ea7ng doanh nghi\u1ec7p (Th\u1eb3ng \u0111\u1ee9ng v\u1edbi c\u00e1c s\u01a1 \u0111\u1ed3 con l\u1ed3ng gh\u00e9p)<\/h3>\n<p>B\u1ea3n thi\u1ebft k\u1ebf doanh nghi\u1ec7p n\u00e2ng cao n\u00e0y m\u00f4 t\u1ea3 \u0111\u01b0\u1eddng d\u1eabn \u0111\u0103ng k\u00fd \u1ee9ng d\u1ee5ng. N\u00f3 s\u1eafp x\u1ebfp c\u00e1c b\u01b0\u1edbc theo chi\u1ec1u d\u1ecdc qua ba s\u01a1 \u0111\u1ed3 con c\u1ea5u tr\u00fac ri\u00eang bi\u1ec7t \u0111\u1ec3 \u0111\u1ea1i di\u1ec7n cho c\u00e1c l\u1edbp ki\u1ebfn tr\u00fac kh\u00e1c nhau.<\/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:eNqNkd1qwkAQhe8LvsMQEPRCpC9QSCNthbYEo\/UiSNhsRl2a7KazGzXgw3di1Gp\/oHsRNjNnds58s8zNVq4FOZiOOjfAx1bpikS5hiBXqF0yVUixFxJa\/hNOGQ2zMTyLGslbtCXNEWUZv5hU5Qh+WbLkIrfFNJ5jClHowwMZ7VBnxzTfOjffGkdIGyXx2DkwhPAoHG5FDRNTueu+JZldHcevK6V3MNYr9mlhghskixA2ycWly8qtE7uRPZ8vp0YwN\/SO1P\/bUcivKcu2z64ilBVhBiPhBARM5tpVIZROsjTuzSwS+FKaSjvLflQhqIbRff9CLIVcY6JNhnFvgpmybMzaBnTQZPo\/UXW7MMKl0gjSFEWllWwXU6oScw5bEJIMg+AJbM3GC8ibhdm2nHcFgwF4T9NpGDGsjwqt8zh01+JsVby1f6ja7yFwSO29w45guLkdNrS9\/Rn6ZcEpdqx5Q1LL+jQ313wx+VUf8NjKncCy\/gj8E58B26k=\" 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:eNqNUk9r1EAUvxf6HR6Bwu6hFL+AoC1qQcriRqqEsiSTMTM0mYTJZNuFXjztwYt78CBFbC2iFEsV9ODOwcOUfo\/5Jr5k0m1aFZxDwsy835vfn\/cizfcIC6UCf2N5CXCVVZTIsGCwnnIq1MjnVAbeY6sPC0h4mEPMrZ4KEMnlV6vfcYjNT5GAkuaLYBCZo4m34zrVKyyK4OkmWP0Za2KrP9Y\/Dhczq9+KpFO4R6PggcyFoiKG4eAebNOovcaT5aVb5IZUjjmhLbv72K3p+QopqGpi578EEKvf4Gv4mylIzQ\/e5VXIfH8SBFuNiBPi9rCVcLEPmyKRtCx3ujIqxUblmPS2c7lLJWzgU4TBGAXBM3NMQDGrv5H+vwkPqCx5ieoWpH1Z1b6ZD1ltzDmkta8VymgpRXZ+kkNm52eqyzwLuRjFUdBbvzyG0ur3N9CEmTP0wDdHHHZZji1uJ9Xv9CIhYXQk8pgGvYWH0wwKxs2pgCc05mX\/zxRWVpzoK8eJ2zSvNKOACeiXAk0x33GfILXz0FWlzRyhWdPGslkdUC5cW5wVWF0F77k5RSF2\/qmCR74\/GHp4etcl5ApxVv6v0H1dtvXVgXfx+uaQrI3vrNXhegeLjLvQq7MW3ajOOOIHjUOIurbwr4iHjGPE12Egog3wN4IYUyI=\" \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\">flowchart TD\r\n    subgraph Client_Tier[\"L\u1edbp giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng tr\u00ecnh b\u00e0y\"]\r\n        app[UI \u1ee8ng d\u1ee5ng di \u0111\u1ed9ng]\r\n        web[Frontend SPA Web]\r\n    end\r\n\r\n    subgraph Service_Tier[\"B\u1ed9 \u0111\u1ecbnh tuy\u1ebfn c\u1ed5ng c\u1ed1t l\u00f5i\"]\r\n        proxy[[Ng\u01b0\u1ee3c proxy Nginx Ingress]]\r\n        auth_svc(Worker D\u1ecbch v\u1ee5 X\u00e1c th\u1ef1c)\r\n    end\r\n\r\n    subgraph Persistence_Tier[\"Trung t\u00e2m d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c b\u1ea3o m\u1eadt\"]\r\n        main_db[(C\u01a1 s\u1edf d\u1eef li\u1ec7u ch\u00ednh T\u00e0i kho\u1ea3n ng\u01b0\u1eddi d\u00f9ng)]\r\n        cache_node[(B\u1ed9 \u0111\u1ec7m phi\u00ean Redis)]\r\n    end\r\n\r\n    %% X\u00e1c \u0111\u1ecbnh c\u00e1c \u0111\u01b0\u1eddng truy\u1ec1n th\u00f4ng gi\u1eefa c\u00e1c l\u1edbp h\u1ec7 th\u1ed1ng con\r\n    app -- \"Y\u00eau c\u1ea7u HTTPS\" --&gt; proxy\r\n    web -- \"Y\u00eau c\u1ea7u HTTPS\" --&gt; proxy\r\n    \r\n    proxy --&gt; |\"\u0110\u1ecbnh tuy\u1ebfn \/v1\/auth\"| auth_svc\r\n    \r\n    auth_svc --&gt; |\"X\u00e1c minh Phi\u00ean\"| cache_node\r\n    auth_svc --&gt; |\"Ghi t\u00e0i kho\u1ea3n\"| main_db<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUk9r1EAUvxf6HR6Bwu6hFL+AoC1qQcriRqqEsiSTMTM0mYTJZNuFXjztwYt78CBFbC2iFEsV9ODOwcOUfo\/5Jr5k0m1aFZxDwsy835vfn\/cizfcIC6UCf2N5CXCVVZTIsGCwnnIq1MjnVAbeY6sPC0h4mEPMrZ4KEMnlV6vfcYjNT5GAkuaLYBCZo4m34zrVKyyK4OkmWP0Za2KrP9Y\/Dhczq9+KpFO4R6PggcyFoiKG4eAebNOovcaT5aVb5IZUjjmhLbv72K3p+QopqGpi578EEKvf4Gv4mylIzQ\/e5VXIfH8SBFuNiBPi9rCVcLEPmyKRtCx3ujIqxUblmPS2c7lLJWzgU4TBGAXBM3NMQDGrv5H+vwkPqCx5ieoWpH1Z1b6ZD1ltzDmkta8VymgpRXZ+kkNm52eqyzwLuRjFUdBbvzyG0ur3N9CEmTP0wDdHHHZZji1uJ9Xv9CIhYXQk8pgGvYWH0wwKxs2pgCc05mX\/zxRWVpzoK8eJ2zSvNKOACeiXAk0x33GfILXz0FWlzRyhWdPGslkdUC5cW5wVWF0F77k5RSF2\/qmCR74\/GHp4etcl5ApxVv6v0H1dtvXVgXfx+uaQrI3vrNXhegeLjLvQq7MW3ajOOOIHjUOIurbwr4iHjGPE12Egog3wN4IYUyI=\" \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:eNqNkd1qwkAQhe8LvsMQEPRCpC9QSCNthbYEo\/UiSNhsRl2a7KazGzXgw3di1Gp\/oHsRNjNnds58s8zNVq4FOZiOOjfAx1bpikS5hiBXqF0yVUixFxJa\/hNOGQ2zMTyLGslbtCXNEWUZv5hU5Qh+WbLkIrfFNJ5jClHowwMZ7VBnxzTfOjffGkdIGyXx2DkwhPAoHG5FDRNTueu+JZldHcevK6V3MNYr9mlhghskixA2ycWly8qtE7uRPZ8vp0YwN\/SO1P\/bUcivKcu2z64ilBVhBiPhBARM5tpVIZROsjTuzSwS+FKaSjvLflQhqIbRff9CLIVcY6JNhnFvgpmybMzaBnTQZPo\/UXW7MMKl0gjSFEWllWwXU6oScw5bEJIMg+AJbM3GC8ibhdm2nHcFgwF4T9NpGDGsjwqt8zh01+JsVby1f6ja7yFwSO29w45guLkdNrS9\/Rn6ZcEpdqx5Q1LL+jQ313wx+VUf8NjKncCy\/gj8E58B26k=\" 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=\"pSGGZOL\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-617\" decoding=\"async\" height=\"644\" loading=\"lazy\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902d48117d.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902d48117d.png 511w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902d48117d-238x300.png 238w\" width=\"511\"\/><\/p>\n<p><strong>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p:<\/strong> Ch\u1ec9 b\u00e1o \u0111\u1ecbnh h\u01b0\u1edbng t\u1eeb tr\u00ean xu\u1ed1ng (<code>flowchart TD<\/code>), bu\u1ed9c \u0111\u1ed9ng c\u01a1 b\u1ed1 c\u1ee5c x\u1ebfp c\u00e1c th\u00e0nh ph\u1ea7n m\u1ed9t c\u00e1ch s\u1ea1ch s\u1ebd t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi. C\u00e1c kh\u1ed1i gi\u1edbi h\u1ea1n nh\u00f3m c\u00e1c th\u00e0nh ph\u1ea7n li\u00ean quan v\u00e0o c\u00e1c l\u1edbp ri\u00eang bi\u1ec7t (Kh\u00e1ch h\u00e0ng, D\u1ecbch v\u1ee5 v\u00e0 D\u1eef li\u1ec7u), mang l\u1ea1i cho ki\u1ebfn tr\u00fac t\u1ed5ng th\u1ec3 c\u1ea3m gi\u00e1c tr\u1ef1c quan v\u00e0 c\u00f3 c\u1ea5u tr\u00fac cao.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>S\u01a1 \u0111\u1ed3 lu\u1ed3ng l\u00e0 g\u00ec? M\u1ed9t S\u01a1 \u0111\u1ed3 lu\u1ed3ngl\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 h\u00e0nh vi n\u1ec1n t\u1ea3ng, gi\u00fap tr\u1ef1c quan h\u00f3a quy tr\u00ecnh v\u1eadn h\u00e0nh t\u1eebng b\u01b0\u1edbc, quy tr\u00ecnh thu\u1eadt to\u00e1n ho\u1eb7c logic kinh doanh tu\u1ea7n t\u1ef1. B\u1eb1ng c\u00e1ch bi\u1ec3u di\u1ec5n&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":1,"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-2108","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 Flowchart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Create logic decision flowcharts with Mermaid.js in VPasCode, a web-based diagram-as-code tool for software developers.\" \/>\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-flowchart-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Flowchart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Create logic decision flowcharts with Mermaid.js in VPasCode, a web-based diagram-as-code tool for software developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.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=\"4 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-flowchart-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-flowchart-syntax-guide\\\/\",\"name\":\"Mermaid Flowchart 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-flowchart-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-flowchart-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1902a0955b5.png\",\"datePublished\":\"2026-05-26T08:05:43+00:00\",\"description\":\"Create logic decision flowcharts with Mermaid.js in VPasCode, a web-based diagram-as-code tool for software developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-flowchart-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-flowchart-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-flowchart-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1902a0955b5.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1902a0955b5.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-flowchart-syntax-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 lu\u1ed3ng Mermaid.js\"}]},{\"@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 Flowchart Syntax | VPasCode Text to Diagram Guide","description":"Create logic decision flowcharts with Mermaid.js in VPasCode, a web-based diagram-as-code tool for software developers.","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-flowchart-syntax-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid Flowchart Syntax | VPasCode Text to Diagram Guide","og_description":"Create logic decision flowcharts with Mermaid.js in VPasCode, a web-based diagram-as-code tool for software developers.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"4 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/","name":"Mermaid Flowchart 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-flowchart-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.png","datePublished":"2026-05-26T08:05:43+00:00","description":"Create logic decision flowcharts with Mermaid.js in VPasCode, a web-based diagram-as-code tool for software developers.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902a0955b5.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-flowchart-syntax-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 lu\u1ed3ng Mermaid.js"}]},{"@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\/2108","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\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2108"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}