{"id":2101,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-state-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-state-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i Mermaid.js"},"content":{"rendered":"<h2>S\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i l\u00e0 g\u00ec?<\/h2>\n<p>M\u1ed9t <strong>S\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i<\/strong> (c\u0169ng \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 s\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i) l\u00e0 m\u1ed9t s\u01a1 \u0111\u1ed3 h\u00e0nh vi <strong>s\u01a1 \u0111\u1ed3 UML<\/strong> m\u00f4 h\u00ecnh h\u00f3a v\u00f2ng \u0111\u1eddi h\u1eefu h\u1ea1n c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng ho\u1eb7c h\u1ec7 th\u1ed1ng con duy nh\u1ea5t. \u0110\u01b0\u1ee3c c\u00f4ng nh\u1eadn l\u00e0 m\u1ed9t lo\u1ea1i s\u01a1 \u0111\u1ed3 UML c\u1ed1t l\u00f5i, <strong>lo\u1ea1i s\u01a1 \u0111\u1ed3 UML<\/strong>, n\u00f3 minh h\u1ecda c\u00e1c \u0111i\u1ec1u ki\u1ec7n r\u1eddi r\u1ea1c (tr\u1ea1ng th\u00e1i) m\u00e0 m\u1ed9t th\u1ef1c th\u1ec3 c\u00f3 th\u1ec3 chi\u1ebfm gi\u1eef, c\u00e1c s\u1ef1 ki\u1ec7n b\u00ean ngo\u00e0i ho\u1eb7c k\u00edch ho\u1ea1t g\u00e2y ra s\u1ef1 chuy\u1ec3n \u0111\u1ed5i gi\u1eefa c\u00e1c \u0111i\u1ec1u ki\u1ec7n \u0111\u00f3 (chuy\u1ec3n ti\u1ebfp), v\u00e0 c\u00e1c nh\u00e1nh quy t\u1eafc \u0111i\u1ec1u ki\u1ec7n thay \u0111\u1ed5i c\u00e1c con \u0111\u01b0\u1eddng th\u1ef1c thi. Vi\u1ec7c \u00e1nh x\u1ea1 n\u00e0y l\u00e0 thi\u1ebft y\u1ebfu \u0111\u1ec3 theo d\u00f5i v\u00f2ng \u0111\u1eddi \u0111\u1ed1i t\u01b0\u1ee3ng ph\u1ee9c t\u1ea1p, ch\u1eb3ng h\u1ea1n nh\u01b0 ti\u1ebfn tr\u00ecnh c\u1ee7a m\u1ed9t \u0111\u01a1n h\u00e0ng t\u1eeb th\u1ef1c hi\u1ec7n \u0111\u1ebfn giao h\u00e0ng, chu\u1ed7i th\u1eddi gian h\u1ebft h\u1ea1n phi\u00ean ng\u01b0\u1eddi d\u00f9ng, ho\u1eb7c v\u00f2ng l\u1eb7p c\u00f4ng t\u1eafc ph\u1ea7n c\u1ee9ng nh\u00fang.<\/p>\n<p>V\u1edbi <strong>Mermaid.js<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u00e1c m\u00e1y tr\u1ea1ng th\u00e1i ph\u1ea3n \u1ee9ng c\u1ee7a m\u00ecnh b\u1eb1ng s\u01a1 \u0111\u1ed3 khai b\u00e1o, d\u1ef1a tr\u00ean v\u0103n b\u1ea3n. B\u1ed9 x\u1eed l\u00fd c\u00fa ph\u00e1p t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n kho\u1ea3ng c\u00e1ch b\u1ed1 c\u1ee5c t\u1ed1i \u01b0u, x\u1eed l\u00fd c\u00e1c m\u0169i t\u00ean v\u00f2ng l\u1eb7p \u0111\u1ec7 quy, v\u00e0 \u0111i\u1ec1u ch\u1ec9nh bi\u00ean gi\u1edbi ch\u1ee9a tr\u1ea1ng th\u00e1i m\u1ed9t c\u00e1ch m\u01b0\u1ee3t m\u00e0.<\/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 tr\u1ea1ng th\u00e1i UML ch\u00ednh x\u00e1c, tu\u00e2n th\u1ee7 chu\u1ea9n trong Mermaid, b\u1ea1n ph\u1ea3i th\u00e0nh th\u1ea1o c\u00e1c d\u1ea5u hi\u1ec7u v\u00e0o\/ra, chu\u1ed7i chuy\u1ec3n ti\u1ebfp, nh\u00fang h\u1ee3p th\u00e0nh v\u00e0 c\u00e1c kh\u1ed1i l\u1ef1a ch\u1ecdn \u0111i\u1ec1u ki\u1ec7n.<\/p>\n<h3>1. X\u00e1c \u0111\u1ecbnh tr\u1ea1ng th\u00e1i v\u00e0o, ra v\u00e0 tr\u1ea1ng th\u00e1i chu\u1ea9n<\/h3>\n<p>B\u1ea1n kh\u1edfi t\u1ea1o b\u1ea3ng tr\u1ea1ng th\u00e1i tr\u00ean d\u00f2ng \u0111\u1ea7u ti\u00ean b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a <code>stateDiagram-v2<\/code> t\u1eeb kh\u00f3a. V\u00f2ng \u0111\u1eddi y\u00eau c\u1ea7u c\u00e1c \u0111i\u1ec3m b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac r\u00f5 r\u00e0ng, \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n b\u1eb1ng k\u00fd hi\u1ec7u h\u00ecnh tr\u00f2n \u0111\u1ea7y (<code>[*]<\/code>):<\/p>\n<ul>\n<li><strong>Tr\u1ea1ng th\u00e1i ban \u0111\u1ea7u (v\u00e0o):<\/strong> <code>[*] --&gt; T\u00eanTr\u1ea1ngTh\u00e1i<\/code> (\u0110\u00e1nh d\u1ea5u n\u01a1i v\u00f2ng \u0111\u1eddi b\u1eaft \u0111\u1ea7u).<\/li>\n<li><strong>Tr\u1ea1ng th\u00e1i k\u1ebft th\u00fac (ra):<\/strong> <code>T\u00eanTr\u1ea1ngTh\u00e1i --&gt; [*]<\/code> (\u0110\u00e1nh d\u1ea5u n\u01a1i v\u00f2ng \u0111\u1eddi k\u1ebft th\u00fac).<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFz5ScVIgIiAUWAkoBAHu\/DUo=\" 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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFv\/RjG\/LSnTMe7p4LkUASACsAKgQAxhEWFg==\" \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\">stateDiagram-v2\r\n    [*] --&gt; Ng\u01b0ngCh\u1edd\r\n    Ng\u01b0ngCh\u1edd --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFv\/RjG\/LSnTMe7p4LkUASACsAKgQAxhEWFg==\" \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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFz5ScVIgIiAUWAkoBAHu\/DUo=\" 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=\"SiHpwMe\"><img alt=\"\" class=\"alignnone size-full wp-image-634\" decoding=\"async\" height=\"184\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png\" width=\"60\"\/><\/p>\n<h3>2. C\u1ea5u h\u00ecnh c\u00e1c b\u1ed9 k\u00edch ho\u1ea1t chuy\u1ec3n ti\u1ebfp v\u00e0 nh\u00e3n s\u1ef1 ki\u1ec7n<\/h3>\n<p>\u0110\u1ec3 \u00e1nh x\u1ea1 m\u1ed9t thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i, k\u1ebft n\u1ed1i c\u00e1c token tr\u1ea1ng th\u00e1i \u0111\u00e3 \u0111\u1ecbnh ngh\u0129a c\u1ee7a b\u1ea1n b\u1eb1ng m\u1ed9t \u0111\u01b0\u1eddng m\u0169i t\u00ean ti\u00eau chu\u1ea9n (&#8220;<code>--&gt;<\/code>). \u0110\u1ec3 ghi ch\u00fa ch\u00ednh x\u00e1c s\u1ef1 ki\u1ec7n, ph\u1ea3n h\u1ed3i API ho\u1eb7c nh\u1ea5p chu\u1ed9t n\u00fat g\u00e2y ra chuy\u1ec3n ti\u1ebfp n\u00e0y, th\u00eam d\u1ea5u hai ch\u1ea5m (&#8220;<code>:<\/code>) theo sau l\u00e0 chu\u1ed7i v\u0103n b\u1ea3n m\u00f4 t\u1ea3 c\u1ee7a b\u1ea1n:<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAAsfkksyyVAVdXTuF4NLigtS8lNQUBSuFgMTK3NS8ErfEzJzUFIhKhDRIMVSflYJnXll+ZnJqcGpJCVApAEGuIFE=\" 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:eNorLkksSXXJTEwvSszVLTPi5VIAAsfkksyyVAVdXTuF4NLigtS8lNQUBSuFgMTK3NS8ErfEzJzUFIhKhDRIMVSflYJnXll+ZnJqcGpJCVApAEGuIFE=\" \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\">stateDiagram-v2\r\n    Active --&gt; Suspended : PaymentFailed\r\n    Suspended --&gt; Active : InvoiceSettled<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAAsfkksyyVAVdXTuF4NLigtS8lNQUBSuFgMTK3NS8ErfEzJzUFIhKhDRIMVSflYJnXll+ZnJqcGpJCVApAEGuIFE=\" \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:eNorLkksSXXJTEwvSszVLTPi5VIAAsfkksyyVAVdXTuF4NLigtS8lNQUBSuFgMTK3NS8ErfEzJzUFIhKhDRIMVSflYJnXll+ZnJqcGpJCVApAEGuIFE=\" 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=\"djvhsUF\"><img alt=\"\" class=\"alignnone size-full wp-image-635\" decoding=\"async\" height=\"170\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904116de63.png\" width=\"245\"\/><\/p>\n<h3>3. Tri\u1ec3n khai c\u00e1c kh\u1ed1i l\u1ef1a ch\u1ecdn \u0111i\u1ec1u ki\u1ec7n<\/h3>\n<p>\u0110\u1ec3 x\u1eed l\u00fd c\u00e1c v\u00f2ng l\u1eb7p \u0111\u00e1nh gi\u00e1 nh\u00e1nh, s\u1eed d\u1ee5ng<code>&lt;&lt;choice&gt;&gt;<\/code>ki\u1ec3u d\u00e1ng. \u0110i\u1ec1u n\u00e0y t\u1ea1o ra m\u1ed9t h\u00ecnh thoi r\u00f5 r\u00e0ng tr\u00ean b\u1ea3ng v\u1ebd, chia m\u1ed9t \u0111\u01b0\u1eddng chuy\u1ec3n ti\u1ebfp \u0111\u1ea7u v\u00e0o duy nh\u1ea5t th\u00e0nh nhi\u1ec1u \u0111\u01b0\u1eddng chuy\u1ec3n ti\u1ebfp \u0111\u1ea7u ra kh\u00e1c nhau d\u1ef1a tr\u00ean c\u00e1c ki\u1ec3m tra logic t\u1ea1i th\u1eddi \u0111i\u1ec3m ch\u1ea1y:<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUohM00hKTEnMS85VcHOVsHQwACHruCSxLyUxKIUTG02IF0A7rQ5Ow==\" 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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUohM00hKTEnMS85VcHOVsHQwACHruCSxLyUxKIUTG02IF0A7rQ5Ow==\" \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\">stateDiagram-v2\r\n    state check_status &lt;&lt;choice&gt;&gt;\r\n    [*] --&gt; check_status\r\n    check_status --&gt; PremiumUser : if balance &gt;= 100\r\n    check_status --&gt; StandardUser : if balance &lt; 100<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUohM00hKTEnMS85VcHOVsHQwACHruCSxLyUxKIUTG02IF0A7rQ5Ow==\" \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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUohM00hKTEnMS85VcHOVsHQwACHruCSxLyUxKIUTG02IF0A7rQ5Ow==\" 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=\"HypodAD\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-636\" decoding=\"async\" fetchpriority=\"high\" height=\"222\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904161772d.png\" width=\"298\"\/><\/p>\n<h3>4. C\u1ea5u tr\u00fac c\u00e1c tr\u1ea1ng th\u00e1i h\u1ee3p (l\u1ed3ng gh\u00e9p)<\/h3>\n<p>Khi m\u00f4 h\u00ecnh h\u00f3a m\u1ed9t h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p, m\u1ed9t tr\u1ea1ng th\u00e1i c\u1ea5p cao duy nh\u1ea5t c\u00f3 th\u1ec3 ch\u1ee9a v\u00f2ng \u0111\u1eddi n\u1ed9i b\u1ed9 \u0111\u1ed9c l\u1eadp c\u1ee7a ch\u00ednh n\u00f3. B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c tr\u1ea1ng th\u00e1i con l\u1ed3ng gh\u00e9p b\u1eb1ng c\u00e1ch x\u00e1c \u0111\u1ecbnh m\u1ed9t tr\u1ea1ng th\u00e1i cha theo sau l\u00e0 m\u1ed9t kh\u1ed1i th\u00e2n \u0111\u01b0\u1ee3c bao quanh b\u1edfi d\u1ea5u ngo\u1eb7c nh\u1ecdn:<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UAhKTsxPTgZIIKbgQWIFPYlJqDly+FgAmQR80\" 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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UAhKTsxPTgZIIKbgQWIFPYlJqDly+FgAmQR80\" \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\">stateDiagram-v2\r\n    state OrderProcessing {\r\n        [*] --&gt; Packaging\r\n        Packaging --&gt; Labeling\r\n    }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UAhKTsxPTgZIIKbgQWIFPYlJqDly+FgAmQR80\" \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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UAhKTsxPTgZIIKbgQWIFPYlJqDly+FgAmQR80\" 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=\"GxeUbLP\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-637\" decoding=\"async\" height=\"335\" loading=\"lazy\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190419d2120.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190419d2120.png 174w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190419d2120-156x300.png 156w\" width=\"174\"\/><\/p>\n<h2>C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t cho b\u1ed1 c\u1ee5c m\u00e1y tr\u1ea1ng th\u00e1i s\u1ea1ch s\u1ebd<\/h2>\n<ul>\n<li><strong>Gi\u1eef c\u00e1c token tr\u1ea1ng th\u00e1i ng\u1eafn g\u1ecdn:<\/strong> S\u1eed d\u1ee5ng c\u00e1c chu\u1ed7i v\u0103n b\u1ea3n CamelCase ng\u1eafn g\u1ecdn cho c\u00e1c token tr\u1ea1ng th\u00e1i n\u1ed9i b\u1ed9 c\u1ee7a b\u1ea1n (v\u00ed d\u1ee5,<code>AwaitingRefund<\/code>). N\u1ebfu b\u1ea1n c\u1ea7n m\u1ed9t ti\u00eau \u0111\u1ec1 m\u00f4 t\u1ea3 d\u00e0i tr\u00ean b\u1ea3ng v\u1ebd, h\u00e3y s\u1eed d\u1ee5ng<code>state \"Kh\u1ed1i v\u0103n b\u1ea3n m\u00f4 t\u1ea3\" nh\u01b0 Token<\/code> c\u00fa ph\u00e1p \u0111\u1ec3 t\u1ea1o m\u1ed9t bi\u1ec7t danh r\u00f5 r\u00e0ng.<\/li>\n<li><strong>Thi\u1ebft l\u1eadp m\u1ed9t \u0111i\u1ec3m v\u00e0o duy nh\u1ea5t:<\/strong> Lu\u00f4n b\u1eaft \u0111\u1ea7u s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n t\u1eeb m\u1ed9t \u0111i\u1ec3m duy nh\u1ea5t <code>[*]<\/code> n\u00fat. Vi\u1ec7c c\u00f3 nhi\u1ec1u \u0111i\u1ec3m kh\u1edfi \u0111\u1ea7u c\u00f3 th\u1ec3 g\u00e2y nh\u1ea7m l\u1eabn cho ng\u01b0\u1eddi d\u00f9ng khi c\u1ed1 g\u1eafng theo d\u00f5i \u0111\u01b0\u1eddng d\u1eabn kh\u1edfi t\u1ea1o g\u1ed1c c\u1ee7a h\u1ec7 th\u1ed1ng.<\/li>\n<li><strong>Lu\u00f4n s\u1eed d\u1ee5ng stateDiagram-v2:<\/strong> Lu\u00f4n ch\u1ecdn <code>stateDiagram-v2<\/code> t\u1eeb kh\u00f3a thay v\u00ec <code>stateDiagram<\/code> c\u1edd. B\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb v2 s\u1eed d\u1ee5ng thu\u1eadt to\u00e1n b\u1ed1 c\u1ee5c \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt, mang l\u1ea1i \u0111\u1ecbnh tuy\u1ebfn \u0111\u01b0\u1eddng n\u00e9t s\u1ea1ch s\u1ebd h\u01a1n v\u00e0 c\u0103n ch\u1ec9nh h\u1ed9p l\u1ed3ng nhau t\u1ed1t h\u01a1n.<\/li>\n<\/ul>\n<h2>C\u00e1c v\u00ed d\u1ee5 s\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i Mermaid.js trong th\u1ebf gi\u1edbi th\u1ef1c<\/h2>\n<h3>V\u00ed d\u1ee5 1: Chu k\u1ef3 v\u00f2ng \u0111\u1eddi giao d\u1ecbch v\u00ed k\u1ef9 thu\u1eadt s\u1ed1 (nh\u00e1nh l\u1ef1a ch\u1ecdn v\u00e0 v\u00f2ng l\u1eb7p l\u1ed7i)<\/h3>\n<p>B\u1ea3n thi\u1ebft k\u1ebf ch\u1ee9c n\u0103ng n\u00e0y m\u00f4 ph\u1ecfng chu k\u1ef3 v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t giao d\u1ecbch thanh to\u00e1n k\u1ef9 thu\u1eadt s\u1ed1, cho th\u1ea5y c\u00e1ch giao d\u1ecbch di chuy\u1ec3n t\u1eeb \u0111i\u1ec3m g\u1eedi ban \u0111\u1ea7u th\u00f4ng qua nh\u00e1nh ki\u1ec3m tra gian l\u1eadn \u0111\u1ebfn c\u00e1c tr\u1ea1ng th\u00e1i s\u1ed5 c\u00e1i cu\u1ed1i c\u00f9ng.<\/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:eNp9kT9PwzAQxfdK\/Q6ekbIwVlWkQstUBMLdEEKHfbhW\/CeyzwG+PU5C3UBQPXi4e+\/9zudIQLjVoALYqrteLlg+sS+y9wBJvoojioat1+LotcC6Xi5GzfPVC6uqmh0CuMjTm9VEKMfe79ogm4at2O4TRSJ80rHZxIgxWnR0Sp5KC2HTtsF3OWzFehfjwgdke\/9xwXNnQKm\/lp3BDsqkk3lP6v+Q9+ASmHyDwvDQYQha4iXvFoXRbvDy\/NSg6eugLfpEM27B9GaORAb7bTyik9qpHHDrbV7kHmVmj765qoCzuDVIA\/kGXHOW8iRE3vSMX0btM\/KvTlrnsJ\/eN93zsSs=\" 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:eNp9kr9OwzAQh\/dKfYebkbIwVlWlquXPiGg3hJDrGttqYof4ErHzAjAwIrUgBAsbUyrE4L6I36RO0oagVvVk+X733WfLBgmyoSQ8IVGQHbdb4JcpDuE2Ien0hgpGZ9DtUqElZb1eu1Vlro6uIQh6ME6IMqN0EklENq1q\/8\/KWBPWgZN7RlNkl9LM+sYwYyKmcEtuRusJ\/ThOdOZhHVg9Srd8iCBxyw8JiYaxcPl7fKD5NCSc7+8dEF01Nsy38X3Dz4SE1ZP9BBQeAdR+Kw7UbwncpS5\/UxDan0OsIaOhVCXr3OW\/WIJeJHBJFEw8QUPk8i\/csaolCtSIIYaseLULpqbSO1RqmZ1rMG757M0WsurezdYyAx3FIcPSZizsXInNjVAQv0dtFwoUt68KiirfkapvUyD9l2iU\/tib2hpnotnk\" \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\">stateDiagram-v2\r\n    state fraud_check &lt;&lt;choice&gt;&gt;\r\n\r\n    [*] --&gt; TransSubmitted\r\n    TransSubmitted --&gt; fraud_check : ExecuteRiskAssessment\r\n\r\n    fraud_check --&gt; TransApproved : \u0110i\u1ec3m r\u1ee7i ro Th\u1ea5p\r\n    fraud_check --&gt; TransFlagged : \u0110i\u1ec3m r\u1ee7i ro Cao\r\n    \r\n    TransFlagged --&gt; TransApproved : Ghi \u0111\u00e8 th\u1ee7 c\u00f4ng c\u1ee7a qu\u1ea3n l\u00fd\r\n    TransFlagged --&gt; TransDeclined : H\u1ebft th\u1eddi gian b\u1ea3o m\u1eadt\r\n    \r\n    TransApproved --&gt; SettlementPending : Ghi v\u00e0o s\u1ed5 c\u00e1i\r\n    SettlementPending --&gt; TransCompleted : Th\u00e0nh c\u00f4ng thanh to\u00e1n ng\u00e2n h\u00e0ng\r\n    \r\n    TransDeclined --&gt; [*]\r\n    TransCompleted --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9kr9OwzAQh\/dKfYebkbIwVlWlquXPiGg3hJDrGttqYof4ErHzAjAwIrUgBAsbUyrE4L6I36RO0oagVvVk+X733WfLBgmyoSQ8IVGQHbdb4JcpDuE2Ien0hgpGZ9DtUqElZb1eu1Vlro6uIQh6ME6IMqN0EklENq1q\/8\/KWBPWgZN7RlNkl9LM+sYwYyKmcEtuRusJ\/ThOdOZhHVg9Srd8iCBxyw8JiYaxcPl7fKD5NCSc7+8dEF01Nsy38X3Dz4SE1ZP9BBQeAdR+Kw7UbwncpS5\/UxDan0OsIaOhVCXr3OW\/WIJeJHBJFEw8QUPk8i\/csaolCtSIIYaseLULpqbSO1RqmZ1rMG757M0WsurezdYyAx3FIcPSZizsXInNjVAQv0dtFwoUt68KiirfkapvUyD9l2iU\/tib2hpnotnk\" \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:eNp9kT9PwzAQxfdK\/Q6ekbIwVlWkQstUBMLdEEKHfbhW\/CeyzwG+PU5C3UBQPXi4e+\/9zudIQLjVoALYqrteLlg+sS+y9wBJvoojioat1+LotcC6Xi5GzfPVC6uqmh0CuMjTm9VEKMfe79ogm4at2O4TRSJ80rHZxIgxWnR0Sp5KC2HTtsF3OWzFehfjwgdke\/9xwXNnQKm\/lp3BDsqkk3lP6v+Q9+ASmHyDwvDQYQha4iXvFoXRbvDy\/NSg6eugLfpEM27B9GaORAb7bTyik9qpHHDrbV7kHmVmj765qoCzuDVIA\/kGXHOW8iRE3vSMX0btM\/KvTlrnsJ\/eN93zsSs=\" 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=\"FzzxFeh\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-638\" decoding=\"async\" height=\"742\" loading=\"lazy\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19041e24943.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19041e24943.png 397w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19041e24943-161x300.png 161w\" width=\"397\"\/><\/p>\n<p><strong>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p:<\/strong> Quy tr\u00ecnh n\u00e0y s\u1eed d\u1ee5ng m\u1ed9t <code>&lt;&lt;choice&gt;&gt;<\/code> kh\u1ed1i \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 \u0111i\u1ec3m an to\u00e0n ngay t\u1eeb \u0111\u1ea7u. Giao d\u1ecbch chuy\u1ec3n ti\u1ebfp theo c\u00e1c h\u00e0nh tr\u00ecnh ri\u00eang bi\u1ec7t d\u1ef1a tr\u00ean c\u00e1c \u0111i\u1ec3m s\u1ed1 n\u00e0y, v\u1edbi t\u00ean s\u1ef1 ki\u1ec7n r\u00f5 r\u00e0ng (nh\u01b0 <code>ExecuteRiskAssessment<\/code>) \u0111\u01b0\u1ee3c ghi ch\u00fa tr\u1ef1c ti\u1ebfp tr\u00ean c\u00e1c m\u0169i t\u00ean chuy\u1ec3n ti\u1ebfp.<\/p>\n<h3>V\u00ed d\u1ee5 2: D\u00f2ng ch\u1ea3y ho\u00e0n th\u00e0nh \u0111\u01a1n h\u00e0ng th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed (h\u1ec7 th\u1ed1ng l\u1ed3ng gh\u00e9p ph\u1ee9c h\u1ee3p)<\/h3>\n<p>B\u1ea3n thi\u1ebft k\u1ebf doanh nghi\u1ec7p n\u00e2ng cao n\u00e0y m\u00f4 t\u1ea3 to\u00e0n b\u1ed9 chu k\u1ef3 v\u00f2ng \u0111\u1eddi v\u1eadn chuy\u1ec3n v\u00e0 qu\u1ea3n l\u00fd \u0111\u01a1n h\u00e0ng, s\u1eed d\u1ee5ng c\u00e1c kh\u1ed1i h\u1ee3p th\u00e0nh l\u1ed3ng gh\u00e9p \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c thao t\u00e1c n\u1ed9i b\u1ed9 \u0111ang di\u1ec5n ra trong giai \u0111o\u1ea1n ho\u00e0n th\u00e0nh.<\/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:eNplUEtPwzAMviPxH3JG6oXjDkis02DS0II4Ig6mcVdraVo5yUSF+O\/ksWop+BBF\/l62rQOHG4IjQ1+d729vRKj3uw9RVQ\/iwApZamhQZSC\/RTvRdmbrdUta92icWAkJU\/zVMDrPS6mNcX8E3xkqg3cOe0nNiczxChbNRHr1oMlNj15RTF2Da7qIz4mxFpwoesMmzLQeviRkp5VIoARrS+E\/XhTXwEzIL2CoRevEExrksJAKLnv4RC2ZjJttfsrFlyunSToaxyS92D6DUbaDE2bFjEfuBjWdkRP74N124EtnqgfTEvfLK1\/pURyO+gvdUZF9\" 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:eNplkLFKxEAQhnvBd5haSGN5haAeHoeIES0EsViSuezgZhM2m2AQK1\/Aq20MwVKwsEoKixy+R97E3cTj9nSLYdn5\/2\/+nUwzjVNikWKxV+zv7oA5N3u34HkHcK5CVL5gAYZjY6zO8yCby5NcLEiIGKWGCVxxJjnopKskrJZdbcr3R9\/WAWieu6DMDv9jfxhbboy5xtin4I5ktGk6j4PoImeCdHmYh2QzrJ7NXNE3byWI7hN49+qat8TWfYlBrvAouffZiJzAKfXtUwxaMZO\/byq9sf9TW8QxU4pQnTFJC8w0zFCiMv8L12lIguRdLUfOo7uI7RUMgTil6eCdEUtAU998pVD07QuBhUTm3rxLCHhempy\/0LXLEqYoqEA1MK67KjDDB8dqyYw7slRnK2PdeCzB7P8HA\/K3MQ==\" \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\">stateDiagram-v2\r\n    [*] --&gt; OrderPlaced\r\n    \r\n    OrderPlaced --&gt; InFulfillment : Thanh to\u00e1n \u0111\u00e3 \u0111\u01b0\u1ee3c thu\r\n    \r\n    state InFulfillment {\r\n        [*] --&gt; ItemPicking\r\n        ItemPicking --&gt; QualityAudit : \u0110\u00e3 l\u1ea5y l\u00f4 h\u00e0ng\r\n        QualityAudit --&gt; SecureBoxPacking : Ki\u1ec3m tra \u0111\u1ea1t\r\n        SecureBoxPacking --&gt; CarrierManifest Generated : \u0110\u00e3 in nh\u00e3n\r\n    }\r\n    \r\n    InFulfillment --&gt; Shipped : Giao ti\u1ebfp v\u1edbi h\u00e3ng v\u1eadn chuy\u1ec3n\r\n    Shipped --&gt; Delivered : X\u00e1c nh\u1eadn \u0111ang giao h\u00e0ng\r\n    \r\n    Delivered --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplkLFKxEAQhnvBd5haSGN5haAeHoeIES0EsViSuezgZhM2m2AQK1\/Aq20MwVKwsEoKixy+R97E3cTj9nSLYdn5\/2\/+nUwzjVNikWKxV+zv7oA5N3u34HkHcK5CVL5gAYZjY6zO8yCby5NcLEiIGKWGCVxxJjnopKskrJZdbcr3R9\/WAWieu6DMDv9jfxhbboy5xtin4I5ktGk6j4PoImeCdHmYh2QzrJ7NXNE3byWI7hN49+qat8TWfYlBrvAouffZiJzAKfXtUwxaMZO\/byq9sf9TW8QxU4pQnTFJC8w0zFCiMv8L12lIguRdLUfOo7uI7RUMgTil6eCdEUtAU998pVD07QuBhUTm3rxLCHhempy\/0LXLEqYoqEA1MK67KjDDB8dqyYw7slRnK2PdeCzB7P8HA\/K3MQ==\" \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:eNplUEtPwzAMviPxH3JG6oXjDkis02DS0II4Ig6mcVdraVo5yUSF+O\/ksWop+BBF\/l62rQOHG4IjQ1+d729vRKj3uw9RVQ\/iwApZamhQZSC\/RTvRdmbrdUta92icWAkJU\/zVMDrPS6mNcX8E3xkqg3cOe0nNiczxChbNRHr1oMlNj15RTF2Da7qIz4mxFpwoesMmzLQeviRkp5VIoARrS+E\/XhTXwEzIL2CoRevEExrksJAKLnv4RC2ZjJttfsrFlyunSToaxyS92D6DUbaDE2bFjEfuBjWdkRP74N124EtnqgfTEvfLK1\/pURyO+gvdUZF9\" 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=\"TYltJdW\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-639\" decoding=\"async\" height=\"1083\" loading=\"lazy\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697.png 381w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697-106x300.png 106w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697-360x1024.png 360w\" width=\"381\"\/><\/p>\n<p><strong>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p:<\/strong> B\u1eb1ng c\u00e1ch bao b\u1ecdc c\u00e1c b\u01b0\u1edbc b\u00ean trong <code>state InFulfillment {...}<\/code> kh\u1ed1i th\u00e2n, b\u1ea1n t\u1ea1o ra m\u1ed9t ranh gi\u1edbi c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng tr\u00ean b\u1ea3ng v\u1ebd. B\u1ed9 x\u1eed l\u00fd coi kh\u1ed1i n\u00e0y l\u00e0 m\u1ed9t tr\u1ea1ng th\u00e1i cha h\u1ee3p nh\u1ea5t duy nh\u1ea5t khi hi\u1ec3n th\u1ecb c\u00e1c b\u01b0\u1edbc c\u00f4ng vi\u1ec7c n\u1ed9i b\u1ed9 theo th\u1ee9 t\u1ef1, gi\u00fap vi\u1ec7c \u0111i\u1ec1u h\u01b0\u1edbng c\u00e1c v\u00f2ng \u0111\u1eddi ph\u1ee9c t\u1ea1p nhi\u1ec1u l\u1edbp tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>S\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i l\u00e0 g\u00ec? M\u1ed9t S\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i (c\u0169ng \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 s\u01a1 \u0111\u1ed3 tr\u1ea1ng th\u00e1i) l\u00e0 m\u1ed9t s\u01a1 \u0111\u1ed3 h\u00e0nh vi s\u01a1 \u0111\u1ed3 UML m\u00f4 h\u00ecnh h\u00f3a v\u00f2ng \u0111\u1eddi h\u1eefu h\u1ea1n c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng ho\u1eb7c&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":5,"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-2101","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 State Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud 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-state-diagram-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-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_6a19040d605c9.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-state-diagram-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\",\"name\":\"Mermaid State 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-state-diagram-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a19040d605c9.png\",\"datePublished\":\"2026-05-26T08:05:44+00:00\",\"description\":\"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a19040d605c9.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a19040d605c9.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-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 tr\u1ea1ng th\u00e1i 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 State Diagram Syntax | VPasCode Text to Diagram Guide","description":"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud 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-state-diagram-syntax-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.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-state-diagram-syntax-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","name":"Mermaid State 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-state-diagram-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png","datePublished":"2026-05-26T08:05:44+00:00","description":"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-state-diagram-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 tr\u1ea1ng th\u00e1i 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\/2101","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=2101"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}