{"id":2087,"date":"2026-07-02T08:12:16","date_gmt":"2026-07-02T08:12:16","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-user-journey-syntax-guide\/"},"modified":"2026-07-02T08:12:16","modified_gmt":"2026-07-02T08:12:16","slug":"mermaid-js-user-journey-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng Mermaid.js"},"content":{"rendered":"

S\u01a1 \u0111\u1ed3 H\u00e0nh tr\u00ecnh Ng\u01b0\u1eddi d\u00f9ng m\u00f4 t\u1ea3 c\u00e1c b\u01b0\u1edbc m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u1ed9t m\u1ee5c ti\u00eau c\u1ee5 th\u1ec3 trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. Kh\u00e1c v\u1edbi s\u01a1 \u0111\u1ed3 l\u01b0u \u0111\u1ed3 ho\u1eb7c s\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1 t\u1eadp trung v\u00e0o h\u1ec7 th\u1ed1ng, h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng t\u1eadp trung v\u00e0o c\u00e1c h\u00e0nh \u0111\u1ed9ng c\u1ee7a con ng\u01b0\u1eddi, c\u00e1c giai \u0111o\u1ea1n quy tr\u00ecnh l\u00e0m vi\u1ec7c v\u00e0 vi\u1ec7c theo d\u00f5i m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng theo th\u1eddi gian.<\/p>\n

C\u1ea5u tr\u00fac c\u00fa ph\u00e1p c\u01a1 b\u1ea3n<\/h2>\n

M\u1ed7i h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng b\u1eaft \u0111\u1ea7u b\u1eb1ng l\u1ec7nh journey<\/code> khai b\u00e1o, ti\u1ebfp theo l\u00e0 ti\u00eau \u0111\u1ec1 v\u00e0 c\u00e1c ph\u1ea7n tu\u1ea7n t\u1ef1 ph\u00e2n t\u00edch tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/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 
journey\r\ntitle H\u00e0nh tr\u00ecnh Ng\u01b0\u1eddi d\u00f9ng M\u1eabu\r\nsection T\u00ean Giai \u0111o\u1ea1n\r\n  T\u00ean Nhi\u1ec7m v\u1ee5: \u0110i\u1ec3m: Ng\u01b0\u1eddi tham gia1, Ng\u01b0\u1eddi tham gia2<\/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
Tham chi\u1ebfu c\u00fa ph\u00e1p<\/h2>\n
B\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y ph\u00e2n t\u00edch c\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng b\u1ea3n \u0111\u1ed3 h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng trong Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Th\u00e0nh ph\u1ea7n<\/th>\nM\u00f4 t\u1ea3<\/th>\nV\u00ed d\u1ee5 c\u00fa ph\u00e1p<\/th>\n<\/tr>\n<\/thead>\n
Khai b\u00e1o<\/strong><\/td>\nKh\u1edfi t\u1ea1o tr\u00ecnh v\u1ebd s\u01a1 \u0111\u1ed3 h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng.<\/td>\njourney<\/code><\/td>\n<\/tr>\n
Ti\u00eau \u0111\u1ec1<\/strong><\/td>\nX\u00e1c \u0111\u1ecbnh ti\u00eau \u0111\u1ec1 ch\u00ednh ho\u1eb7c m\u1ee5c ti\u00eau ng\u01b0\u1eddi d\u00f9ng \u1edf \u0111\u1ea7u b\u1ea3n \u0111\u1ed3.<\/td>\ntitle Quy tr\u00ecnh \u0110\u0103ng nh\u1eadp<\/code><\/td>\n<\/tr>\n
Ph\u1ea7n<\/strong><\/td>\n\u0110\u4ee3\u8868 m\u1ed9t giai \u0111o\u1ea1n ho\u1eb7c b\u01b0\u1edbc c\u1ea5p cao trong h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng.<\/td>\nsection Giai \u0111o\u1ea1n Kh\u00e1m ph\u00e1<\/code><\/td>\n<\/tr>\n
Nhi\u1ec7m v\u1ee5<\/strong><\/td>\nM\u1ed9t h\u00e0nh \u0111\u1ed9ng c\u1ee5 th\u1ec3 m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n trong m\u1ed9t ph\u1ea7n.<\/td>\nDuy\u1ec7t t\u00e0i li\u1ec7u<\/code><\/td>\n<\/tr>\n
\u0110i\u1ec3m h\u00e0i l\u00f2ng<\/strong><\/td>\nM\u1ed9t s\u1ed1 nguy\u00ean t\u1eeb 1 \u0111\u1ebfn 5 bi\u1ec3u th\u1ecb m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng ho\u1eb7c kh\u00f3 ch\u1ecbu c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/td>\n: 4 :<\/code> (4 tr\u00ean 5)<\/em><\/td>\n<\/tr>\n
Ng\u01b0\u1eddi tham gia<\/strong><\/td>\nDanh s\u00e1ch c\u00e1c vai tr\u00f2 tham gia ho\u00e0n th\u00e0nh nhi\u1ec7m v\u1ee5, \u0111\u01b0\u1ee3c ph\u00e2n c\u00e1ch b\u1eb1ng d\u1ea5u ph\u1ea9y.<\/td>\nNg\u01b0\u1eddi d\u00f9ng, H\u1ec7 th\u1ed1ng<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
B\u1ea3n thi\u1ebft k\u1ebf th\u1ef1c t\u1ebf: Tr\u1ea3i nghi\u1ec7m thanh to\u00e1n th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed<\/h2>\n
B\u1ea3n thi\u1ebft k\u1ebf n\u00e0y tr\u00ecnh b\u00e0y to\u00e0n b\u1ed9 h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng theo d\u00f5i tr\u1ea3i nghi\u1ec7m mua h\u00e0ng tr\u1ef1c tuy\u1ebfn c\u1ee7a kh\u00e1ch h\u00e0ng, ghi nh\u1eadn c\u00e1c \u0111i\u1ec3m \u0111au c\u1ea3m x\u00fac (\u0111i\u1ec3m s\u1ed1 th\u1ea5p) v\u00e0 nh\u1eefng kho\u1ea3nh kh\u1eafc h\u00e0i l\u00f2ng (\u0111i\u1ec3m s\u1ed1 cao).<\/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                    
h\u00e0nh tr\u00ecnh\r\ntitle H\u00e0nh tr\u00ecnh Mua h\u00e0ng Tr\u1ef1c tuy\u1ebfn\r\nsection Ph\u00e1t hi\u1ec7n s\u1ea3n ph\u1ea9m\r\n  T\u00ecm ki\u1ebfm s\u1ea3n ph\u1ea9m: 4: Ng\u01b0\u1eddi d\u00f9ng\r\n  So s\u00e1nh gi\u00e1 c\u1ea3: 3: Ng\u01b0\u1eddi d\u00f9ng\r\n  Xem h\u00ecnh \u1ea3nh s\u1ea3n ph\u1ea9m: 5: Ng\u01b0\u1eddi d\u00f9ng\r\nsection B\u1eaby Thanh to\u00e1n\r\n  Th\u00eam s\u1ea3n ph\u1ea9m v\u00e0o gi\u1ecf h\u00e0ng: 4: Ng\u01b0\u1eddi d\u00f9ng\r\n  T\u1ea1o t\u00e0i kho\u1ea3n: 2: Ng\u01b0\u1eddi d\u00f9ng, H\u1ec7 th\u1ed1ng\r\n  Nh\u1eadp chi ti\u1ebft giao h\u00e0ng: 3: Ng\u01b0\u1eddi d\u00f9ng\r\n  X\u1eed l\u00fd th\u1ebb t\u00edn d\u1ee5ng: 1: Ng\u01b0\u1eddi d\u00f9ng, C\u1ed5ng thanh to\u00e1n\r\nsection Sau khi mua\r\n  Nh\u1eadn x\u00e1c nh\u1eadn email: 5: H\u1ec7 th\u1ed1ng\r\n  Theo d\u00f5i giao h\u00e0ng g\u00f3i h\u00e0ng: 4: Ng\u01b0\u1eddi d\u00f9ng, Logistics<\/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
\"\"<\/a><\/p>\n\n
M\u1eb9o c\u00fa ph\u00e1p:<\/strong>C\u00e1c \u0111i\u1ec3m s\u1ed1 h\u00e0i l\u00f2ng \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a m\u00e0u t\u1ef1 \u0111\u1ed9ng b\u1edfi tr\u00ecnh hi\u1ec3n th\u1ecb. \u0110i\u1ec3m s\u1ed1 1 ho\u1eb7c 2 l\u00e0m n\u1ed5i b\u1eadt s\u1ef1 c\u1ea3n tr\u1edf v\u1eadn h\u00e0nh (\u0111\u1ecf\/n\u00e2u), \u0111i\u1ec3m s\u1ed1 3 l\u00e0 trung t\u00ednh (v\u00e0ng), v\u00e0 c\u00e1c \u0111i\u1ec3m s\u1ed1 4 ho\u1eb7c 5 \u0111\u1ea1i di\u1ec7n cho c\u00e1c t\u01b0\u01a1ng t\u00e1c tr\u01a1n tru, th\u00e0nh c\u00f4ng (xanh l\u00e1).<\/em><\/p>\n\n
Kh\u00e1i ni\u1ec7m n\u00e2ng cao: H\u00e0nh tr\u00ecnh nhi\u1ec1u ng\u01b0\u1eddi tham gia<\/h2>\n
Trong c\u00e1c quy tr\u00ecnh ph\u1ee9c t\u1ea1p, nhi\u1ec7m v\u1ee5 hi\u1ebfm khi \u0111\u01b0\u1ee3c ho\u00e0n th\u00e0nh b\u1edfi m\u1ed9t ng\u01b0\u1eddi. Mermaid cho ph\u00e9p b\u1ea1n g\u00e1n nhi\u1ec1u ng\u01b0\u1eddi tham gia v\u00e0o m\u1ed9t nhi\u1ec7m v\u1ee5 b\u1eb1ng c\u00e1ch t\u00e1ch t\u00ean h\u1ecd b\u1eb1ng d\u1ea5u ph\u1ea9y. \u0110i\u1ec1u n\u00e0y h\u1eefu \u00edch \u0111\u1ec3 minh h\u1ecda n\u01a1i t\u01b0\u01a1ng t\u00e1c c\u1ee7a kh\u00e1ch h\u00e0ng y\u00eau c\u1ea7u h\u1ed7 tr\u1ee3 ph\u00eda sau ho\u1eb7c t\u1ef1 \u0111\u1ed9ng h\u00f3a t\u1eeb h\u1ec7 th\u1ed1ng.<\/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                    
h\u00e0nh tr\u00ecnh\r\ntitle V\u00ed d\u1ee5 H\u1ed7 tr\u1ee3 Nhi\u1ec1u Ng\u01b0\u1eddi tham gia\r\nsection V\u1ee5 h\u1ed7 tr\u1ee3 kh\u00e1ch h\u00e0ng\r\n  G\u1eedi v\u00e9 s\u1ef1 c\u1ed1: 3: Kh\u00e1ch h\u00e0ng\r\n  G\u00e1n v\u00e9 cho \u0111\u1ea1i di\u1ec7n: 4: H\u1ec7 th\u1ed1ng, Qu\u1ea3n tr\u1ecb vi\u00ean H\u1ed7 tr\u1ee3\r\n  Kh\u1ea3o s\u00e1t l\u1ed7i k\u1ef9 thu\u1eadt: 2: Nh\u00e0 ph\u00e1t tri\u1ec3n, Ki\u1ec3m th\u1eed QA\r\n  Gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 v\u00e0 th\u00f4ng b\u00e1o: 5: Qu\u1ea3n tr\u1ecb vi\u00ean H\u1ed7 tr\u1ee3<\/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
Nh\u1eefng l\u1ed7i c\u00fa ph\u00e1p ph\u1ed5 bi\u1ebfn<\/h2>\n
Khi vi\u1ebft b\u1ea3n \u0111\u1ed3 h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng, nh\u1eefng l\u1ed7i \u0111\u1ecbnh d\u1ea1ng nh\u1ecf c\u00f3 th\u1ec3 khi\u1ebfn tr\u00ecnh x\u1eed l\u00fd bi\u1ec3u \u0111\u1ed3 b\u00e1o l\u1ed7i. H\u00e3y ghi nh\u1edb ba quy t\u1eafc \u0111\u1ecbnh d\u1ea1ng n\u00e0y \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng ch\u00ednh x\u00e1c:<\/p>\n
    \n
  • Quy t\u1eafc D\u1ea5u hai ch\u1ea5m:<\/strong>M\u1ed7i d\u00f2ng nhi\u1ec7m v\u1ee5 ph\u1ea3i tu\u00e2n theo c\u1ea5u tr\u00fac ch\u00ednh x\u00e1c l\u00e0M\u00f4 t\u1ea3 nhi\u1ec7m v\u1ee5: \u0110i\u1ec3m s\u1ed1: Ng\u01b0\u1eddi tham gia<\/code>. Vi\u1ec7c qu\u00ean d\u1ea5u hai ch\u1ea5m th\u1ee9 hai tr\u01b0\u1edbc danh s\u00e1ch ng\u01b0\u1eddi tham gia l\u00e0 l\u00fd do ph\u1ed5 bi\u1ebfn nh\u1ea5t khi\u1ebfn s\u01a1 \u0111\u1ed3 h\u00e0nh tr\u00ecnh kh\u00f4ng th\u1ec3 t\u1ea3i \u0111\u01b0\u1ee3c.<\/li>\n
  • H\u1ea1n ch\u1ebf ph\u1ea1m vi \u0111i\u1ec3m s\u1ed1:<\/strong>C\u00e1c \u0111i\u1ec3m s\u1ed1 h\u00e0i l\u00f2ng ph\u1ea3i l\u00e0 s\u1ed1 nguy\u00ean n\u1eb1m trong kho\u1ea3ng t\u1eeb 1 \u0111\u1ebfn 5. Truy\u1ec1n \u0111i\u1ec3m s\u1ed1 0 ho\u1eb7c s\u1ed1 l\u1edbn h\u01a1n 5 s\u1ebd l\u00e0m h\u1ecfng tham s\u1ed1 b\u1ed1 c\u1ee5c.<\/li>\n
  • \u0110i\u1ec1u ch\u1ec9nh th\u1ee5t l\u1ec1:<\/strong>M\u1eb7c d\u00f9 Mermaid linh ho\u1ea1t v\u1edbi kho\u1ea3ng tr\u1eafng, nh\u01b0ng vi\u1ec7c gi\u1eef c\u00e1c nhi\u1ec7m v\u1ee5 \u0111\u01b0\u1ee3c th\u1ee5t l\u1ec1 d\u01b0\u1edbi c\u00e1c ph\u1ea7n t\u01b0\u01a1ng \u1ee9ng s\u1ebd gi\u00fap c\u00e1c t\u1ec7p v\u0103n b\u1ea3n th\u00f4 c\u1ee7a b\u1ea1n d\u1ec5 \u0111\u1ecdc v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n khi t\u00ednh n\u0103ng s\u1ea3n ph\u1ea9m ph\u00e1t tri\u1ec3n.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    S\u01a1 \u0111\u1ed3 H\u00e0nh tr\u00ecnh Ng\u01b0\u1eddi d\u00f9ng m\u00f4 t\u1ea3 c\u00e1c b\u01b0\u1edbc m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u1ed9t m\u1ee5c ti\u00eau c\u1ee5 th\u1ec3 trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. Kh\u00e1c v\u1edbi s\u01a1 \u0111\u1ed3 l\u01b0u \u0111\u1ed3 ho\u1eb7c s\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1 t\u1eadp…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":10,"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-2087","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid User Journey Map | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a 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-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid User Journey Map | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.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=\"3 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-user-journey-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\",\"name\":\"Mermaid User Journey Map | 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-user-journey-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\",\"datePublished\":\"2026-07-02T08:12:16+00:00\",\"description\":\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-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 h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng 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 User Journey Map | VPasCode Text to Diagram Guide","description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a 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-user-journey-syntax-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid User Journey Map | VPasCode Text to Diagram Guide","og_description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","name":"Mermaid User Journey Map | 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-user-journey-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","datePublished":"2026-07-02T08:12:16+00:00","description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-user-journey-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 h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng 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\/2087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2087"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}