{"id":2087,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/ja\/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\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Mermaid.js \u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u306e\u69cb\u6587\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9"},"content":{"rendered":"

\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u306f\u3001\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u3084DevOps\u30c1\u30fc\u30e0\u304c\u30a4\u30f3\u30d5\u30e9\u69cb\u6210\u3001\u30af\u30e9\u30a6\u30c9\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u3001\u69cb\u9020\u7684\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u5b9a\u3092\u53ef\u8996\u5316\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3059\u308b\u69cb\u9020\u5316\u3055\u308c\u305f\u30d6\u30eb\u30fc\u30d7\u30ea\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002architecture-beta<\/code>\u30a8\u30f3\u30b8\u30f3\u306b\u3088\u308a\u3001\u3053\u306e\u30c6\u30ad\u30b9\u30c8\u30d9\u30fc\u30b9\u306e\u30c4\u30fc\u30eb\u306f\u3001\u69cb\u9020\u7684\u306a\u30b5\u30fc\u30d3\u30b9\u30b0\u30eb\u30fc\u30d7\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30af\u30e9\u30b9\u30bf\u3001\u30b2\u30fc\u30c8\u30a6\u30a7\u30a4\u3001\u30a8\u30c3\u30b8\u30d1\u30b9\u3092\u81ea\u52d5\u914d\u7f6e\u3059\u308b\u3053\u3068\u3067\u3001\u624b\u52d5\u306e\u30c9\u30e9\u30c3\u30b0\u64cd\u4f5c\u3092\u7f6e\u304d\u63db\u3048\u3001\u30af\u30ea\u30fc\u30f3\u3067\u4e88\u6e2c\u53ef\u80fd\u306a\u30b7\u30b9\u30c6\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n

\u57fa\u672c\u7684\u306a\u69cb\u6587\u69cb\u9020<\/h2>\n

\u3059\u3079\u3066\u306e\u56f3\u306f\u3001architecture-beta<\/code>\u5ba3\u8a00\u30d8\u30c3\u30c0\u30fc\u304b\u3089\u59cb\u307e\u308a\u307e\u3059\u3002\u500b\u5225\u306e\u30ce\u30fc\u30c9\u8981\u7d20\u3092service<\/code>\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u5b9a\u7fa9\u3057\u3001\u6b63\u78ba\u306a\u65b9\u5411\u6027\u5ea7\u6a19\u30dd\u30fc\u30c8\uff08T<\/strong>op\u3001B<\/strong>ottom\u3001L<\/strong>eft\u3001R<\/strong>ight\uff09\u3092\u30b3\u30ed\u30f3\u3068\u30c0\u30d6\u30eb\u30c0\u30c3\u30b7\u30e5\u3067\u533a\u5207\u3063\u3066\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u63a5\u7d9a\u30c8\u30e9\u30c3\u30af\u3092\u30de\u30c3\u30d4\u30f3\u30b0\u3057\u307e\u3059\u3002<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/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)[Gateway Label]\r\n  service server(server)[App Server]\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>\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u69cb\u6587\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/h2>\n
\u4ee5\u4e0b\u306e\u8868\u306f\u3001Mermaid.js\u3067\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30ef\u30fc\u30af\u30b9\u30da\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u4e3b\u306a\u30c7\u30fc\u30bf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u30ad\u30fc\u30ef\u30fc\u30c9\u3001\u304a\u3088\u3073\u30b3\u30cd\u30af\u30bf\u5c5e\u6027\u3092\u5206\u89e3\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u69cb\u6587\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/th>\n\u30bf\u30a4\u30d7\u8981\u4ef6<\/th>\n\u8aac\u660e\u3068\u4f7f\u7528\u30eb\u30fc\u30eb<\/th>\n<\/tr>\n<\/thead>\n
\u5ba3\u8a00<\/strong><\/td>\n\u30ad\u30fc\u30ef\u30fc\u30c9\u8b58\u5225\u5b50<\/td>\n\u30a4\u30f3\u30d5\u30e9\u69cb\u9020\u30de\u30c3\u30d4\u30f3\u30b0\u30ef\u30fc\u30af\u30b9\u30da\u30fc\u30b9\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002\u6b63\u78ba\u306aarchitecture-beta<\/code>\u30d6\u30ed\u30c3\u30af\u3002<\/td>\n<\/tr>\n
\u30b5\u30fc\u30d3\u30b9\u30ce\u30fc\u30c9<\/strong><\/td>\n\u30ad\u30fc\u30ef\u30fc\u30c9\uff0b\u30a2\u30a4\u30c7\u30f3\u30c6\u30a3\u30c6\u30a3\u30d6\u30ed\u30c3\u30af<\/td>\n\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u7684\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u3092\u5ba3\u8a00\u3057\u307e\u3059\u3002\u69cb\u6587\u306f\u6b21\u306e\u901a\u308a\u3067\u3059\uff1aservice id(icon)[\u8868\u793a\u30e9\u30d9\u30eb]<\/code>.<\/td>\n<\/tr>\n
\u30b0\u30eb\u30fc\u30d7\u30e9\u30c3\u30d1\u30fc<\/strong><\/td>\n\u30b3\u30f3\u30c6\u30ca\u30ad\u30fc\u30ef\u30fc\u30c9<\/td>\n\u95a2\u9023\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u3092\u8996\u899a\u7684\u306a\u30b3\u30f3\u30c6\u30ca\u5185\u306b\u30b0\u30eb\u30fc\u30d7\u5316\u3057\u307e\u3059\u3002\u69cb\u6587\u306f\u6b21\u306e\u901a\u308a\u3067\u3059\uff1agroup id(icon)[\u30b0\u30eb\u30fc\u30d7\u30e9\u30d9\u30eb]<\/code>.<\/td>\n<\/tr>\n
In\u30ad\u30fc\u30ef\u30fc\u30c9<\/strong><\/td>\n\u5272\u308a\u5f53\u3066\u4fee\u98fe\u5b50<\/td>\n\u30b5\u30fc\u30d3\u30b9\u30ce\u30fc\u30c9\u3092\u7279\u5b9a\u306e\u5ba3\u8a00\u3055\u308c\u305f\u30b0\u30eb\u30fc\u30d7\u30e9\u30c3\u30d1\u30fc\u5185\u306b\u660e\u793a\u7684\u306b\u5272\u308a\u5f53\u3066\u308b\uff1aservice id(icon)[\u30e9\u30d9\u30eb] in groupId<\/code>.<\/td>\n<\/tr>\n
\u30b8\u30e3\u30f3\u30af\u30b7\u30e7\u30f3\u30ce\u30fc\u30c9<\/strong><\/td>\n\u30ad\u30fc\u30ef\u30fc\u30c9\u8b58\u5225\u5b50<\/td>\n\u8907\u96d1\u3067\u591a\u65b9\u5411\u306e\u30ea\u30f3\u30af\u30d1\u30b9\u3092\u6574\u7136\u3068\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u69cb\u9020\u7684\u6574\u5408\u30cf\u30d6\u30dd\u30a4\u30f3\u30c8\u3092\u78ba\u7acb\u3059\u308b\uff1ajunction id<\/code>.<\/td>\n<\/tr>\n
\u63a5\u7d9a\u30a8\u30c3\u30b8<\/strong><\/td>\n\u30dd\u30fc\u30c8\u65b9\u5411\u6f14\u7b97\u5b50<\/td>\n\u30ea\u30f3\u30af\u3092\u7279\u5b9a\u306e\u30ce\u30fc\u30c9\u5074\uff08T\u3001B\u3001L\u3001R\uff09\u306b\u56fa\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u65b9\u5411\u8ffd\u8de1\u30d1\u30b9\u3092\u8a2d\u5b9a\u3059\u308b\uff1asource:side -- side:target<\/code>\u3002\u65b9\u5411\u6027\u306e\u77e2\u5370\u5148\u7aef\u3092\u30b5\u30dd\u30fc\u30c8\uff08--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\u9ad8\u5ea6\u306a\u30b0\u30eb\u30fc\u30d7\u5316\u304a\u3088\u3073\u30dd\u30fc\u30c8\u30a8\u30c3\u30b8\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n
\u30ea\u30f3\u30af\u304c\u8981\u7d20\u9593\u3092\u6b63\u78ba\u306b\u3069\u306e\u3088\u3046\u306b\u79fb\u52d5\u3059\u308b\u304b\u3092\u3001\u3054\u3061\u3083\u3054\u3061\u3083\u306b\u306a\u3089\u306a\u3044\u3088\u3046\u306b\u5236\u5fa1\u3059\u308b\u305f\u3081\u3001\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30a8\u30f3\u30b8\u30f3\u306f\u660e\u793a\u7684\u306a\u30dd\u30fc\u30c8\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u5fc5\u8981\u3068\u3057\u307e\u3059\u3002\u95a2\u9023\u3059\u308b\u30ce\u30fc\u30c9\u306f\u69cb\u9020\u7684\u30b0\u30eb\u30fc\u30d7\u5185\u306b\u6574\u7406\u3059\u308b\u3053\u3068\u3067\u3001\u30b7\u30b9\u30c6\u30e0\u306e\u5883\u754c\u3092\u660e\u78ba\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n
1. \u7cbe\u78ba\u306a\u30dd\u30fc\u30c8\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u898f\u5247<\/h3>\n
\u63a5\u7d9a\u30e9\u30a4\u30f3\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u51fa\u308b\u5834\u6240\u3068\u5165\u308b\u5834\u6240\u3092\u3001\u30b3\u30ed\u30f3\u3068\u30a8\u30c3\u30b8\u65b9\u5411\u30d5\u30e9\u30b0\uff08”T<\/code>, B<\/code>, L<\/code>, R<\/code>) \u3092\u305d\u308c\u305e\u308c\u306e\u30ce\u30fc\u30c9\u8b58\u5225\u5b50\u306b\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u5b9a\u7fa9\u3057\u307e\u3059\uff1a<\/p>\n