{"id":10552,"date":"2026-07-09T16:42:16","date_gmt":"2026-07-09T08:42:16","guid":{"rendered":"https:\/\/blog.visual-paradigm.com\/tw\/beyond-static-images-unlocking-the-power-of-diagram-as-code-with-mermaid-and-ai-tooling\/"},"modified":"2026-07-09T18:04:06","modified_gmt":"2026-07-09T10:04:06","slug":"beyond-static-images-unlocking-the-power-of-diagram-as-code-with-mermaid-and-ai-tooling","status":"publish","type":"post","link":"https:\/\/blog.visual-paradigm.com\/tw\/beyond-static-images-unlocking-the-power-of-diagram-as-code-with-mermaid-and-ai-tooling\/","title":{"rendered":"\u8d85\u8d8a\u975c\u614b\u5716\u50cf\uff1a\u5229\u7528 Mermaid \u8207 AI \u5de5\u5177\u89e3\u9396\u5716\u5f62\u5373\u7a0b\u5f0f\u78bc\u7684\u6f5b\u529b"},"content":{"rendered":"

\u6587\u4ef6\u5371\u6a5f<\/h2>\n

\u6bcf\u500b\u5de5\u7a0b\u5718\u968a\u90fd\u6df1\u77e5\u9019\u7a2e\u75db\u82e6\u3002\u4f60\u82b1\u8cbb\u6578\u9031\u6642\u9593\u8a2d\u8a08\u512a\u96c5\u7684\u5fae\u670d\u52d9\u67b6\u69cb\uff0c\u7cbe\u5fc3\u7de8\u7e6a\u80fd\u4ee4\u5229\u5bb3\u95dc\u4fc2\u4eba\u8b9a\u5606\u7684 Visio \u5716\u8868\u3002\u516d\u500b\u6708\u5f8c\uff0c\u7cfb\u7d71\u5df2\u7d93\u6f14\u9032\u2014\u2014\u65b0\u589e\u4e86\u65b0\u670d\u52d9\u3001\u9077\u79fb\u4e86\u8cc7\u6599\u5eab\u3001\u68c4\u7528\u4e86 API \u7aef\u9ede\uff0c\u4f46\u5716\u8868\u537b\u51dd\u56fa\u5728\u904e\u53bb\u3002\u5b83\u5df2\u6210\u907a\u7269\uff0c\u751a\u81f3\u662f\u4e00\u7a2e\u8b0a\u8a00\u3002<\/p>\n

\u9019\u5c31\u662f\u300c\u6587\u4ef6\u8150\u8755\u300d\uff0c\u5b83\u662f\u5de5\u7a0b\u751f\u7522\u529b\u7684\u7121\u8072\u6bba\u624b\u3002\u7576\u5716\u8868\u5931\u771f\uff0c\u958b\u767c\u8005\u4fbf\u6703\u5ffd\u8996\u5b83\u5011\uff1b\u7576\u958b\u767c\u8005\u5ffd\u8996\u6587\u4ef6\uff0c\u90e8\u843d\u77e5\u8b58\u4fbf\u6703\u53d6\u800c\u4ee3\u4e4b\uff1b\u7576\u552f\u4e00\u4e86\u89e3\u7cfb\u7d71\u7684\u4eba\u96e2\u8077\uff0c\u4f60\u4fbf\u53ea\u5269\u4e0b\u4e00\u5957\u8907\u96dc\u7684\u7a0b\u5f0f\u78bc\u5eab\uff0c\u537b\u6beb\u7121\u5730\u5716\u6307\u5f15\u3002<\/p>\n

\u5716\u5f62\u5373\u7a0b\u5f0f\u78bc\uff08DaC\uff09<\/strong>\u662f\u89e3\u6c7a\u65b9\u6848\u3002\u800c\u5176\u6838\u5fc3\u6b63\u662fMermaid<\/strong>\uff0c\u9019\u662f\u4e00\u6b3e\u57fa\u65bc JavaScript \u7684\u5716\u5f62\u5de5\u5177\uff0c\u80fd\u5c07\u7d14\u6587\u5b57\u8f49\u5316\u70ba\u7cbe\u7f8e\u7684\u8996\u89ba\u5716\u8868\u3002<\/p>\n

\"\u5716\u8868\u5373\u7a0b\u5f0f\u78bc\uff08DaC\uff09\uff1a\u89e3\u6c7a\u6587\u4ef6\u5371\u6a5f\"<\/p>\n

\n

\u6838\u5fc3\u7406\u5ff5\uff1a\u5c07\u5716\u5f62\u8996\u70ba\u8edf\u9ad4<\/h2>\n

\u5716\u5f62\u5373\u7a0b\u5f0f\u78bc\u7684\u6839\u672c\u8f49\u8b8a\u5728\u65bc\uff0c\u4ee5\u8207\u61c9\u7528\u7a0b\u5f0f\u7a0b\u5f0f\u78bc\u76f8\u540c\u7684\u56b4\u8b39\u5ea6\u4f86\u8655\u7406\u5716\u5f62\u3002\u9019\u610f\u5473\u8457\uff1a<\/p>\n

1. \u7248\u672c\u63a7\u5236\u6210\u70ba\u6a19\u6e96<\/h3>\n

\u7576\u4f60\u7684\u5716\u5f62\u662f.mermaid<\/code>\u6a94\u6848\uff0c\u5b83\u4fbf\u8207\u4f60\u7684\u539f\u59cb\u78bc\u4e00\u540c\u5b58\u653e\u5728\u4f60\u7684 Git \u5132\u5b58\u5eab\u4e2d\u3002\u6bcf\u4e00\u6b21\u8b8a\u66f4\u90fd\u6703\u88ab\u8ffd\u8e64\u3002\u4f60\u53ef\u4ee5git blame<\/code>\u4f86\u67e5\u770b\u662f\u8ab0\u65b0\u589e\u4e86\u8a72\u670d\u52d9\uff0cgit diff<\/code>\u4f86\u5728\u5408\u4f75\u524d\u5be9\u67e5\u8b8a\u66f4\uff0c\u4e26\u53ef\u56de\u6efe\u81f3\u4efb\u4f55\u5148\u524d\u72c0\u614b\u3002<\/p>\n

\"\"<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/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 
gitGraph\n    commit id: \"\u521d\u59cb\u67b6\u69cb\"\n    commit id: \"\u65b0\u589e\u4f7f\u7528\u8005\u670d\u52d9\"\n    branch feature\/order-service\n    commit id: \"\u8a02\u55ae\u670d\u52d9 v1\"\n    commit id: \"\u65b0\u589e\u652f\u4ed8\u9598\u9053\"\n    checkout main\n    merge feature\/order-service\n    commit id: \"\u66f4\u65b0 API \u9598\u9053\"\n<\/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>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u7bc4\u4f8b\uff1a\u4f7f\u7528 Mermaid \u7684 Git Graph \u8a9e\u6cd5\u8996\u89ba\u5316\u5716\u5f62\u672c\u8eab\u7684 Git \u6b77\u53f2<\/em><\/p>\n
2. \u5716\u5f62\u7684\u7a0b\u5f0f\u78bc\u5be9\u67e5<\/h3>\n
\u62c9\u53d6\u8acb\u6c42\uff08Pull Requests\uff09\u4e0d\u518d\u50c5\u9650\u65bc\u7a0b\u5f0f\u78bc\u3002\u7576\u958b\u767c\u8005\u63d0\u51fa\u65b0\u670d\u52d9\u6216\u4fee\u6539\u8cc7\u6599\u6d41\u7a0b\u6642\uff0c\u8a72\u8b8a\u66f4\u6703\u4ee5\u53ef\u8b80\u7684\u5dee\u7570\uff08diff\uff09\u5f62\u5f0f\u51fa\u73fe\u5728\u62c9\u53d6\u8acb\u6c42\u4e2d\u3002\u5be9\u67e5\u8005\u53ef\u4ee5\u76f4\u63a5\u5c0d\u5716\u5f62\u672c\u8eab\u9032\u884c\u8a55\u8ad6\uff0c\u78ba\u4fdd\u67b6\u69cb\u6c7a\u7b56\u5728\u5408\u4f75\u524d\u7d93\u904e\u8a0e\u8ad6\u8207\u6838\u51c6\u3002<\/p>\n
3. CI\/CD \u6574\u5408<\/h3>\n
\u4f60\u7684\u5716\u5f62\u53ef\u5728\u4f60\u7684 CI\/CD \u6d41\u7a0b\u4e2d\u81ea\u52d5\u751f\u6210\u8207\u9a57\u8b49\u3002\u60f3\u50cf\u4e00\u500b GitHub Action \u80fd\u5920\uff1a<\/p>\n