{"id":2104,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-sequence-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-sequence-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-sequence-diagram-syntax-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p s\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1 Mermaid.js"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1 l\u00e0 g\u00ec?<\/h2>\n

M\u1ed9t S\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1<\/strong> l\u00e0 m\u1ed9t s\u01a1 \u0111\u1ed3 h\u00e0nh vi thi\u1ebft y\u1ebfu s\u01a1 \u0111\u1ed3 UML<\/strong> \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 tr\u1ef1c quan h\u00f3a lu\u1ed3ng theo th\u1ee9 t\u1ef1 th\u1eddi gian c\u1ee7a c\u00e1c tin nh\u1eafn, l\u1eddi g\u1ecdi h\u00e0m v\u00e0 d\u1eef li\u1ec7u truy\u1ec1n t\u1ea3i gi\u1eefa c\u00e1c th\u1ef1c th\u1ec3 h\u1ec7 th\u1ed1ng kh\u00e1c nhau theo m\u1ed9t d\u00f2ng th\u1eddi gian tuy\u1ebfn t\u00ednh. \u0110\u01b0\u1ee3c c\u00f4ng nh\u1eadn l\u00e0 m\u1ed9t lo\u1ea1i s\u01a1 \u0111\u1ed3 UML c\u1ed1t l\u00f5i,lo\u1ea1i s\u01a1 \u0111\u1ed3 UML<\/strong>, n\u00f3 m\u00f4 t\u1ea3 c\u00e1c t\u01b0\u01a1ng t\u00e1c t\u1ea1i th\u1eddi \u0111i\u1ec3m ch\u1ea1y b\u1eb1ng c\u00e1ch x\u1ebfp c\u00e1c th\u00e0nh ph\u1ea7n h\u1ec7 th\u1ed1ng d\u1ecdc theo tr\u1ee5c X nh\u01b0 c\u00e1c \u0111\u01b0\u1eddng \u0111\u1eddi d\u1ecdc v\u00e0 theo d\u00f5i c\u00e1c giao ti\u1ebfp tin nh\u1eafn d\u1ecdc theo tr\u1ee5c Y. B\u1ea3n v\u1ebd n\u00e0y v\u00f4 c\u00f9ng qu\u00fd gi\u00e1 \u0111\u1ed1i v\u1edbi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n khi g\u1ee1 l\u1ed7i c\u00e1c thao t\u00e1c trao \u0111\u1ed5i API ph\u00e2n t\u00e1n, c\u00e1c \u0111\u01b0\u1eddng d\u1eabn \u0111i\u1ec1u ph\u1ed1i microservice ho\u1eb7c c\u00e1c lu\u1ed3ng x\u00e1c th\u1ef1c ng\u01b0\u1eddi d\u00f9ng th\u1eddi gian th\u1ef1c.<\/p>\n

V\u1edbi Mermaid.js<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft m\u00e3 cho c\u00e1c quy tr\u00ecnh th\u1eddi gian ph\u1ee9c t\u1ea1p b\u1eb1ng c\u1ea5u tr\u00fac v\u0103n b\u1ea3n tr\u1ef1c quan. B\u1ed9 x\u1eed l\u00fd t\u1ef1 \u0111\u1ed9ng x\u1eed l\u00fd kho\u1ea3ng c\u00e1ch d\u1ecdc, qu\u1ea3n l\u00fd c\u0103n ch\u1ec9nh c\u00e1c m\u0169i t\u00ean tin nh\u1eafn v\u00e0 v\u1ebd c\u00e1c kh\u1ed1i k\u00edch ho\u1ea1t t\u1ea1i th\u1eddi \u0111i\u1ec3m ch\u1ea1y m\u1ed9t c\u00e1ch s\u1ea1ch s\u1ebd tr\u00ean b\u1ea3ng v\u1ebd c\u1ee7a b\u1ea1n.<\/p>\n

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

\u0110\u1ec3 thi\u1ebft k\u1ebf m\u1ed9t s\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1 UML ch\u00ednh x\u00e1c, d\u1ec5 \u0111\u1ecdc, b\u1ea1n ph\u1ea3i th\u00e0nh th\u1ea1o vi\u1ec7c khai b\u00e1o ng\u01b0\u1eddi tham gia, c\u00e1c bi\u1ebfn th\u1ec3 m\u0169i t\u00ean tin nh\u1eafn, c\u00e1c \u0111\u01b0\u1eddng \u0111\u1eddi r\u00f5 r\u00e0ng v\u00e0 c\u00e1c c\u1ea5u tr\u00fac kh\u1ed1i \u0111i\u1ec1u ki\u1ec7n.<\/p>\n

1. Khai b\u00e1o ng\u01b0\u1eddi tham gia v\u00e0 ng\u01b0\u1eddi d\u00f9ng<\/h3>\n

B\u1ea1n khai b\u00e1o m\u1ed9t th\u1ef1c th\u1ec3 h\u1ec7 th\u1ed1ng ti\u00eau chu\u1ea9n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a participant<\/code> t\u1eeb kh\u00f3a. N\u1ebfu th\u1ef1c th\u1ec3 \u0111\u1ea1i di\u1ec7n cho ng\u01b0\u1eddi d\u00f9ng cu\u1ed1i ho\u1eb7c m\u1ed9t ng\u01b0\u1eddi v\u1eadn h\u00e0nh b\u00ean ngo\u00e0i, h\u00e3y s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a actor<\/code> \u0111\u1ec3 hi\u1ec3n th\u1ecb bi\u1ec3u t\u01b0\u1ee3ng h\u00ecnh ng\u01b0\u1eddi \u0111\u01a1n gi\u1ea3n tr\u00ean b\u1ea3ng v\u1ebd:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
sequenceDiagram\r\n    actor Client\r\n    participant API as Gateway Router<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
M\u1eb9o chuy\u00ean gia:<\/em> S\u1eed d\u1ee5ng t\u1eeb kh\u00f3a as<\/code> \u0111\u1ec3 \u00e1nh x\u1ea1 c\u00e1c t\u00ean th\u00e0nh ph\u1ea7n d\u00e0i th\u00e0nh c\u00e1c bi\u1ec7t danh n\u1ed9i b\u1ed9 ng\u1eafn g\u1ecdn, gi\u00fap c\u00e1c \u0111o\u1ea1n m\u00e3 tin nh\u1eafn c\u1ee7a b\u1ea1n ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 \u0111\u1ecdc.<\/p>\n
2. \u0110\u1ecbnh d\u1ea1ng m\u0169i t\u00ean tin nh\u1eafn<\/h3>\n
Lo\u1ea1i \u0111\u01b0\u1eddng v\u00e0 \u0111\u1ea7u m\u0169i t\u00ean b\u1ea1n s\u1eed d\u1ee5ng s\u1ebd x\u00e1c \u0111\u1ecbnh phong c\u00e1ch giao ti\u1ebfp gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n h\u1ec7 th\u1ed1ng c\u1ee7a b\u1ea1n:<\/p>\n