{"id":2894,"date":"2026-10-16T10:43:10","date_gmt":"2026-10-16T02:43:10","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/vn\/releases\/free-mermaid-use-case-diagram-editor\/"},"modified":"2026-10-16T10:43:10","modified_gmt":"2026-10-16T02:43:10","slug":"free-mermaid-use-case-diagram-editor","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/vn\/releases\/free-mermaid-use-case-diagram-editor\/","title":{"rendered":"Tr\u00ecnh ch\u1ec9nh s\u1eeda bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng mi\u1ec5n ph\u00ed: H\u1ed7 tr\u1ee3 Mermaid trong VPasCode"},"content":{"rendered":"

\"S\u01a1<\/p>\n

Bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng<\/a> gi\u00fap c\u00e1c nh\u00f3m gi\u1ea3i th\u00edch c\u00e1ch con ng\u01b0\u1eddi v\u00e0 c\u00e1c h\u1ec7 th\u1ed1ng b\u00ean ngo\u00e0i t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u00e1c ch\u1ee9c n\u0103ng m\u00e0 h\u1ec7 th\u1ed1ng cung c\u1ea5p. B\u00e2y gi\u1edd b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o ch\u00fang trong Mermaid v\u00e0 xem tr\u01b0\u1edbc trong VPasCode. Kh\u1ea3 n\u0103ng m\u1edbi n\u00e0y m\u1edf r\u1ed9ng h\u1ed7 tr\u1ee3 bi\u1ec3u \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 c\u1ee7a VPasCode v\u00e0 cung c\u1ea5p cho b\u1ea1n m\u1ed9t c\u00e1ch kh\u00e1c \u0111\u1ec3 m\u00f4 t\u1ea3 h\u00e0nh vi h\u1ec7 th\u1ed1ng b\u1eb1ng v\u0103n b\u1ea3n thay v\u00ec v\u1ebd t\u1eebng ph\u1ea7n t\u1eed b\u1eb1ng tay.<\/p>\n

\u0110\u00e3 s\u1eed d\u1ee5ng Mermaid cho t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt? B\u00e2y gi\u1edd b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng VPasCode nh\u01b0 m\u1ed9ttr\u00ecnh ch\u1ec9nh s\u1eeda bi\u1ec3u \u0111\u1ed3 Mermaid<\/strong>cho bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng, c\u00f9ng v\u1edbi c\u00e1c lo\u1ea1i bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 kh\u00e1c. N\u1ebfu b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm m\u1ed9ttr\u00ecnh ch\u1ec9nh s\u1eeda bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng mi\u1ec5n ph\u00ed<\/strong>\u0111\u1ec3 chuy\u1ec3n c\u00fa ph\u00e1p Mermaid th\u00e0nh bi\u1ec3u \u0111\u1ed3 tr\u1ef1c quan, h\u00e3y th\u1eed n\u00f3 trongtr\u00ecnh ch\u1ec9nh s\u1eeda VPasCode<\/a>.<\/p>\n

C\u00f3 g\u00ec m\u1edbi: Bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Mermaid<\/h2>\n

VPasCode \u0111\u00e3 h\u1ed7 tr\u1ee3 bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng PlantUML. V\u1edbi b\u1ea3n c\u1eadp nh\u1eadt n\u00e0y, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 vi\u1ebft ch\u00fang b\u1eb1ng c\u00fa ph\u00e1pusecase-beta<\/code> c\u1ee7a Mermaid, c\u00f3 s\u1eb5n trong Mermaid 12.0.0 v\u00e0 c\u00e1c phi\u00ean b\u1ea3n sau. C\u00fa ph\u00e1p n\u00e0y bi\u1ec3u di\u1ec5n c\u00e1c vai tr\u00f2, tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng, ranh gi\u1edbi h\u1ec7 th\u1ed1ng v\u00e0 c\u00e1c m\u1ed1i quan h\u1ec7 gi\u1eefa c\u00e1c vai tr\u00f2 v\u00e0 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng.<\/p>\n

Vi\u1ec7c b\u1ed5 sung n\u00e0y gi\u00fap d\u1ec5 d\u00e0ng h\u01a1n trong vi\u1ec7c duy tr\u00ec c\u00e1c m\u00f4 h\u00ecnh tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng trong c\u00f9ng quy tr\u00ecnh l\u00e0m vi\u1ec7c d\u1ef1a tr\u00ean v\u0103n b\u1ea3n v\u1edbi c\u00e1c bi\u1ec3u \u0111\u1ed3 Mermaid kh\u00e1c c\u1ee7a b\u1ea1n. Ch\u1ec9nh s\u1eeda m\u00e3 ngu\u1ed3n, hi\u1ec3n th\u1ecb b\u1ea3n xem tr\u01b0\u1edbc v\u00e0 \u0111i\u1ec1u ch\u1ec9nh bi\u1ec3u \u0111\u1ed3 khi y\u00eau c\u1ea7u thay \u0111\u1ed5i.<\/p>\n

\"Infographic<\/p>\n

V\u00ed d\u1ee5: Bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng ATM<\/h2>\n

V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y hi\u1ec3n th\u1ecb hai vai tr\u00f2 v\u00e0 c\u00e1c ch\u1ee9c n\u0103ng ATM m\u00e0 h\u1ecd c\u00f3 th\u1ec3 truy c\u1eadp. Ranh gi\u1edbi h\u1ec7 th\u1ed1ng nh\u00f3m c\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng thu\u1ed9c v\u1ec1 H\u1ec7 th\u1ed1ng ATM.<\/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 
usecase-beta\r\ndirection LR\r\nactor User(\"User\")\r\nactor Technician(\"Technician\")\r\nsystemBoundary \"ATM System\"\r\n  Withdraw(\"Withdraw Cash\")\r\n  Transfer(\"Transfer Cash\")\r\n  Deposit(\"Deposit Cash\")\r\n  SettleBills(\"Settle Bills\")\r\n  Repair(\"Repair ATM\")\r\nend\r\nUser --> Withdraw\r\nUser --> Transfer\r\nUser --> Deposit\r\nUser --> SettleBills\r\nTechnician --> Repair<\/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
\u1ede \u0111\u00e2y,actor<\/code> khai b\u00e1o nh\u1eefng ng\u01b0\u1eddi t\u01b0\u01a1ng t\u00e1c v\u1edbi h\u1ec7 th\u1ed1ng, v\u00e0 m\u1ed7i tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng c\u00f3 t\u00ean \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ch\u1ee9c n\u0103ng. Ph\u1ea7nsystemBoundary<\/code> nh\u00f3m c\u00e1c ch\u1ee9c n\u0103ng \u0111\u00f3 d\u01b0\u1edbi H\u1ec7 th\u1ed1ng ATM. C\u00e1c m\u0169i t\u00ean hi\u1ec3n th\u1ecb ch\u1ee9c n\u0103ng n\u00e0o m\u00e0 m\u1ed7i vai tr\u00f2 c\u00f3 th\u1ec3 truy c\u1eadp, trong khidirection LR<\/code> y\u00eau c\u1ea7u b\u1ed1 c\u1ee5c t\u1eeb tr\u00e1i sang ph\u1ea3i.<\/p>\n
T\u1ea1i sao s\u1eed d\u1ee5ng Mermaid cho bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng?<\/h2>\n
Bi\u1ec3u \u0111\u1ed3 d\u1ef1a tr\u00ean v\u0103n b\u1ea3n c\u00f3 th\u1ec3 th\u1ef1c t\u1ebf khi b\u1ea1n mu\u1ed1n m\u1ed9t m\u00f4 h\u00ecnh d\u1ec5 d\u00e0ng ch\u1ec9nh s\u1eeda c\u00f9ng v\u1edbi c\u00e1c y\u00eau c\u1ea7u, t\u00e0i li\u1ec7u ho\u1eb7c m\u00e3. Thay v\u00ec di chuy\u1ec3n th\u1ee7 c\u00f4ng c\u00e1c h\u00ecnh d\u1ea1ng, b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i nh\u00e3n, th\u00eam m\u1ed9t vai tr\u00f2 ho\u1eb7c c\u1eadp nh\u1eadt m\u1ed9t m\u1ed1i quan h\u1ec7 trong m\u00e3 ngu\u1ed3n. \u0110i\u1ec1u n\u00e0y khi\u1ebfn Mermaid h\u1eefu \u00edch cho c\u00e1c cu\u1ed9c th\u1ea3o lu\u1eadn thi\u1ebft k\u1ebf ban \u0111\u1ea7u c\u0169ng nh\u01b0 \u0111\u1ec3 gi\u1eef cho c\u00e1c bi\u1ec3u \u0111\u1ed3 lu\u00f4n c\u1eadp nh\u1eadt khi h\u1ec7 th\u1ed1ng ph\u00e1t tri\u1ec3n.<\/p>\n
Bi\u1ec3u \u0111\u1ed3 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng c\u00f3 th\u1ec3 gi\u00fap c\u00e1c nh\u00e0 qu\u1ea3n l\u00fd s\u1ea3n ph\u1ea9m, nh\u00e0 ph\u00e2n t\u00edch nghi\u1ec7p v\u1ee5, nh\u00e0 ph\u00e1t tri\u1ec3n, ki\u1ebfn tr\u00fac s\u01b0 v\u00e0 c\u00e1c b\u00ean li\u00ean quan x\u00e2y d\u1ef1ng m\u1ed9t b\u1ee9c tranh chung v\u1ec1 ph\u1ea1m vi h\u1ec7 th\u1ed1ng. Ch\u00fang gi\u00fap vi\u1ec7c th\u1ea3o lu\u1eadn c\u00e1c c\u00e2u h\u1ecfi nh\u01b0 sau tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n:<\/p>\n