{"id":7008,"date":"2026-08-05T11:39:41","date_gmt":"2026-08-05T03:39:41","guid":{"rendered":"https:\/\/guides.visual-paradigm.com\/vn\/how-to-embed-live-mermaid-diagrams-into-markdown-and-developer-docs\/"},"modified":"2026-08-05T11:39:41","modified_gmt":"2026-08-05T03:39:41","slug":"how-to-embed-live-mermaid-diagrams-into-markdown-and-developer-docs","status":"publish","type":"post","link":"https:\/\/guides.visual-paradigm.com\/vn\/how-to-embed-live-mermaid-diagrams-into-markdown-and-developer-docs\/","title":{"rendered":"L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 nh\u00fang c\u00e1c s\u01a1 \u0111\u1ed3 Mermaid tr\u1ef1c ti\u1ebfp v\u00e0o Markdown v\u00e0 t\u00e0i li\u1ec7u ph\u00e1t tri\u1ec3n"},"content":{"rendered":"

Duy tr\u00ec t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt ch\u00ednh x\u00e1c v\u00e0 c\u1eadp nh\u1eadt l\u00e0 m\u1ed9t trong nh\u1eefng th\u00e1ch th\u1ee9c ph\u1ed5 bi\u1ebfn nh\u1ea5t trong ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m hi\u1ec7n \u0111\u1ea1i. C\u00e1c t\u00e0i s\u1ea3n h\u00ecnh \u1ea3nh t\u0129nh \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong wiki nh\u00f3m ho\u1eb7c kho l\u01b0u tr\u1eef Git nhanh ch\u00f3ng tr\u1edf n\u00ean l\u1ed7i th\u1eddi khi ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng, h\u1ee3p \u0111\u1ed3ng API v\u00e0 l\u01b0\u1ee3c \u0111\u1ed3 c\u01a1 s\u1edf d\u1eef li\u1ec7u thay \u0111\u1ed5i. S\u1eed d\u1ee5ng m\u1ed9t n\u1ec1n t\u1ea3ng n\u1ec1n t\u1ea3ng s\u01a1 \u0111\u1ed3 m\u00e3 h\u00f3a<\/a> cho ph\u00e9p c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n nh\u00fang c\u00e1c s\u01a1 \u0111\u1ed3 \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n tr\u1ef1c ti\u1ebfp v\u00e0o c\u00e1c t\u1ec7p Markdown. B\u1eb1ng c\u00e1ch ch\u1ec9nh s\u1eeda \u0111\u1ecbnh ngh\u0129a b\u00ean trong m\u1ed9t tr\u00ecnh so\u1ea1n th\u1ea3o Mermaid d\u1ef1a tr\u00ean tr\u00ecnh duy\u1ec7t<\/a>, c\u00e1c \u0111\u1ed9i c\u00f3 th\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt c\u1ee7a h\u1ecd lu\u00f4n \u0111\u1ed3ng b\u1ed9 v\u1edbi c\u00e1c y\u00eau c\u1ea7u k\u00e9o v\u00e0 c\u1eadp nh\u1eadt m\u00e3 ngu\u1ed3n.<\/p>\n

Trong h\u01b0\u1edbng d\u1eabn n\u00e0y, ch\u00fang ta s\u1ebd kh\u00e1m ph\u00e1 c\u00e1ch nh\u00fang c\u00e1c s\u01a1 \u0111\u1ed3 tr\u1ef1c ti\u1ebfp v\u00e0o Markdown, l\u00fd do t\u1ea1i sao h\u00ecnh \u1ea3nh d\u1ef1a tr\u00ean v\u0103n b\u1ea3n lo\u1ea1i b\u1ecf s\u1ef1 suy gi\u1ea3m t\u00e0i li\u1ec7u, v\u00e0 c\u00e1ch t\u1eadn d\u1ee5ng Mermaid<\/a> b\u00ean trong m\u1ed9t n\u1ec1n t\u1ea3ng th\u1ed1ng nh\u1ea5t n\u1ec1n t\u1ea3ng s\u01a1 \u0111\u1ed3 m\u00e3 h\u00f3a<\/a>gi\u00fap \u0111\u01a1n gi\u1ea3n h\u00f3a quy tr\u00ecnh l\u00e0m vi\u1ec7c c\u1ee7a k\u1ef9 s\u01b0.<\/p>\n

R\u1ee7i ro c\u1ee7a c\u00e1c t\u00e0i s\u1ea3n h\u00ecnh \u1ea3nh t\u0129nh trong t\u00e0i li\u1ec7u ph\u00e1t tri\u1ec3n
\n\"Conceptual<\/h2>\n

Xu\u1ea5t t\u1ec7p h\u00ecnh \u1ea3nh PNG ho\u1eb7c JPEG t\u1eeb c\u00e1c c\u00f4ng c\u1ee5 v\u1ebd tr\u1ef1c quan v\u00e0 t\u1ea3i l\u00ean kho l\u01b0u tr\u1eef t\u00e0i li\u1ec7u t\u1ea1o ra s\u1ef1 c\u1ea3n tr\u1edf \u0111\u00e1ng k\u1ec3 trong c\u00e1c chu k\u1ef3 ph\u00e1t h\u00e0nh nhanh. Khi logic h\u1ec7 th\u1ed1ng thay \u0111\u1ed5i, c\u00e1c k\u1ef9 s\u01b0 ph\u1ea3i t\u00ecm t\u1ec7p v\u1ebd g\u1ed1c, ch\u1ec9nh s\u1eeda t\u1ecda \u0111\u1ed9 n\u00fat th\u1ee7 c\u00f4ng, xu\u1ea5t l\u1ea1i h\u00ecnh \u1ea3nh v\u00e0 c\u1eadp nh\u1eadt \u0111\u01b0\u1eddng d\u1eabn t\u1ec7p th\u01b0 m\u1ee5c.<\/p>\n

Vi\u1ec7c \u00e1p d\u1ee5ng \u0111\u1ecbnh ngh\u0129a s\u01a1 \u0111\u1ed3 v\u0103n b\u1ea3n thu\u1ea7n t\u00fay b\u00ean trong tr\u00ecnh so\u1ea1n th\u1ea3o Mermaid d\u1ef1a tr\u00ean tr\u00ecnh duy\u1ec7t gi\u1ea3i quy\u1ebft c\u00e1c r\u00e0o c\u1ea3n v\u1eadn h\u00e0nh n\u00e0y:<\/p>\n