{"id":2247,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/tw\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Mermaid.js \u67b6\u69cb\u5716\u8a9e\u6cd5\u8207\u4f48\u5c40\u6307\u5357"},"content":{"rendered":"

\u67b6\u69cb\u5716\u63d0\u4f9b\u4e86\u4e00\u7a2e\u7d50\u69cb\u5316\u7684\u85cd\u5716\uff0c\u4f9b\u7cfb\u7d71\u67b6\u69cb\u5e2b\u548c DevOps \u5718\u968a\u7528\u4f86\u8996\u89ba\u5316\u57fa\u790e\u8a2d\u65bd\u8a2d\u7f6e\u3001\u96f2\u7aef\u5fae\u670d\u52d9\u4ee5\u53ca\u7d50\u69cb\u4f48\u5c40\u914d\u7f6e\u3002\u57fa\u65bc architecture-beta<\/code> \u5f15\u64ce\uff0c\u6b64\u6587\u5b57\u5c0e\u5411\u5de5\u5177\u900f\u904e\u81ea\u52d5\u6392\u5217\u7d50\u69cb\u6027\u670d\u52d9\u7fa4\u7d44\u3001\u8cc7\u6599\u5eab\u53e2\u96c6\u3001\u9598\u9053\u5668\u8207\u908a\u7de3\u8def\u5f91\uff0c\u53d6\u4ee3\u624b\u52d5\u62d6\u66f3\u529f\u80fd\uff0c\u5c07\u5176\u6574\u7406\u6210\u6e05\u6670\u4e14\u53ef\u9810\u6e2c\u7684\u7cfb\u7d71\u4f48\u5c40\u3002<\/p>\n

\u57fa\u672c\u8a9e\u6cd5\u7d50\u69cb<\/h2>\n

\u6bcf\u500b\u5716\u8868\u90fd\u4ee5 architecture-beta<\/code> \u8072\u660e\u6a19\u982d\u958b\u59cb\u3002\u60a8\u53ef\u900f\u904e\u4f7f\u7528 service<\/code> \u95dc\u9375\u5b57\u5b9a\u7fa9\u55ae\u7368\u7684\u7bc0\u9ede\u5143\u7d20\uff0c\u4e26\u900f\u904e\u6307\u5b9a\u7cbe\u78ba\u7684\u65b9\u5411\u5ea7\u6a19\u57e0\uff08T<\/strong>\u9802\u7aef\u3001B<\/strong>\u5e95\u7aef\u3001L<\/strong>\u5de6\u5074\u3001R<\/strong>\u53f3\u5074\uff09\u4ee5\u5192\u865f\u548c\u96d9\u7834\u6298\u865f\u5206\u9694\u3002<\/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 
architecture-beta\r\n  service gateway(internet)[\u9598\u9053\u5668\u6a19\u7c64]\r\n  service server(server)[\u61c9\u7528\u4f3a\u670d\u5668]\r\n  \r\n  gateway:B -- T:server<\/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             <\/div>\n
\n\n<\/path><\/path><\/svg>\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u8a9e\u6cd5\u53c3\u8003<\/h2>\n
\u4e0b\u8868\u5206\u89e3\u4e86\u5728 Mermaid.js \u4e2d\u69cb\u5efa\u67b6\u69cb\u5de5\u4f5c\u5340\u5730\u5716\u6240\u4f7f\u7528\u7684\u4e3b\u6578\u64da\u5143\u4ef6\u3001\u683c\u5f0f\u5316\u95dc\u9375\u5b57\u548c\u9023\u63a5\u5668\u5c6c\u6027\u3002<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u8a9e\u6cd5\u5143\u4ef6<\/th>\n\u985e\u578b\u9700\u6c42<\/th>\n\u63cf\u8ff0\u8207\u4f7f\u7528\u898f\u5247<\/th>\n<\/tr>\n<\/thead>\n
\u5ba3\u544a<\/strong><\/td>\n\u95dc\u9375\u5b57\u8b58\u5225\u7b26<\/td>\n\u521d\u59cb\u5316\u57fa\u790e\u8a2d\u65bd\u5730\u5716\u5de5\u4f5c\u5340\u756b\u5e03\u3002\u5fc5\u9808\u4f7f\u7528\u7cbe\u78ba\u7684 \u67b6\u69cb-beta<\/code>\u5340\u584a\u3002<\/td>\n<\/tr>\n
\u670d\u52d9\u7bc0\u9ede<\/strong><\/td>\n\u95dc\u9375\u5b57 + \u8b58\u5225\u5340\u584a<\/td>\n\u5ba3\u544a\u4e00\u500b\u67b6\u69cb\u5be6\u9ad4\u3002\u4f7f\u7528\u8a9e\u6cd5\uff1a\u670d\u52d9 id(\u5716\u793a)[\u986f\u793a\u6a19\u7c64]<\/code>.<\/td>\n<\/tr>\n
\u7fa4\u7d44\u5305\u88dd<\/strong><\/td>\n\u5bb9\u5668\u95dc\u9375\u5b57<\/td>\n\u5c07\u76f8\u95dc\u670d\u52d9\u7fa4\u7d44\u65bc\u8996\u89ba\u5bb9\u5668\u5167\u3002\u4f7f\u7528\u8a9e\u6cd5\uff1a\u7fa4\u7d44 id(\u5716\u793a)[\u7fa4\u7d44\u6a19\u7c64]<\/code>.<\/td>\n<\/tr>\n
\u5728…\u5167\u95dc\u9375\u5b57<\/strong><\/td>\n\u6307\u6d3e\u4fee\u98fe\u7b26<\/td>\n\u660e\u78ba\u6307\u6d3e\u4e00\u500b\u670d\u52d9\u7bc0\u9ede\u4f4d\u65bc\u7279\u5b9a\u5ba3\u544a\u7684\u7fa4\u7d44\u5305\u88dd\u5167\uff1a\u670d\u52d9 id(\u5716\u793a)[\u6a19\u7c64] \u5728 groupId \u5167<\/code>.<\/td>\n<\/tr>\n
\u9023\u63a5\u7bc0\u9ede<\/strong><\/td>\n\u95dc\u9375\u5b57\u8b58\u5225\u7b26<\/td>\n\u5efa\u7acb\u4e00\u500b\u7d50\u69cb\u5c0d\u9f4a\u7684\u4e2d\u5fc3\u9ede\uff0c\u7528\u65bc\u6574\u9f4a\u5730\u5c0e\u5f15\u8907\u96dc\u7684\u591a\u65b9\u5411\u9023\u7d50\u8def\u5f91\uff1a\u9023\u63a5\u9ede id<\/code>.<\/td>\n<\/tr>\n
\u9023\u63a5\u908a<\/strong><\/td>\n\u57e0\u65b9\u5411\u904b\u7b97\u5b50<\/td>\n\u900f\u904e\u5c07\u9023\u7d50\u56fa\u5b9a\u65bc\u7279\u5b9a\u7bc0\u9ede\u5074\u908a\uff08T\u3001B\u3001L\u3001R\uff09\u4f86\u8a2d\u5b9a\u65b9\u5411\u8ffd\u8e64\u8def\u5f91\uff1a\u4f86\u6e90:\u5074\u908a -- \u5074\u908a:\u76ee\u6a19<\/code>\u3002\u652f\u63f4\u65b9\u5411\u6027\u7bad\u982d\u5c3e\u7aef\uff08--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\u9032\u968e\u7fa4\u7d44\u8207\u57e0\u908a\u7de3\u8def\u7531<\/h2>\n
\u70ba\u4e86\u7cbe\u78ba\u63a7\u5236\u9023\u7d50\u5728\u5143\u4ef6\u4e4b\u9593\u50b3\u8f38\u7684\u65b9\u5f0f\uff0c\u800c\u4e0d\u6703\u986f\u5f97\u96dc\u4e82\uff0c\u67b6\u69cb\u5f15\u64ce\u9700\u8981\u660e\u78ba\u7684\u57e0\u9ede\u7d81\u5b9a\u3002\u76f8\u95dc\u7bc0\u9ede\u53ef\u4ee5\u7d44\u7e54\u5728\u7d50\u69cb\u7fa4\u7d44\u5167\uff0c\u4ee5\u91d0\u6e05\u7cfb\u7d71\u908a\u754c\u3002<\/p>\n
1. \u7cbe\u78ba\u57e0\u9ede\u7d81\u5b9a\u898f\u5247<\/h3>\n
\u60a8\u900f\u904e\u5728\u76f8\u61c9\u7bc0\u9ede\u8b58\u5225\u78bc\u5f8c\u9644\u52a0\u5192\u865f\u548c\u908a\u7de3\u65b9\u5411\u65d7\u6a19\uff08”T<\/code>, B<\/code>, L<\/code>, R<\/code>) \u4f86\u5b9a\u7fa9\u9023\u63a5\u7dda\u96e2\u958b\u548c\u9032\u5165\u5143\u4ef6\u7684\u4f4d\u7f6e\uff1a<\/p>\n