{"id":4257,"date":"2026-06-02T16:13:49","date_gmt":"2026-06-02T08:13:49","guid":{"rendered":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"},"modified":"2026-09-09T20:59:33","modified_gmt":"2026-09-09T12:59:33","slug":"mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams","status":"publish","type":"post","link":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","title":{"rendered":"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb"},"content":{"rendered":"<h2>\u306f\u3058\u3081\u306b\uff1a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u9769\u547d\u306f\u3053\u3053\u304b\u3089\u59cb\u307e\u308a\u307e\u3059<\/h2>\n<p>\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u306e\u30b9\u30d4\u30fc\u30c9\u304c\u901f\u3044\u4e16\u754c\u306b\u304a\u3044\u3066\u3001\u79c1\u305f\u3061\u304c\u5168\u54e1\u76f4\u9762\u3059\u308b\u4e0d\u5feb\u306a\u771f\u5b9f\u304c\u3042\u308a\u307e\u3059\uff1a<strong>\u79c1\u305f\u3061\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u5e38\u306b\u53e4\u3073\u305f\u72b6\u614b\u306b\u3042\u308b<\/strong>\u79c1\u305f\u3061\u306f\u3001\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u306e\u56f3\u63cf\u753b\u30c4\u30fc\u30eb\u3068\u306e\u683c\u95d8\u306b\u7121\u6570\u306e\u6642\u9593\u3092\u8cbb\u3084\u3057\u3001\u7bb1\u3084\u77e2\u5370\u3092\u624b\u4f5c\u696d\u3067\u614e\u91cd\u306b\u6574\u5217\u3055\u305b\u3066\u304d\u307e\u3057\u305f\u304c\u3001\u30b3\u30fc\u30c9\u304c\u5909\u66f4\u3055\u308c\u305f\u77ac\u9593\u306b\u3001\u4e39\u5ff5\u306b\u4f5c\u6210\u3057\u305f\u8996\u899a\u8cc7\u6599\u304c\u9673\u8150\u5316\u3057\u3066\u3057\u307e\u3046\u306e\u3092\u305f\u3060\u898b\u5b88\u308b\u3057\u304b\u306a\u304b\u3063\u305f\u306e\u3067\u3059\u3002<br \/>\n\u3057\u304b\u3057\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c\u958b\u767a\u306e\u30da\u30fc\u30b9\u306b\u8ffd\u3044\u3064\u304f\u3053\u3068\u304c\u3067\u304d\u305f\u3089\u3069\u3046\u3067\u3057\u3087\u3046\u304b\uff1f\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306a\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u306e\u4f5c\u6210\u304c\u3001\u95a2\u6570\u3092\u66f8\u304f\u306e\u3068\u540c\u3058\u304f\u3089\u3044\u7c21\u5358\u306b\u306a\u3063\u305f\u3089\u3069\u3046\u3067\u3057\u3087\u3046\u304b\uff1f<br \/>\nDiagram-as-Code \u9769\u547d\u3078\u3088\u3046\u3053\u305d\u3002\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001<strong>VPasCode<\/strong>\u3001\u30c1\u30fc\u30e0\u304c\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u3092\u4f5c\u6210\u3001\u5171\u6709\u3001\u7dad\u6301\u3059\u308b\u65b9\u6cd5\u3092\u5909\u9769\u3059\u308b\u3001\u30d3\u30b8\u30e5\u30a2\u30eb\u30d1\u30e9\u30c0\u30a4\u30e0\u793e\u306e\u30d6\u30e9\u30a6\u30b6\u30d9\u30fc\u30b9\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u3064\u3044\u3066\u3054\u6848\u5185\u3057\u307e\u3059\u3002\u56f3\u3092\u30b3\u30fc\u30c9\u3068\u3057\u3066\u6271\u3046\u3053\u3068\u3067\u3001\u6570\u6642\u9593\u3067\u306f\u306a\u304f\u6570\u5206\u3067\u51fa\u7248\u54c1\u8cea\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u3092\u751f\u6210\u3059\u308b\u65b9\u6cd5\u3092\u767a\u898b\u3057\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c\u30b7\u30b9\u30c6\u30e0\u3068\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u9032\u5316\u3059\u308b\u3053\u3068\u3092\u4fdd\u8a3c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u3092\u884c\u3046\u958b\u767a\u8005\u3001\u30b9\u30c6\u30fc\u30af\u30db\u30eb\u30c0\u30fc\u3078\u306e\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3046\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u3001\u30a4\u30f3\u30d5\u30e9\u306e\u30de\u30c3\u30d4\u30f3\u30b0\u3092\u884c\u3046 DevOps \u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u3044\u305a\u308c\u3067\u3042\u3063\u3066\u3082\u3001\u3053\u306e\u5305\u62ec\u7684\u306a\u30ac\u30a4\u30c9\u306f\u3001VPasCode \u3092\u30de\u30b9\u30bf\u30fc\u3057\u3001\u30c1\u30fc\u30e0\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u306e\u8cea\u3092\u9ad8\u3081\u308b\u305f\u3081\u306e\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u3082\u306e\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n<hr\/>\n<h2>1. \u306f\u3058\u3081\u306b\uff1a5 \u5206\u3067\u6700\u521d\u306e\u56f3\u3092\u4f5c\u6210 {#getting-started}<\/h2>\n<h3>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4e0d\u8981\u3001\u8a2d\u5b9a\u4e0d\u8981\u3001\u30b3\u30fc\u30c9\u306e\u307f<\/h3>\n<p>VPasCode \u306e\u6700\u3082\u5f37\u529b\u306a\u6a5f\u80fd\u306e\u4e00\u3064\u306f\u3001\u6469\u64e6\u30bc\u30ed\u306e\u30aa\u30f3\u30dc\u30fc\u30c7\u30a3\u30f3\u30b0\u3067\u3059\u3002\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u3082\u3001\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210\u3082\u3001\u8907\u96d1\u306a\u8a2d\u5b9a\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u4eca\u3059\u3050\u6700\u521d\u306e\u56f3\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n<strong>\u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u306e\u30af\u30a4\u30c3\u30af\u30b9\u30bf\u30fc\u30c8\uff1a<\/strong><\/p>\n<ol>\n<li>\n<p><strong>VPasCode \u306b\u30a2\u30af\u30bb\u30b9<\/strong>\uff1a\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u3044\u3066\u3001<a href=\"https:\/\/www.vpascode.com\/editor\/\">https:\/\/www.vpascode.com\/editor\/<\/a><\/p>\n<\/li>\n<li>\n<p><strong>\u30a8\u30f3\u30b8\u30f3\u3092\u9078\u629e<\/strong>\uff1a\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\uff1a<\/p>\n<ul>\n<li>\n<p><strong>Mermaid<\/strong> \u2013 \u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8\u3084\u30e2\u30c0\u30f3\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u6700\u9069<\/p>\n<\/li>\n<li>\n<p><strong>PlantUML<\/strong> \u2013 UML \u3084\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u7406\u60f3\u7684<\/p>\n<\/li>\n<li>\n<p><strong>Graphviz<\/strong> \u2013 \u8907\u96d1\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30c8\u30dd\u30ed\u30b8\u306b\u5b8c\u74a7<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u8aad\u307f\u8fbc\u3080<\/strong>\uff1a\u300cExamples\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u30b9\u30bf\u30fc\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u9078\u629e<\/p>\n<\/li>\n<li>\n<p><strong>\u7de8\u96c6\u3068\u30d7\u30ec\u30d3\u30e5\u30fc<\/strong>\uff1a\u5de6\u5074\u306e\u30d1\u30cd\u30eb\u3067\u30b3\u30fc\u30c9\u3092\u4fee\u6b63\u3059\u308b\u3068\u3001\u53f3\u5074\u306e\u56f3\u304c\u5373\u5ea7\u306b\u66f4\u65b0\u3055\u308c\u308b\u306e\u3092\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059<\/p>\n<\/li>\n<li>\n<p><strong>\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u307e\u305f\u306f\u5171\u6709<\/strong>\uff1aSVG\/PNG \u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u304b\u3001\u5171\u6709\u53ef\u80fd\u306a URL \u3092\u30b3\u30d4\u30fc<\/p>\n<\/li>\n<\/ol>\n<p><img alt=\"VPasCode\uff1aDiagram-as-Code\u306b\u3088\u308b\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30c9\u30ad\u30e5\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\"\/><br \/>\n<em>\u56f31\uff1aVPasCode\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u30d9\u30fc\u30b9\u306e\u30b3\u30fc\u30c9\u3092\u77ac\u6642\u306b\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306a\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u306b\u5909\u63db\u3057\u307e\u3059<\/em><\/p>\n<hr\/>\n<h2>2. VPasCode\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u7406\u89e3 {#interface}<\/h2>\n<p>\u69cb\u6587\u306e\u8a73\u7d30\u306b\u5165\u308b\u524d\u306b\u3001\u307e\u305a\u30ef\u30fc\u30af\u30b9\u30da\u30fc\u30b9\u306b\u6163\u308c\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n<img alt=\"VPasCode\u306e\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u2014\u30c6\u30ad\u30b9\u30c8\u304b\u3089\u56f3\u9762\uff08\u307e\u305f\u306fDiagram-as-Code\uff09\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u30aa\u30fc\u30eb\u30a4\u30f3\u30ef\u30f3\u30a8\u30c7\u30a3\u30bf\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a17bfb3eef7d.png\"\/><br \/>\n<em>\u56f32\uff1a2\u5206\u5272\u3055\u308c\u305fVPasCode\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u2014\u5de6\u5074\u306b\u30b3\u30fc\u30c9\u3001\u53f3\u5074\u306b\u30e9\u30a4\u30d6\u30d7\u30ec\u30d3\u30e5\u30fc<\/em><\/p>\n<h3>\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a73\u7d30\uff1a<\/h3>\n<p><strong>\u5de6\u30d1\u30cd\u30eb\uff08\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\uff09\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u69cb\u6587\u30cf\u30a4\u30e9\u30a4\u30c8\u5bfe\u5fdc\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf<\/p>\n<\/li>\n<li>\n<p>\u53c2\u7167\u3057\u3084\u3059\u3044\u884c\u756a\u53f7<\/p>\n<\/li>\n<li>\n<p>\u81ea\u52d5\u88dc\u5b8c\u6a5f\u80fd<\/p>\n<\/li>\n<li>\n<p>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u306e\u30a8\u30e9\u30fc\u30cf\u30a4\u30e9\u30a4\u30c8\u8868\u793a<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u53f3\u30d1\u30cd\u30eb\uff08\u30e9\u30a4\u30d6\u30d7\u30ec\u30d3\u30e5\u30fc\uff09\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u5373\u6642\u306e\u8996\u899a\u7684\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/p>\n<\/li>\n<li>\n<p>\u30d1\u30f3\u304a\u3088\u3073\u30ba\u30fc\u30e0\u64cd\u4f5c\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/p>\n<\/li>\n<li>\n<p>\u30d9\u30af\u30c8\u30eb\u30d9\u30fc\u30b9\u8868\u793a\uff08\u3042\u3089\u3086\u308b\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\u3067\u9bae\u660e\uff09<\/p>\n<\/li>\n<li>\n<p>\u30af\u30ea\u30c3\u30af\u3057\u3066\u8981\u7d20\u3092\u691c\u8a3c<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u4e0a\u90e8\u30c4\u30fc\u30eb\u30d0\u30fc\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u30a8\u30f3\u30b8\u30f3\u30bb\u30ec\u30af\u30bf\u30fc\uff08Mermaid\/PlantUML\/Graphviz\uff09<\/p>\n<\/li>\n<li>\n<p>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc<\/p>\n<\/li>\n<li>\n<p>\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u30aa\u30d7\u30b7\u30e7\u30f3\uff08SVG\u3001PNG\u3001PDF\uff09<\/p>\n<\/li>\n<li>\n<p>\u5171\u6709\u30dc\u30bf\u30f3\uff08\u6c38\u7d9a\u7684\u306aURL\u3092\u751f\u6210\uff09<\/p>\n<\/li>\n<li>\n<p>\u8a2d\u5b9a\u3068\u74b0\u5883\u8a2d\u5b9a<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u4e0b\u90e8\u30b9\u30c6\u30fc\u30bf\u30b9\u30d0\u30fc\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u69cb\u6587\u691c\u8a3c\u30b9\u30c6\u30fc\u30bf\u30b9<\/p>\n<\/li>\n<li>\n<p>\u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8<\/p>\n<\/li>\n<li>\n<p>\u6700\u7d42\u4fdd\u5b58\u6642\u523b<\/p>\n<\/li>\n<li>\n<p>\u30ad\u30fc\u30dc\u30fc\u30c9\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/p>\n<\/li>\n<\/ul>\n<h3>\u30b3\u30a2\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306e\u539f\u5247\uff1a<\/h3>\n<pre><code>\u30b3\u30fc\u30c9\u8a18\u8ff0 \u2192 \u5373\u6642\u30d7\u30ec\u30d3\u30e5\u30fc\u306e\u78ba\u8a8d \u2192 \u6539\u826f \u2192 \u30a8\u30af\u30b9\u30dd\u30fc\u30c8\/\u5171\u6709\r\n<\/code><\/pre>\n<p>\u3053\u306e\u5373\u6642\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u30eb\u30fc\u30d7\u3053\u305d\u304c\u3001VPasCode\u3092\u3053\u308c\u307b\u3069\u5f37\u529b\u306a\u3082\u306e\u306b\u3057\u3066\u3044\u307e\u3059\u3002\u300c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u5fc5\u8981\u3082\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u3092\u5f85\u3064\u5fc5\u8981\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u30bf\u30a4\u30d4\u30f3\u30b0\u3059\u308b\u3060\u3051\u3067\u3001\u7d14\u7c8b\u3067\u77ac\u6642\u306e\u8996\u899a\u7684\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u304c\u5f97\u3089\u308c\u307e\u3059\u3002<\/p>\n<hr\/>\n<h2>3. Mermaid.js\u306e\u7fd2\u5f97\uff1a\u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8\u3068\u305d\u306e\u5148 {#mermaid-tutorial}<\/h2>\n<p>Mermaid.js \u306f\u3001\u958b\u767a\u8005\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u56f3\u63cf\u753b\u306e\u4e8b\u5b9f\u4e0a\u306e\u6a19\u6e96\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u69cb\u6587\u306f\u76f4\u611f\u7684\u3067\u8aad\u307f\u3084\u3059\u304f\u3001\u30b3\u30fc\u30c9\u3068\u5171\u306b\u5b58\u5728\u3059\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u6700\u9069\u3067\u3059\u3002<\/p>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 1: \u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u30d5\u30ed\u30fc\u306e\u4f5c\u6210<\/h3>\n<p>\u6b21\u306e\u30b9\u30d7\u30ea\u30f3\u30c8\u8a08\u753b\u3067\u4f7f\u7528\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u3001\u5b9f\u7528\u7684\u306a\u8a8d\u8a3c\u30d5\u30ed\u30fc\u306e\u56f3\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n<strong>\u30b3\u30fc\u30c9\u4f8b:<\/strong><\/p>\n<p><img alt=\"\u8a8d\u8a3c\u30d5\u30ed\u30fc\u56f3\uff1a\u8cc7\u683c\u60c5\u5831\u306e\u691c\u8a3c\u3001JWT\u30c8\u30fc\u30af\u30f3\u306e\u751f\u6210\u3001\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u30eb\u30fc\u30d7\u3092\u5099\u3048\u305f\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3078\u306e\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3092\u793a\u3059\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8b6724da1.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdkE1LAlEUhvdB\/+GC2wStUcNF4be2aSO0GFyIM1PikKJuRANnbpKKUZiLIqMMDbNCoi8Nwx9znHH6F83cGUO9XA4czvOe856zn46mDlDYu7qC1OeiAT8AHoH4qUWhpvROle5IxiXp7hXEulTqSNXrCDKbt5A7L\/3cS6MzEPpysyJVh9tHehO3Vi6AcEx+uYA8tNxuqm1A7AJ+JO3rSqs7bX9HFhV9VVFAXlqfCuKHxuILEIcgDH6LwmTcMhQeYsGlJ16S+PILZoXaZFBUTt5nrnzLrvw0ZbEiudmbTasr4wYIV5FFXvcUoHf2wghwmbjvA35T+WnjVi6fG3yAmAjSwWw2tXvI55AnmUzEWQTC05JsMr6RXi4NWZDIQurdi4AxiF+AO4CbZPGKujXgnlYS24CfSYeyIfTPX0CPmWyOZ5ELcXGed5pYK2fjuLVMNp1MsE6TxWK3x2LzYMgAGYplmOg\/uL4ZdVC2edBvgNwm45gDmdiGjbL9AfHoACU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD\r\n    A[\u30e6\u30fc\u30b6\u30fc\u304c\u8a8d\u8a3c\u60c5\u5831\u3092\u5165\u529b] --&gt; B{\u5f62\u5f0f\u306f\u6709\u52b9?}\r\n    B --&gt;|\u3044\u3044\u3048| C[\u691c\u8a3c\u30a8\u30e9\u30fc\u3092\u8868\u793a]\r\n    B --&gt;|\u306f\u3044| D[\u8a8d\u8a3c\u30b5\u30fc\u30d3\u30b9\u3078\u9001\u4fe1]\r\n    C --&gt; A\r\n    D --&gt; E{\u8a8d\u8a3c\u60c5\u5831\u304c\u4e00\u81f4?}\r\n    E --&gt;|\u3044\u3044\u3048| F[401 \u672a\u8a8d\u8a3c\u3092\u8fd4\u3059]\r\n    E --&gt;|\u306f\u3044| G[JWT \u30c8\u30fc\u30af\u30f3\u3092\u751f\u6210]\r\n    G --&gt; H[HttpOnly Cookie \u306b\u30c8\u30fc\u30af\u30f3\u3092\u4fdd\u5b58]\r\n    H --&gt; I[\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3078\u30ea\u30c0\u30a4\u30ec\u30af\u30c8]\r\n    F --&gt; A\r\n    \r\n    style A fill:#e1f5ff,stroke:#0066cc\r\n    style I fill:#d4edda,stroke:#28a745\r\n    style F fill:#f8d7da,stroke:#dc3545\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdkE1LAlEUhvdB\/+GC2wStUcNF4be2aSO0GFyIM1PikKJuRANnbpKKUZiLIqMMDbNCoi8Nwx9znHH6F83cGUO9XA4czvOe856zn46mDlDYu7qC1OeiAT8AHoH4qUWhpvROle5IxiXp7hXEulTqSNXrCDKbt5A7L\/3cS6MzEPpysyJVh9tHehO3Vi6AcEx+uYA8tNxuqm1A7AJ+JO3rSqs7bX9HFhV9VVFAXlqfCuKHxuILEIcgDH6LwmTcMhQeYsGlJ16S+PILZoXaZFBUTt5nrnzLrvw0ZbEiudmbTasr4wYIV5FFXvcUoHf2wghwmbjvA35T+WnjVi6fG3yAmAjSwWw2tXvI55AnmUzEWQTC05JsMr6RXi4NWZDIQurdi4AxiF+AO4CbZPGKujXgnlYS24CfSYeyIfTPX0CPmWyOZ5ELcXGed5pYK2fjuLVMNp1MsE6TxWK3x2LzYMgAGYplmOg\/uL4ZdVC2edBvgNwm45gDmdiGjbL9AfHoACU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>\u3053\u3053\u3067\u793a\u3055\u308c\u3066\u3044\u308b\u3053\u3068:<\/strong><\/p>\n<ul>\n<li>\n<p>\u5206\u5c90\u30ce\u30fc\u30c9\uff08\u83f1\u5f62\u3067<code data-backticks=\"1\">{?}<\/code>)<\/p>\n<\/li>\n<li>\n<p>\u65b9\u5411\u6027\u306e\u3042\u308b\u30d5\u30ed\u30fc\uff08<code data-backticks=\"1\">TD<\/code> = \u4e0a\u304b\u3089\u4e0b\u3078)<\/p>\n<\/li>\n<li>\n<p>\u8272\u306b\u3088\u308b\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb<\/p>\n<\/li>\n<li>\n<p>\u81ea\u5df1\u53c2\u7167\u30eb\u30fc\u30d7<\/p>\n<\/li>\n<li>\n<p>\u660e\u78ba\u306a\u30e9\u30d9\u30eb\u4ed8\u3051<\/p>\n<\/li>\n<\/ul>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 2: \u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3<\/h3>\n<p>\u3067\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u306e\u95a2\u4fc2\u6027\u3092\u793a\u3059\u3088\u308a\u8907\u96d1\u306a\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n<strong>\u30b3\u30fc\u30c9\u4f8b:<\/strong><\/p>\n<p><img alt=\"\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\uff1a\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5c64\u3001API\u30b2\u30fc\u30c8\u30a6\u30a7\u30a4\u3001\u30d3\u30b8\u30cd\u30b9\u30b5\u30fc\u30d3\u30b9\u3001\u30c7\u30fc\u30bf\u5c64\u3092\u793a\u3057\u3001PostgreSQL\u3001MongoDB\u3001Redis\u3068\u306e\u63a5\u7d9a\u3092\u542b\u3080\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8b8990079.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9r01AUfhf8H0L3ssKGZcw6iwzWBUXcsHbIHi57uLm5aYOxkZtbRx\/NBbeXgTDUR8HNuVVF5lCnDPbHHFr2Z3h\/JFlMW10g4ea733fO+c45LYafta2V5vVrlnyirtPSwHLg0w5HJYi\/gjiCeB\/i9yBOQGwPjvdLG4atnnXqIPla+v4tiP4dh91YbFJMeI61Gjp+QBEISXqloolPfwvuBl3OKUsktOOaQ6GqpcZ9VJIfme0biDNZDcQHEH+UEfM13cOcbuIesh6EnVb6Z+UIS13eRhf9nYvDM4i\/60i7EP\/KMZpSJMv9nGQRfRDvQAiIzyXynyrXKHvuExrJ7qmwpyB2ZPB8onyxjyPKZKYDdRn\/0N+xFT1kriQOTw6Hb7YmUBosdLuEo8Hrl4PdF5NIuPdUjXZ4\/Ht4uj2GNMmWjTlWlrZ0jeeFPVA27Dqazjux7LoebiOMeIvRtUcr5aIhJTGeUvKqnFlo18ujvhTXWPt34GVM2hRNN6nrR3JTvoDY06P7CeJDebxJtcGzs4vprhjQLO0oni6UulCbNIqq7TGoOmlI9acA6QYUsMSqQZUmE9v1AqhtGkxHuoyZUi\/hZOgGTnLk86WKhDcaKtkF3pMNSZ16fhDUpjyv6lSdmYiz8AmtTZHbc3gOz5AwCFlts+2njTBSYyRRzlPikvlMWVm45d108uykgqvSMy9XFegOZjZotepmZK+yQCqVP2xwzns=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph LR\r\n    subgraph Client[\"\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5c64\"]\r\n        Web[Web \u30a2\u30d7\u30ea&lt;br\/&gt;React]\r\n        Mobile[\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea&lt;br\/&gt;Flutter]\r\n    end\r\n    \r\n    subgraph API[\"API \u30b2\u30fc\u30c8\u30a6\u30a7\u30a4\"]\r\n        Gateway[ Kong Gateway ]\r\n        Auth[\u8a8d\u8a3c\u30b5\u30fc\u30d3\u30b9]\r\n        Rate[\u30ec\u30fc\u30c8\u30ea\u30df\u30c3\u30bf\u30fc]\r\n    end\r\n    \r\n    subgraph Services[\"\u30d3\u30b8\u30cd\u30b9\u30b5\u30fc\u30d3\u30b9\"]\r\n        User[\u30e6\u30fc\u30b6\u30fc\u30b5\u30fc\u30d3\u30b9]\r\n        Order[\u6ce8\u6587\u30b5\u30fc\u30d3\u30b9]\r\n        Product[\u5546\u54c1\u30b5\u30fc\u30d3\u30b9]\r\n        Payment[\u6c7a\u6e08\u30b5\u30fc\u30d3\u30b9]\r\n    end\r\n    \r\n    subgraph Data[\"\u30c7\u30fc\u30bf\u5c64\"]\r\n        UserDB[(\u30e6\u30fc\u30b6\u30fc DB&lt;br\/&gt;PostgreSQL)]\r\n        OrderDB[(\u6ce8\u6587 DB&lt;br\/&gt;MongoDB)]\r\n        ProductDB[(\u5546\u54c1 DB&lt;br\/&gt;PostgreSQL)]\r\n        Cache[(Redis \u30ad\u30e3\u30c3\u30b7\u30e5)]\r\n    end\r\n    \r\n    Web --&gt; Gateway\r\n    Mobile --&gt; Gateway\r\n    Gateway --&gt; Auth\r\n    Gateway --&gt; Rate\r\n    Rate --&gt; User\r\n    Rate --&gt; Order\r\n    Rate --&gt; Product\r\n    User --&gt; UserDB\r\n    User --&gt; Cache\r\n    Order --&gt; OrderDB\r\n    Order --&gt; Payment\r\n    Product --&gt; ProductDB\r\n    Payment --&gt; OrderDB\r\n    \r\n    style Gateway fill:#ff6b6b,stroke:#c92a2a,color:white\r\n    style UserDB fill:#4ecdc4,stroke:#087f5b\r\n    style OrderDB fill:#4ecdc4,stroke:#087f5b\r\n    style ProductDB fill:#4ecdc4,stroke:#087f5b\r\n    style Cache fill:#ffe66d,stroke:#f08c00\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9r01AUfhf8H0L3ssKGZcw6iwzWBUXcsHbIHi57uLm5aYOxkZtbRx\/NBbeXgTDUR8HNuVVF5lCnDPbHHFr2Z3h\/JFlMW10g4ea733fO+c45LYafta2V5vVrlnyirtPSwHLg0w5HJYi\/gjiCeB\/i9yBOQGwPjvdLG4atnnXqIPla+v4tiP4dh91YbFJMeI61Gjp+QBEISXqloolPfwvuBl3OKUsktOOaQ6GqpcZ9VJIfme0biDNZDcQHEH+UEfM13cOcbuIesh6EnVb6Z+UIS13eRhf9nYvDM4i\/60i7EP\/KMZpSJMv9nGQRfRDvQAiIzyXynyrXKHvuExrJ7qmwpyB2ZPB8onyxjyPKZKYDdRn\/0N+xFT1kriQOTw6Hb7YmUBosdLuEo8Hrl4PdF5NIuPdUjXZ4\/Ht4uj2GNMmWjTlWlrZ0jeeFPVA27Dqazjux7LoebiOMeIvRtUcr5aIhJTGeUvKqnFlo18ujvhTXWPt34GVM2hRNN6nrR3JTvoDY06P7CeJDebxJtcGzs4vprhjQLO0oni6UulCbNIqq7TGoOmlI9acA6QYUsMSqQZUmE9v1AqhtGkxHuoyZUi\/hZOgGTnLk86WKhDcaKtkF3pMNSZ16fhDUpjyv6lSdmYiz8AmtTZHbc3gOz5AwCFlts+2njTBSYyRRzlPikvlMWVm45d108uykgqvSMy9XFegOZjZotepmZK+yQCqVP2xwzns=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>\u4e3b\u8981\u6982\u5ff5\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">subgraph<\/code>\u8ad6\u7406\u7684\u306a\u30b0\u30eb\u30fc\u30d7\u5316\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">LR<\/code>\u5de6\u304b\u3089\u53f3\u3078\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u7528<\/p>\n<\/li>\n<li>\n<p>\u8907\u6570\u884c\u30e9\u30d9\u30eb\u7528 <code data-backticks=\"1\">&lt;br\/&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u5186\u7b52\u8a18\u6cd5\u7528 <code data-backticks=\"1\">[( )]<\/code><\/p>\n<\/li>\n<li>\n<p>\u8907\u96d1\u306a\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u95a2\u4fc2<\/p>\n<\/li>\n<\/ul>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 3\uff1a\u6ce8\u6587\u51e6\u7406\u306e\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3<\/h3>\n<p>\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u306e\u6642\u9593\u7684\u76f8\u4e92\u4f5c\u7528\u3092\u7406\u89e3\u3059\u308b\u305f\u3081\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002<br \/>\n<strong>\u4f8b\u30b3\u30fc\u30c9\uff1a<\/strong><\/p>\n<p><img alt=\"\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\uff1a\u9867\u5ba2\u3001Web\u30a2\u30d7\u30ea\u3001\u6ce8\u6587\u30b5\u30fc\u30d3\u30b9\u3001\u652f\u6255\u3044\u30b5\u30fc\u30d3\u30b9\u3001\u5728\u5eab\u30b5\u30fc\u30d3\u30b9\u3001\u901a\u77e5\u30b5\u30fc\u30d3\u30b9\u9593\u306e\u6ce8\u6587\u51e6\u7406\u30d5\u30ed\u30fc\u3092\u793a\u3059\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8bb593914.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">sequenceDiagram\r\n    autonumber\r\n    participant C as Customer\r\n    participant W as Web App\r\n    participant O as Order Service\r\n    participant P as Payment Service\r\n    participant I as Inventory Service\r\n    participant N as Notification Service\r\n    \r\n    C-&gt;&gt;W: Add items to cart\r\n    C-&gt;&gt;W: Click \"Checkout\"\r\n    W-&gt;&gt;O: POST \/orders {items, shipping}\r\n    O-&gt;&gt;I: Reserve inventory\r\n    I--&gt;&gt;O: Reservation confirmed\r\n    O-&gt;&gt;P: Process payment\r\n    P--&gt;&gt;O: Payment successful\r\n    O-&gt;&gt;O: Create order record\r\n    O-&gt;&gt;N: Send order confirmation\r\n    N--&gt;&gt;C: Email confirmation\r\n    O--&gt;&gt;W: 201 Created {orderId}\r\n    W--&gt;&gt;C: Show success page\r\n    \r\n    Note over O,P: Critical section&lt;br\/&gt;must be transactional\r\n    rect rgba(200, 200, 0, 0.2)\r\n        O-&gt;&gt;P: Charge card\r\n        P--&gt;&gt;O: Transaction ID\r\n    end\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\u306e\u6a5f\u80fd\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">autonumber<\/code>\u81ea\u52d5\u30b9\u30c6\u30c3\u30d7\u756a\u53f7\u4ed8\u3051\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">participant<\/code>\u5ba3\u8a00\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">-&gt;&gt;<\/code>\u540c\u671f\u547c\u3073\u51fa\u3057\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">--&gt;&gt;<\/code>\u5fdc\u7b54\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">\u30ce\u30fc\u30c8\u4e0a<\/code>\u6ce8\u91c8\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">\u77e9\u5f62<\/code>\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5f37\u8abf\u8868\u793a\u7528<\/p>\n<\/li>\n<\/ul>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 4: \u30b9\u30d7\u30ea\u30f3\u30c8\u8a08\u753b\u306e\u305f\u3081\u306e\u30ac\u30f3\u30c8\u30c1\u30e3\u30fc\u30c8<\/h3>\n<p>Mermaid \u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u53ef\u8996\u5316\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9:<\/strong><\/p>\n<p><img alt=\"\u8a8d\u8a3c\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30b9\u30d7\u30ea\u30f3\u30c824\u30ac\u30f3\u30c8\u30c1\u30e3\u30fc\u30c8\uff1a6\u67081\u65e5\u304b\u30896\u670817\u65e5\u307e\u3067\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3001\u7d71\u5408\u30c1\u30fc\u30e0\u306e\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u30bf\u30b9\u30af\u3092\u793a\u3059\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8bd9463b2.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNk89Kw0AQxu+C77CX3hKsSfHgTagHBcGDIB4F\/9CDFbQPYDNaI6ZYEVERLVqrpZpUrWK11T7MNE18C3dnW20lQec0mU1+M9+3k+X5ZCo1OMB4oNFE4wrBRLjlD68IRwhlhCovMS3GVOaXs36pgXCJRg2hiMDzW\/lx+6jYqh+775duY4+xOR7q1JQaj8tTv17rHkVWhiILstptW0ejgsYLwg1vxhByCEClEjXfke+NTU8wt7jvPW1i2vFLtl8ymYxR17FabxlF5AuL68MK06JaTI2OqFGR89EkYXJ2hnd7prEPhMC04zp5v7DVwXxuPPoXVqtmK8TReji6wvRvDsK2YHC74IQSbtW5sM64R7ijSldMN0a\/Mw7mMIFnov+H1TshwjXCrpAvbiFDZJP1RR8pRiQ9gBTm7SGCLa\/0l72izucXC1BFo0pHZ2RVtrMCQTMsra0mU8PhRpnkRoUTPOfCy2VCGdxsyQrQ0mqe+fYLpg\/RsDCd5ztHc5mhML0D0\/5tjPf84ObMn0WTz4GSEyRYmB9AH9fG2Z8XlyC5iV6xPZ6JyWz6u8pEKninhXa+HkbSidSv9AsMB5uL\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gantt\r\n    \u30bf\u30a4\u30c8\u30eb \u30b9\u30d7\u30ea\u30f3\u30c8 24 - \u8a8d\u8a3c\u30e2\u30b8\u30e5\u30fc\u30eb\r\n    \u65e5\u4ed8\u5f62\u5f0f  YYYY-MM-DD\r\n    \u8ef8\u5f62\u5f0f  %m\/%d\r\n    \r\n    \u30bb\u30af\u30b7\u30e7\u30f3 \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\r\n    API \u5951\u7d04\u306e\u8a2d\u8a08       :\u5b8c\u4e86,    des1, 2024-06-01, 2\u65e5\r\n    JWT \u30b5\u30fc\u30d3\u30b9\u306e\u5b9f\u88c5      :\u9032\u884c\u4e2d,  des2, 2024-06-03, 3\u65e5\r\n    \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3         :         des3, des2 \u306e\u5f8c, 2\u65e5\r\n    \u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8              :         des4, des3 \u306e\u5f8c, 2\u65e5\r\n    \r\n    \u30bb\u30af\u30b7\u30e7\u30f3 \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\r\n    \u30ed\u30b0\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8           :         front1, 2024-06-03, 3\u65e5\r\n    \u30c8\u30fc\u30af\u30f3\u7ba1\u7406          :         front2, front1 \u306e\u5f8c, 2\u65e5\r\n    \u4fdd\u8b77\u3055\u308c\u305f\u30eb\u30fc\u30c8          :         front3, front2 \u306e\u5f8c, 2\u65e5\r\n    \r\n    \u30bb\u30af\u30b7\u30e7\u30f3 \u7d71\u5408\r\n    API \u7d71\u5408           :         int1, des4 \u306e\u5f8c, 2\u65e5\r\n    E2E \u30c6\u30b9\u30c8              :         int2, int1 \u306e\u5f8c, 3\u65e5\r\n    \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u76e3\u67fb           :         int3, int2 \u306e\u5f8c, 2\u65e5\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNk89Kw0AQxu+C77CX3hKsSfHgTagHBcGDIB4F\/9CDFbQPYDNaI6ZYEVERLVqrpZpUrWK11T7MNE18C3dnW20lQec0mU1+M9+3k+X5ZCo1OMB4oNFE4wrBRLjlD68IRwhlhCovMS3GVOaXs36pgXCJRg2hiMDzW\/lx+6jYqh+775duY4+xOR7q1JQaj8tTv17rHkVWhiILstptW0ejgsYLwg1vxhByCEClEjXfke+NTU8wt7jvPW1i2vFLtl8ymYxR17FabxlF5AuL68MK06JaTI2OqFGR89EkYXJ2hnd7prEPhMC04zp5v7DVwXxuPPoXVqtmK8TReji6wvRvDsK2YHC74IQSbtW5sM64R7ijSldMN0a\/Mw7mMIFnov+H1TshwjXCrpAvbiFDZJP1RR8pRiQ9gBTm7SGCLa\/0l72izucXC1BFo0pHZ2RVtrMCQTMsra0mU8PhRpnkRoUTPOfCy2VCGdxsyQrQ0mqe+fYLpg\/RsDCd5ztHc5mhML0D0\/5tjPf84ObMn0WTz4GSEyRYmB9AH9fG2Z8XlyC5iV6xPZ6JyWz6u8pEKninhXa+HkbSidSv9AsMB5uL\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>4. PlantUML \u6df1\u5165\u308a:\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3 {#plantuml-tutorial}<\/h2>\n<p>PlantUML \u306f\u6b63\u5f0f\u306a UML \u30c0\u30a4\u30a2\u30b0\u30e9\u30e0\u3068\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u306b\u512a\u308c\u3066\u3044\u307e\u3059\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 1: E \u30b3\u30de\u30fc\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u56f3<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9:<\/strong><\/p>\n<p><img alt=\"EC\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u968e\u5c64\u5316\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\uff1a\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c64\u3001API\u5c64\u3001\u30d3\u30b8\u30cd\u30b9\u30b5\u30fc\u30d3\u30b9\u5c64\u3001\u30c7\u30fc\u30bf\u5c64\u306e\u8a73\u7d30\u3092\u793a\u3059\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8bf0e526c.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Plantuml \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHTJnD157sVPFx3k3x3Wuy-443Kc8YYnlXWV5ZILJRsA-qIqnYJTaQ4HfjW44oDWeY5KbghD7uGQ_fZRcYt_yAPExFT9MrfcdPwxhdtd3ltTgUpdftnbXDnIYw0U0MY3MARWNWFeeu_MfHadxh9j9sn4ymNRxhbfbyyPXUluIiQ1DwIT12VCA-4vpNW9y0xmB-2E69IvX8bb0J8cWAjgpfpMwL9jf8-124ml0dy4CjzPXFZ1BvWOaEvvqqG1H1x5gg8jweC_u7nFymoNV4sPcAl_3U80_nPHqVotRROSqgOV3ryu2movK4q0gqg7egFc9rbCcfu8AI7TTqa-f4wDUJCfnRTk6DelM-xlNKfcqTRKha2uYFseWlEn19kaf8N8ytFBDnWerrYX1zZ8Mbn7_Y1P675wxRdFBDpXkZNIdwrhQMMlQM1-Rf95JKGEwZQaGZoxie2Dzs4wusp1M93Vgjfg47_n4eIEGdj0J_2WWtWtwCCh7_5zknuwecXTblLxjRg4Ebs9kPa0igxPhUu2OMNGwm5EvTmafxXzLTA_NnXY7HloKsdtMGWsCz_wErKXbYtKfxxE3U-vLKyTaQE8n8jwurcbh_txtIZmEPcBJIQISNcPiUpzIq4R6p-F3g8VJp-afz1qlri94VzDIegAAcxsCfVtSeWWZdpTqp3Qkid9gR2vT5BV1R3NJqBKMAE2EiDYoAHNOh2WnM8WcRabE01eS5yGoYSPeW5iwF45DR9viv3tk1UbL54WakZn4YnoSafUItiCiCnb_L3u7IbtjzwJKaWFfhbjzf-hK69jdC-Xv9f9ncJ3yV_\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!\u30c6\u30fc\u30de \u30d7\u30ec\u30fc\u30f3\r\nskinparam \u80cc\u666f\u8272 #FFFFFF\r\nskinparam \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb uml2\r\n\r\n\u30bf\u30a4\u30c8\u30eb \"E \u30b3\u30de\u30fc\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0 - \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\"\r\n\r\n\u30d1\u30c3\u30b1\u30fc\u30b8 \"\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u30ec\u30a4\u30e4\u30fc\" {\r\n    [Web \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9] as Web\r\n    [\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea] as Mobile\r\n    [\u7ba1\u7406\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9] as Admin\r\n}\r\n\r\n\u30d1\u30c3\u30b1\u30fc\u30b8 \"API \u30ec\u30a4\u30e4\u30fc\" {\r\n    [API \u30b2\u30fc\u30c8\u30a6\u30a7\u30a4] as Gateway\r\n    [\u8a8d\u8a3c] as Auth\r\n    [\u30ec\u30fc\u30c8\u30ea\u30df\u30c3\u30bf\u30fc] as RateLimit\r\n}\r\n\r\n\u30d1\u30c3\u30b1\u30fc\u30b8 \"\u30d3\u30b8\u30cd\u30b9\u30b5\u30fc\u30d3\u30b9\" {\r\n    [\u30ab\u30bf\u30ed\u30b0\u30b5\u30fc\u30d3\u30b9] as Catalog\r\n    [\u6ce8\u6587\u30b5\u30fc\u30d3\u30b9] as Order\r\n    [\u652f\u6255\u3044\u30b5\u30fc\u30d3\u30b9] as Payment\r\n    [\u914d\u9001\u30b5\u30fc\u30d3\u30b9] as Shipping\r\n    [\u901a\u77e5\u30b5\u30fc\u30d3\u30b9] as Notify\r\n}\r\n\r\n\u30d1\u30c3\u30b1\u30fc\u30b8 \"\u30c7\u30fc\u30bf\u30ec\u30a4\u30e4\u30fc\" {\r\n    \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9 \"\u88fd\u54c1 DB\" as ProdDB\r\n    \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9 \"\u6ce8\u6587 DB\" as OrderDB\r\n    \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9 \"\u30e6\u30fc\u30b6\u30fc DB\" as UserDB\r\n    \u30ad\u30e5\u30fc \"\u30e1\u30c3\u30bb\u30fc\u30b8\u30ad\u30e5\u30fc\" as MQ\r\n}\r\n\r\nWeb --&gt; Gateway\r\nMobile --&gt; Gateway\r\nAdmin --&gt; Gateway\r\n\r\nGateway --&gt; Auth\r\nGateway --&gt; RateLimit\r\nGateway --&gt; Catalog\r\nGateway --&gt; Order\r\n\r\nOrder --&gt; Payment\r\nOrder --&gt; Shipping\r\nOrder --&gt; Notify\r\n\r\nCatalog --&gt; ProdDB\r\nOrder --&gt; OrderDB\r\nAuth --&gt; UserDB\r\n\r\nPayment ..&gt; MQ : \u30a4\u30d9\u30f3\u30c8\u516c\u958b\r\nShipping ..&gt; MQ : \u30a4\u30d9\u30f3\u30c8\u8cfc\u8aad\r\nNotify ..&gt; MQ : \u30a4\u30d9\u30f3\u30c8\u8cfc\u8aad\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHTJnD157sVPFx3k3x3Wuy-443Kc8YYnlXWV5ZILJRsA-qIqnYJTaQ4HfjW44oDWeY5KbghD7uGQ_fZRcYt_yAPExFT9MrfcdPwxhdtd3ltTgUpdftnbXDnIYw0U0MY3MARWNWFeeu_MfHadxh9j9sn4ymNRxhbfbyyPXUluIiQ1DwIT12VCA-4vpNW9y0xmB-2E69IvX8bb0J8cWAjgpfpMwL9jf8-124ml0dy4CjzPXFZ1BvWOaEvvqqG1H1x5gg8jweC_u7nFymoNV4sPcAl_3U80_nPHqVotRROSqgOV3ryu2movK4q0gqg7egFc9rbCcfu8AI7TTqa-f4wDUJCfnRTk6DelM-xlNKfcqTRKha2uYFseWlEn19kaf8N8ytFBDnWerrYX1zZ8Mbn7_Y1P675wxRdFBDpXkZNIdwrhQMMlQM1-Rf95JKGEwZQaGZoxie2Dzs4wusp1M93Vgjfg47_n4eIEGdj0J_2WWtWtwCCh7_5zknuwecXTblLxjRg4Ebs9kPa0igxPhUu2OMNGwm5EvTmafxXzLTA_NnXY7HloKsdtMGWsCz_wErKXbYtKfxxE3U-vLKyTaQE8n8jwurcbh_txtIZmEPcBJIQISNcPiUpzIq4R6p-F3g8VJp-afz1qlri94VzDIegAAcxsCfVtSeWWZdpTqp3Qkid9gR2vT5BV1R3NJqBKMAE2EiDYoAHNOh2WnM8WcRabE01eS5yGoYSPeW5iwF45DR9viv3tk1UbL54WakZn4YnoSafUItiCiCnb_L3u7IbtjzwJKaWFfhbjzf-hK69jdC-Xv9f9ncJ3yV_\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Plantuml \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><img alt=\"PlantUML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u56f3\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e8451e511f.png\"\/><br \/>\n<em>\u56f3 3: \u30ec\u30a4\u30e4\u30fc\u69cb\u9020\u3092\u793a\u3059 PlantUML \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u56f3<\/em><\/p>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 2: \u30af\u30e9\u30a6\u30c9\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u56f3<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9:<\/strong><\/p>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 3: C4 \u30e2\u30c7\u30eb \u2013 \u30b3\u30f3\u30c6\u30ca\u56f3<\/h3>\n<p>C4 \u30e2\u30c7\u30eb\u306f\u3001\u62bd\u8c61\u5316\u306e\u8907\u6570\u306e\u30ec\u30d9\u30eb\u3067\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3092\u4f1d\u3048\u308b\u306e\u306b\u512a\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\uff1a<\/strong><\/p>\n<p><img alt=\"C4\u30e2\u30c7\u30eb\u30b3\u30f3\u30c6\u30ca\u56f3\uff1a\u30d1\u30d6\u30ea\u30c3\u30af\u30b5\u30d6\u30cd\u30c3\u30c8\u3001\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30b5\u30d6\u30cd\u30c3\u30c8\u3001Web\u30b5\u30fc\u30d0\u30fc\u3001API\u30b5\u30fc\u30d0\u30fc\u3001\u30b9\u30c8\u30ec\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u542b\u3080AWS\u30af\u30e9\u30a6\u30c9\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3092\u793a\u3059\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8cec25f51.png\"\/><br \/>\n@startuml<br \/>\n!define AWS_COLOR FF9900<br \/>\n!define DOCKER_COLOR 0DB7ED<br \/>\nskinparam componentStyle uml2<br \/>\nskinparam backgroundColor #FAFAFA<br \/>\ntitle\u300c\u30af\u30e9\u30a6\u30c9\u5c55\u958b\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u300d<br \/>\npackage\u300cAWS \u30ea\u30fc\u30b8\u30e7\u30f3\uff1aus-east-1\u300d{<br \/>\npackage\u300c\u30d1\u30d6\u30ea\u30c3\u30af\u30b5\u30d6\u30cd\u30c3\u30c8\u300d{<br \/>\n[CloudFront CDN] as CDN<br \/>\n[\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30ed\u30fc\u30c9\u30d0\u30e9\u30f3\u30b5\u30fc] as ALB #AWS_COLOR<br \/>\n}<br \/>\npackage\u300c\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30b5\u30d6\u30cd\u30c3\u30c8 1\u300d{<br \/>\n[Web \u30b5\u30fc\u30d0\u30fc 1] as Web1 #DOCKER_COLOR<br \/>\n[Web \u30b5\u30fc\u30d0\u30fc 2] as Web2 #DOCKER_COLOR<br \/>\n}<br \/>\npackage\u300c\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30b5\u30d6\u30cd\u30c3\u30c8 2\u300d{<br \/>\n[API \u30b5\u30fc\u30d0\u30fc 1] as API1 #DOCKER_COLOR<br \/>\n[API \u30b5\u30fc\u30d0\u30fc 2] as API2 #DOCKER_COLOR<br \/>\n}<br \/>\npackage\u300c\u30c7\u30fc\u30bf\u5c64\u300d{<br \/>\ndatabase\u300cRDS \u30d7\u30e9\u30a4\u30de\u30ea\u300das RDS1 #AWS_COLOR<br \/>\ndatabase\u300cRDS \u30ec\u30d7\u30ea\u30ab\u300das RDS2 #AWS_COLOR<br \/>\n[ElastiCache Redis] as Cache #AWS_COLOR<br \/>\n}<br \/>\npackage\u300c\u30b9\u30c8\u30ec\u30fc\u30b8\u300d{<br \/>\n[S3 \u30d0\u30b1\u30c3\u30c8] as S3 #AWS_COLOR<br \/>\n[EFS \u5171\u6709\u30b9\u30c8\u30ec\u30fc\u30b8] as EFS #AWS_COLOR<br \/>\n}<br \/>\n}<br \/>\n\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8 \u2013&gt; CDN<br \/>\nCDN \u2013&gt; ALB<br \/>\nALB \u2013&gt; Web1<br \/>\nALB \u2013&gt; Web2<br \/>\nWeb1 \u2013&gt; API1<br \/>\nWeb1 \u2013&gt; API2<br \/>\nWeb2 \u2013&gt; API1<br \/>\nWeb2 \u2013&gt; API2<br \/>\nAPI1 \u2013&gt; RDS1<br \/>\nAPI2 \u2013&gt; RDS1<br \/>\nRDS1 -[\u7834\u7dda]&gt; RDS2<br \/>\nAPI1 \u2013&gt; \u30ad\u30e3\u30c3\u30b7\u30e5<br \/>\nAPI2 \u2013&gt; \u30ad\u30e3\u30c3\u30b7\u30e5<br \/>\nAPI1 \u2013&gt; S3<br \/>\nAPI2 \u2013&gt; S3<br \/>\nWeb1 \u2013&gt; EFS<br \/>\nWeb2 \u2013&gt; EFS<br \/>\n@enduml<\/p>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 4: \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306e\u30a2\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u56f3<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9:<\/strong><\/p>\n<p><img alt=\"\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u30a2\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u56f3\uff1a\u30aa\u30f3\u30e9\u30a4\u30f3\u6ce8\u6587\u306b\u304a\u3051\u308b\u9867\u5ba2\u3068\u30b7\u30b9\u30c6\u30e0\u306e\u76f8\u4e92\u4f5c\u7528\u3092\u793a\u3059\u3002\u691c\u8a3c\u3001\u652f\u6255\u3044\u3001\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30b8\u30e7\u30d6\u3092\u542b\u3080\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8d19bd807.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLBTRjem5BxtKqIzQbyXkUchL6kg8b5QZUngJ4fiGa9QLFe3amOQ1FKdRIJe1b9f1E9X3hRZgxt2x50QAY7vmZh-plb-VFRBri5Nwzj94LL4-4Y7WmhAAaYdhHgzSG1VixikdmmCf0EEWSo0-E34wM9EWxug4ebv1480Zm0F03zaWAcm_mAs3OGgW5y1lm6f0UbNDgRGcWlEKFHTtXckQD9e9YVIffz6ll2kHDYGTNddmvy6AXnfkxGRqIG61mCE_irwUvfrR9QqNN16u5JtaARfxmXylKnyFgaQo2oMJOMePiVV057V0toX6CA8toM6V2bRfsV8B1qMZb2UXoxSXh0TwlhB-IMhsxA3klSqw4Yjx7R4wYqvchNVsBWbduGpPS7lBRu_eDHxuCtQob3UxpTfqDlkYOqZrlQKftbNufHGdG-IzBa19CooL8QbnEKYD3w5m3eJrdxP7i87DU08o9EQind5eMaTV3bUXv5he5wIDbwDlB9oA9iNwfvpPbcYCxbB1QjmMj9sW3JNQ_AY2DMcZ87K0K-1o0rgxsZVbR0qFcT_CEjCvJ1-srixfdOz-_jOsBzuxzv0Fn3Qb_Baxlu7\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\n|\u9867\u5ba2|\nstart\n:\u5546\u54c1\u3092\u691c\u7d22;\n:\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0;\n:\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8\u3078\u9032\u3080;\n\n|\u30b7\u30b9\u30c6\u30e0|\n:\u30ab\u30fc\u30c8\u5185\u306e\u9805\u76ee\u3092\u691c\u8a3c;\n:\u5408\u8a08\u91d1\u984d\u3092\u8a08\u7b97;\nif (\u5728\u5eab\u3042\u308a\uff1f) then (\u306f\u3044)\n  :\u5728\u5eab\u3092\u4e88\u7d04;\nelse (\u3044\u3044\u3048)\n  :\u5728\u5eab\u5207\u308c\u3092\u8868\u793a;\n  stop\nendif\n\n|\u9867\u5ba2|\n:\u914d\u9001\u5148\u4f4f\u6240\u3092\u5165\u529b;\n:\u652f\u6255\u3044\u65b9\u6cd5\u3092\u9078\u629e;\n\n|\u30b7\u30b9\u30c6\u30e0|\n:\u652f\u6255\u3044\u51e6\u7406;\nif (\u652f\u6255\u3044\u6210\u529f\uff1f) then (\u306f\u3044)\n  :\u6ce8\u6587\u3092\u4f5c\u6210;\n  :\u78ba\u8a8d\u30e1\u30fc\u30eb\u3092\u9001\u4fe1;\n  :\u5728\u5eab\u3092\u66f4\u65b0;\nelse (\u3044\u3044\u3048)\n  :\u652f\u6255\u3044\u30a8\u30e9\u30fc\u3092\u8868\u793a;\n  detach\nendif\n\n:\u6ce8\u6587\u3092\u51fa\u8377;\n:\u6ce8\u6587\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u66f4\u65b0;\nstop\n\npartition \"\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30b8\u30e7\u30d6\" {\n  :\u8acb\u6c42\u66f8\u3092\u751f\u6210;\n  :\u5009\u5eab\u306b\u901a\u77e5;\n}\n\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLBTRjem5BxtKqIzQbyXkUchL6kg8b5QZUngJ4fiGa9QLFe3amOQ1FKdRIJe1b9f1E9X3hRZgxt2x50QAY7vmZh-plb-VFRBri5Nwzj94LL4-4Y7WmhAAaYdhHgzSG1VixikdmmCf0EEWSo0-E34wM9EWxug4ebv1480Zm0F03zaWAcm_mAs3OGgW5y1lm6f0UbNDgRGcWlEKFHTtXckQD9e9YVIffz6ll2kHDYGTNddmvy6AXnfkxGRqIG61mCE_irwUvfrR9QqNN16u5JtaARfxmXylKnyFgaQo2oMJOMePiVV057V0toX6CA8toM6V2bRfsV8B1qMZb2UXoxSXh0TwlhB-IMhsxA3klSqw4Yjx7R4wYqvchNVsBWbduGpPS7lBRu_eDHxuCtQob3UxpTfqDlkYOqZrlQKftbNufHGdG-IzBa19CooL8QbnEKYD3w5m3eJrdxP7i87DU08o9EQind5eMaTV3bUXv5he5wIDbwDlB9oA9iNwfvpPbcYCxbB1QjmMj9sW3JNQ_AY2DMcZ87K0K-1o0rgxsZVbR0qFcT_CEjCvJ1-srixfdOz-_jOsBzuxzv0Fn3Qb_Baxlu7\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>5. Graphviz \u306e\u57fa\u790e\uff1a\u8907\u96d1\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u53ef\u8996\u5316 {#graphviz-tutorial}<\/h2>\n<p>Graphviz\uff08DOT\u8a00\u8a9e\uff09\u306f\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\u304c\u91cd\u8981\u306a\u8907\u96d1\u306a\u95a2\u4fc2\u3084\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30c8\u30dd\u30ed\u30b8\u306e\u53ef\u8996\u5316\u306b\u512a\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 1\uff1a\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u4f9d\u5b58\u95a2\u4fc2\u30b0\u30e9\u30d5<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\uff1a<\/strong><\/p>\n<p><img alt=\"\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u4f9d\u5b58\u95a2\u4fc2\u30b0\u30e9\u30d5\u56f3\uff1aAPI\u30b2\u30fc\u30c8\u30a6\u30a7\u30a4\u3001\u30b5\u30fc\u30d3\u30b9\u30e1\u30c3\u30b7\u30e5\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304a\u3088\u3073\u5916\u90e8\u30b2\u30fc\u30c8\u30a6\u30a7\u30a4\u3068\u63a5\u7d9a\u3055\u308c\u305f\u30b5\u30fc\u30d3\u30b9\u3092\u793a\u3059\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8d4a5db75.png\"\/><br \/>\n<em>\u56f34\uff1a\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u306e\u4f9d\u5b58\u95a2\u4fc2\u3068\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u3092\u793a\u3059Graphviz\u53ef\u8996\u5316<\/em><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNVU1r1EAYvhf8D0O8rlRbK5YSoaUiPawubD2VPYwzk2Ywm1lmstVYFtzkIAX1Iq4fF6EIWoQiioei2B8zXbX\/wnxsPmeydA8h+77P+8778TwTTHc5HNigTRFngvA9iojYJAPiYuIiSgTYv7QAoh+H7kNMubm9sZYaXIYJ2BE2HBDzAXvcAsLzHWIanA2jWNyyqOMQbLSAxVzPhf3Itc4pdIzeLAHBu1GCujfFC\/qEmNeuZtDksbgI\/h18O\/v5Vo5fyPClDH\/J8GB6\/P7v76NSQfGxiDmMm8ZlsmwtWTg6MPEb650tcAd65BH0jSrQshDGSzmwm84BtImwFaS1iq5nyKwuGXyXwaEMfiRFvZLBSZrofjRRMMtmZFUMPbtuu8exCuxAv09cr27ecvciK+N+3XGXedSiCHqUucqhLnR8jyJRc+QNhM\/i0oNTGb5LXk6UHSPfodFiebSg0jzQTXIDreaTSxre3Kj2VfzvcIaHyCtZisJyW1bT9OPkPPysDFXhXWU9y2TFWjFyMmIo7IKLvdpkMzLMzLf7kDr1yXXb3YaZnU8Oz06DP08\/adh15VaNRVpmxSgdRVSUjjQqSksjFdZALBXYRDUNuYteSrstF60DVOsttTAX0igADfbCGkrRCj3r8ZWkNfpo9ZcEaInVDFcpp9FvSosG9ehGoT9vJxVKqpPevK4vHl\/cil9l+CVR75vp84kcH8vxBxmM45dY1ZMEcCTD10nEfvLMvjWmiD4Ka7lJp5Om63RUVDE\/p04vc67eudfvaGH0Hz23S5s=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph MicroservicesDependencies {\r\n    rankdir=TB;\r\n    node [shape=box, style=\"rounded,filled\", fontname=\"Arial\"];\r\n    edge [fontname=\"Arial\", fontsize=10];\r\n    \n    \/\/ \u8272\u4ed8\u304d\u30ce\u30fc\u30c9\u5b9a\u7fa9\n    node [fillcolor=\"#e3f2fd\"];\n    \"API Gateway\" [fillcolor=\"#ffcdd2\"];\n    \"Service Mesh\" [fillcolor=\"#fff9c4\"];\n    \n    \/\/ \u30b3\u30a2\u30b5\u30fc\u30d3\u30b9\n    \"User Service\";\n    \"Auth Service\";\n    \"Order Service\";\n    \"Payment Service\";\n    \"Inventory Service\";\n    \"Notification Service\";\n    \"Analytics Service\";\n    \n    \/\/ \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\n    node [shape=cylinder, fillcolor=\"#c8e6c9\"];\n    \"User DB\";\n    \"Order DB\";\n    \"Product DB\";\n    \"Analytics DB\";\n    \n    \/\/ \u5916\u90e8\u30b5\u30fc\u30d3\u30b9\n    node [shape=box, fillcolor=\"#f3e5f5\", style=\"dashed,filled\"];\n    \"Payment Gateway\";\n    \"Email Service\";\n    \"SMS Service\";\n    \n    \/\/ \u95a2\u4fc2\u6027\n    \"API Gateway\" -&gt; \"Service Mesh\";\n    \"Service Mesh\" -&gt; \"User Service\";\n    \"Service Mesh\" -&gt; \"Auth Service\";\n    \"Service Mesh\" -&gt; \"Order Service\";\n    \"Service Mesh\" -&gt; \"Payment Service\";\n    \"Service Mesh\" -&gt; \"Inventory Service\";\n    \n    \"User Service\" -&gt; \"User DB\";\n    \"Auth Service\" -&gt; \"User DB\";\n    \"Order Service\" -&gt; \"Order DB\";\n    \"Order Service\" -&gt; \"Inventory Service\";\n    \"Order Service\" -&gt; \"Payment Service\";\n    \"Inventory Service\" -&gt; \"Product DB\";\n    \"Payment Service\" -&gt; \"Payment Gateway\";\n    \"Notification Service\" -&gt; \"Email Service\";\n    \"Notification Service\" -&gt; \"SMS Service\";\n    \"Analytics Service\" -&gt; \"Analytics DB\";\n    \n    \"Order Service\" -&gt; \"Notification Service\" [style=dashed];\n    \"Payment Service\" -&gt; \"Notification Service\" [style=dashed];\n    \n    \/\/ \u30b0\u30eb\u30fc\u30d7\u5316\u306e\u305f\u3081\u306e\u30b5\u30d6\u30b0\u30e9\u30d5\n    {\n        rank=same;\n        \"User Service\";\n        \"Auth Service\";\n    }\n    \n    {\n        rank=same;\n        \"Order Service\";\n        \"Payment Service\";\n        \"Inventory Service\";\n    }\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNVU1r1EAYvhf8D0O8rlRbK5YSoaUiPawubD2VPYwzk2Ywm1lmstVYFtzkIAX1Iq4fF6EIWoQiioei2B8zXbX\/wnxsPmeydA8h+77P+8778TwTTHc5HNigTRFngvA9iojYJAPiYuIiSgTYv7QAoh+H7kNMubm9sZYaXIYJ2BE2HBDzAXvcAsLzHWIanA2jWNyyqOMQbLSAxVzPhf3Itc4pdIzeLAHBu1GCujfFC\/qEmNeuZtDksbgI\/h18O\/v5Vo5fyPClDH\/J8GB6\/P7v76NSQfGxiDmMm8ZlsmwtWTg6MPEb650tcAd65BH0jSrQshDGSzmwm84BtImwFaS1iq5nyKwuGXyXwaEMfiRFvZLBSZrofjRRMMtmZFUMPbtuu8exCuxAv09cr27ecvciK+N+3XGXedSiCHqUucqhLnR8jyJRc+QNhM\/i0oNTGb5LXk6UHSPfodFiebSg0jzQTXIDreaTSxre3Kj2VfzvcIaHyCtZisJyW1bT9OPkPPysDFXhXWU9y2TFWjFyMmIo7IKLvdpkMzLMzLf7kDr1yXXb3YaZnU8Oz06DP08\/adh15VaNRVpmxSgdRVSUjjQqSksjFdZALBXYRDUNuYteSrstF60DVOsttTAX0igADfbCGkrRCj3r8ZWkNfpo9ZcEaInVDFcpp9FvSosG9ehGoT9vJxVKqpPevK4vHl\/cil9l+CVR75vp84kcH8vxBxmM45dY1ZMEcCTD10nEfvLMvjWmiD4Ka7lJp5Om63RUVDE\/p04vc67eudfvaGH0Hz23S5s=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb2\uff1a\u7d44\u7e54\u968e\u5c64<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\uff1a<\/strong><\/p>\n<p><img alt=\"CEO\u30b8\u30e7\u30f3\u30fb\u30b9\u30df\u30b9\u3001\u57f7\u884c\u5f79\u54e1\u30c1\u30fc\u30e0\u3001\u88fd\u54c1\u62c5\u5f53\u526f\u793e\u9577\u3001\u304a\u3088\u3073\u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\u62c5\u5f53\u526f\u793e\u9577\u304c\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3001QA\u3001\u304a\u3088\u3073DevOps\u30c1\u30fc\u30e0\u3092\u7387\u3044\u308b\u7d44\u7e54\u968e\u5c64\u56f3\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8d92f09cf.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqlVu1L20AY\/+5fEbovG3SztrZVpAOtljGQRBT3QYZckksTTC8lSZ1uCJqD4V4EGdPhPoyhwubex9iLY7A\/5taV\/Re7S9J4iXHWeYWSe3LP87vf8\/zuuahG3QZNXRDtelUHtivc6RPosAFaUA27MjM24s+RpUJhztFBE1ZkaykrOO6yCSsZ22ohFapZzTBNqGaygmYhF4EGfXUNmovQNRSQuRnEgGqdxkhbkBWAbVu3HOM2rOSulMP1\/l9\/v9D5\/LC9\/aX9cd83VCdEYc4EMjQrGfqMrls6EqYbhqszdLoNxTItu5K5MDBcLqn5cEuh8ZZuuDCTiF8l+A3BOwS\/9i1OSw5Sopgtx4X2PFyCSpgWNkLsYFcErxH8g+DnmZFoQZAaFTg6VI+s3W0N5xSgDXPLo4fqDMdsRkTTwAa6wPg5FkqQG8yDolbsMvG9a5x3TUSThqIDaApjNLE9eIuctyiiiYZhLgvjYNFwTveVOF9JRMxLFW4Y5mnbXomVgXgvCf5EvG8EPyDeLsGv\/OmHE4qC6sdrclKIY8UJ5Hq8OLCg5TU1rTiz0vwEhezynJUEOjUQhLaB6gmWpUG5qJX4FB3Bp\/CYdyFoOBwbnlGKvjiNWa7L04hBsTEGlAWI1GjbBG8SjIn3PswUvhcBoIsD+fbmBll7l8jipQQ7WVahJvPs2KjZ9JTFobYIfuuDrKehDZ0DbBwuik0nggqmXOziOWJPjUZxp0a5mKX\/jLmSJnX8xM\/NKqsEXk9XeNO21Jbipqg87t2zuDVNK8DcCeKWQjRO4KEpwVDT5PKgyjOUJge4qsf2RvAzgjdYClnC9ugD8lccMBWy11vEOwgFnoRRlKFcHCZ\/JphdJnZvn7b1HkIXzhKadZb7fnO5S7w9\/zQd\/hMjXv0\/27u\/fnq\/V19E99nlq6z5j8TmtcRcTMwlkbvF2NVBjUGTCuxhw6LWsAkkzd0Tm7QHpylpnRrl4aQuXKiRaHVXRvQtlUW6OZ9uLsRv5fbG4zZNvPeos\/+drO10vMPO16d9Xb0d0aJfJVwvzEZqLxfZr1sBJh6Oc69OhTMBrfwFHjE\/eA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph OrgChart {\n    rankdir=TB;\n    node [shape=box, style=\"rounded,filled\", fontname=\"Helvetica\"];\n    edge [fontname=\"Helvetica\", arrowsize=0.7];\n    \n    \/\/ \u7d4c\u55b6\u5c64\n    CEO [label=\"CEOnJohn Smith\", fillcolor=\"#1976d2\", fontcolor=\"white\"];\n    \n    \/\/ C\u30ec\u30d9\u30eb\n    subgraph cluster_exec {\n        label=\"\u7d4c\u55b6\u30c1\u30fc\u30e0\";\n        style=dashed;\n        color=\"#90caf9\";\n        \n        CTO [label=\"CTOnSarah Johnson\", fillcolor=\"#42a5f5\"];\n        CFO [label=\"CFOnMichael Brown\", fillcolor=\"#42a5f5\"];\n        COO [label=\"COOnEmily Davis\", fillcolor=\"#42a5f5\"];\n        CPO [label=\"CPOnDavid Wilson\", fillcolor=\"#42a5f5\"];\n    }\n    \n    \/\/ \u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\n    subgraph cluster_eng {\n        label=\"\u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\";\n        style=filled;\n        color=\"#e3f2fd\";\n        \n        VP_Eng [label=\"VP Engineering\", fillcolor=\"#64b5f6\"];\n        \n        subgraph cluster_eng_teams {\n            label=\"\u30c1\u30fc\u30e0\";\n            style=dotted;\n            \n            Backend [label=\"\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30c1\u30fc\u30e0n(12\u540d\u306e\u30a8\u30f3\u30b8\u30cb\u30a2)\", fillcolor=\"#bbdefb\"];\n            Frontend [label=\"\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30c1\u30fc\u30e0n(8\u540d\u306e\u30a8\u30f3\u30b8\u30cb\u30a2)\", fillcolor=\"#bbdefb\"];\n            DevOps [label=\"DevOps\u30c1\u30fc\u30e0n(5\u540d\u306e\u30a8\u30f3\u30b8\u30cb\u30a2)\", fillcolor=\"#bbdefb\"];\n            QA [label=\"QA\u30c1\u30fc\u30e0n(6\u540d\u306e\u30a8\u30f3\u30b8\u30cb\u30a2)\", fillcolor=\"#bbdefb\"];\n        }\n    }\n    \n    \/\/ \u30d7\u30ed\u30c0\u30af\u30c8\n    subgraph cluster_product {\n        label=\"\u30d7\u30ed\u30c0\u30af\u30c8\";\n        style=filled;\n        color=\"#fff3e0\";\n        \n        VP_Product [label=\"VP Product\", fillcolor=\"#ffb74d\"];\n        PM1 [label=\"\u30d7\u30ed\u30c0\u30af\u30c8\u30de\u30cd\u30fc\u30b8\u30e3\u30fcn\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\", fillcolor=\"#ffcc80\"];\n        PM2 [label=\"\u30d7\u30ed\u30c0\u30af\u30c8\u30de\u30cd\u30fc\u30b8\u30e3\u30fcn\u30e2\u30d0\u30a4\u30eb\", fillcolor=\"#ffcc80\"];\n        PM3 [label=\"\u30d7\u30ed\u30c0\u30af\u30c8\u30de\u30cd\u30fc\u30b8\u30e3\u30fcn\u30a2\u30ca\u30ea\u30c6\u30a3\u30af\u30b9\", fillcolor=\"#ffcc80\"];\n    }\n    \n    \/\/ \u95a2\u4fc2\u6027\n    CEO -&gt; CTO;\n    CEO -&gt; CFO;\n    CEO -&gt; COO;\n    CEO -&gt; CPO;\n    \n    CTO -&gt; VP_Eng;\n    VP_Eng -&gt; Backend;\n    VP_Eng -&gt; Frontend;\n    VP_Eng -&gt; DevOps;\n    VP_Eng -&gt; QA;\n    \n    CPO -&gt; VP_Product;\n    VP_Product -&gt; PM1;\n    VP_Product -&gt; PM2;\n    VP_Product -&gt; PM3;\n    \n    \/\/ \u5354\u50cd\u3092\u793a\u3059\u70b9\u7dda\n    PM1 -&gt; Backend [style=dotted, color=\"#757575\"];\n    PM2 -&gt; Frontend [style=dotted, color=\"#757575\"];\n    PM3 -&gt; Backend [style=dotted, color=\"#757575\"];\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqlVu1L20AY\/+5fEbovG3SztrZVpAOtljGQRBT3QYZckksTTC8lSZ1uCJqD4V4EGdPhPoyhwubex9iLY7A\/5taV\/Re7S9J4iXHWeYWSe3LP87vf8\/zuuahG3QZNXRDtelUHtivc6RPosAFaUA27MjM24s+RpUJhztFBE1ZkaykrOO6yCSsZ22ohFapZzTBNqGaygmYhF4EGfXUNmovQNRSQuRnEgGqdxkhbkBWAbVu3HOM2rOSulMP1\/l9\/v9D5\/LC9\/aX9cd83VCdEYc4EMjQrGfqMrls6EqYbhqszdLoNxTItu5K5MDBcLqn5cEuh8ZZuuDCTiF8l+A3BOwS\/9i1OSw5Sopgtx4X2PFyCSpgWNkLsYFcErxH8g+DnmZFoQZAaFTg6VI+s3W0N5xSgDXPLo4fqDMdsRkTTwAa6wPg5FkqQG8yDolbsMvG9a5x3TUSThqIDaApjNLE9eIuctyiiiYZhLgvjYNFwTveVOF9JRMxLFW4Y5mnbXomVgXgvCf5EvG8EPyDeLsGv\/OmHE4qC6sdrclKIY8UJ5Hq8OLCg5TU1rTiz0vwEhezynJUEOjUQhLaB6gmWpUG5qJX4FB3Bp\/CYdyFoOBwbnlGKvjiNWa7L04hBsTEGlAWI1GjbBG8SjIn3PswUvhcBoIsD+fbmBll7l8jipQQ7WVahJvPs2KjZ9JTFobYIfuuDrKehDZ0DbBwuik0nggqmXOziOWJPjUZxp0a5mKX\/jLmSJnX8xM\/NKqsEXk9XeNO21Jbipqg87t2zuDVNK8DcCeKWQjRO4KEpwVDT5PKgyjOUJge4qsf2RvAzgjdYClnC9ugD8lccMBWy11vEOwgFnoRRlKFcHCZ\/JphdJnZvn7b1HkIXzhKadZb7fnO5S7w9\/zQd\/hMjXv0\/27u\/fnq\/V19E99nlq6z5j8TmtcRcTMwlkbvF2NVBjUGTCuxhw6LWsAkkzd0Tm7QHpylpnRrl4aQuXKiRaHVXRvQtlUW6OZ9uLsRv5fbG4zZNvPeos\/+drO10vMPO16d9Xb0d0aJfJVwvzEZqLxfZr1sBJh6Oc69OhTMBrfwFHjE\/eA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb3\uff1a\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u56f3<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\uff1a<\/strong><\/p>\n<p><img alt=\"\u9867\u5ba2\u3001\u6c7a\u6e08\u3001\u5728\u5eab\u3001\u304a\u3088\u3073\u8acb\u6c42\u30b7\u30b9\u30c6\u30e0\u3092\u63a5\u7d9a\u3059\u308b\u6ce8\u6587\u51e6\u7406\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u793a\u3059\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u56f3\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8da8555c4.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp1VF1P01AYvvdXNPVSFKGwuJiaiItXXhAvvCFclPaMNZZ1aWf8isnoEYYIEQ0MGBrYRB0sfDmSwUT3Yw792L\/w9GP9OF170aR9n\/d9n\/d9nnMEcVbhCjkqwxW5x5L8knp7g8KPwuWfC6LCPnl63\/nOywJQQYEduXM3+EFNqTmuAFggSWJBBUOUWnwtAZbOipIEBHqIysr5Yp6bw78eKiIn0dNuLhBmcS4ZdOGq+AawaQ\/ovIaHKX2\/0oMNpDUQbCG4iLTv7jvExO7Jy5KssPTNbJbnZ3hc0KU3I7\/y6j16oRblOaBQUxI3AySW7tV+6cf1Pq9nIC\/IQRDBbadfCcGrPmQC7yXIXi5ZtRWktZF2aROCezRBHMFNBI+Q9gcjEsjy4zwH0j5ZXlR4CXhlJkf8XkarYVTK\/fqTo0Fg\/cT4sIHm3+vln+baoo9gfIT+taF3msbOuVE59cNjfthqfjTONGPnwlzfNZbWfMR4UKDcsVbbfiAVLKBUNXd\/9Erz191afPQy3hvSus5ylpBWT1rAPZDi02G1GMGrlSHnz0z022RGiflCIYbQNxQaMLbV2Oqt\/E6mDzdsCeFV1EG3H8TVQfAQaSe2TZ2R6UBFjI7Nct39ph9tESCSOqGaAxokvnXQMs9PI0NgGAZHDOvDE5g64IQOZr1jHa6GDGjjmDgOW0hf3o0yYZzZSMWMix399HPIsHbFMWJLuK1+XI2WG3PKDZCSWKmDC9nVx\/niDqAZ832SquM2mrgyegur+DQgeODcHc0oNsyk+9dq1wy4oO+dRTmkbGTsnvJ3gSXI36Lc9JhlXZY23S\/mfgfNb5vapdmu9o9SdDi3pOsb\/VNF\/7dJ9y9wgVNzQAgOWtTrrnieHQanMESK52Vn3KRe7\/4DLVyWoQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph DataFlow {\n    rankdir=LR;\n    nodesep=1.0;\n    node [shape=ellipse, style=\"filled\", fontname=\"Arial\"];\n    edge [fontname=\"Arial\", fontsize=9];\n    \n    \/\/ \u5916\u90e8\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\n    node [fillcolor=\"#ffccbc\", shape=box];\n    Customer [label=\"\u9867\u5ba2\"];\n    Vendor [label=\"\u30d9\u30f3\u30c0\u30fc\"];\n    Bank [label=\"\u9280\u884c\u30b7\u30b9\u30c6\u30e0\"];\n    \n    \/\/ \u30d7\u30ed\u30bb\u30b9\n    node [fillcolor=\"#c5cae9\", shape=circle];\n    P1 [label=\"\u6ce8\u6587\"];\n    P2 [label=\"\u652f\u6255\u3044\u51e6\u7406\"];\n    P3 [label=\"\u5728\u5eab\u66f4\u65b0\"];\n    P4 [label=\"\u8acb\u6c42\u66f8\u751f\u6210\"];\n    P5 [label=\"\u51fa\u8377\"];\n    P6 [label=\"\u901a\u77e5\u9001\u4fe1\"];\n    \n    \/\/ \u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\n    node [fillcolor=\"#c8e6c9\", shape=box3d];\n    D1 [label=\"\u6ce8\u6587DB\"];\n    D2 [label=\"\u5728\u5eabDB\"];\n    D3 [label=\"\u9867\u5ba2DB\"];\n    D4 [label=\"\u8acb\u6c42\u66f8\u8a18\u9332\"];\n    \n    \/\/ \u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\n    Customer -&gt; P1 [label=\"\u6ce8\u6587\u30ea\u30af\u30a8\u30b9\u30c8\"];\n    P1 -&gt; D1 [label=\"\u6ce8\u6587\u4fdd\u5b58\"];\n    P1 -&gt; D3 [label=\"\u9867\u5ba2\u66f4\u65b0\"];\n    P1 -&gt; P2 [label=\"\u652f\u6255\u3044\u8a73\u7d30\"];\n    \n    P2 -&gt; Bank [label=\"\u652f\u6255\u3044\u30ea\u30af\u30a8\u30b9\u30c8\"];\n    Bank -&gt; P2 [label=\"\u652f\u6255\u3044\u78ba\u8a8d\"];\n    P2 -&gt; P3 [label=\"\u652f\u6255\u3044\u6210\u529f\"];\n    \n    P3 -&gt; D2 [label=\"\u5728\u5eab\u6e1b\u5c11\"];\n    P3 -&gt; P4 [label=\"\u6ce8\u6587\u78ba\u5b9a\"];\n    \n    P4 -&gt; D4 [label=\"\u8acb\u6c42\u66f8\u4fdd\u5b58\"];\n    P4 -&gt; P6 [label=\"\u8acb\u6c42\u66f8\u30c7\u30fc\u30bf\"];\n    \n    P3 -&gt; P5 [label=\"\u51fa\u8377\u30ea\u30af\u30a8\u30b9\u30c8\"];\n    P5 -&gt; Vendor [label=\"\u914d\u9001\u30e9\u30d9\u30eb\"];\n    P5 -&gt; P6 [label=\"\u8ffd\u8de1\u60c5\u5831\"];\n    \n    P6 -&gt; Customer [label=\"\u6ce8\u6587\u78ba\u8a8dn+ \u8ffd\u8de1\"];\n    \n    \/\/ \u30af\u30a8\u30ea\u3092\u793a\u3059\u70b9\u7dda\n    D1 -&gt; P5 [label=\"\u6ce8\u6587\u8a73\u7d30\u53d6\u5f97\", style=dashed];\n    D2 -&gt; P1 [label=\"\u5728\u5eab\u78ba\u8a8d\", style=dashed];\n    D3 -&gt; P1 [label=\"\u9867\u5ba2\u60c5\u5831\u53d6\u5f97\", style=dashed];\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp1VF1P01AYvvdXNPVSFKGwuJiaiItXXhAvvCFclPaMNZZ1aWf8isnoEYYIEQ0MGBrYRB0sfDmSwUT3Yw792L\/w9GP9OF170aR9n\/d9n\/d9nnMEcVbhCjkqwxW5x5L8knp7g8KPwuWfC6LCPnl63\/nOywJQQYEduXM3+EFNqTmuAFggSWJBBUOUWnwtAZbOipIEBHqIysr5Yp6bw78eKiIn0dNuLhBmcS4ZdOGq+AawaQ\/ovIaHKX2\/0oMNpDUQbCG4iLTv7jvExO7Jy5KssPTNbJbnZ3hc0KU3I7\/y6j16oRblOaBQUxI3AySW7tV+6cf1Pq9nIC\/IQRDBbadfCcGrPmQC7yXIXi5ZtRWktZF2aROCezRBHMFNBI+Q9gcjEsjy4zwH0j5ZXlR4CXhlJkf8XkarYVTK\/fqTo0Fg\/cT4sIHm3+vln+baoo9gfIT+taF3msbOuVE59cNjfthqfjTONGPnwlzfNZbWfMR4UKDcsVbbfiAVLKBUNXd\/9Erz191afPQy3hvSus5ylpBWT1rAPZDi02G1GMGrlSHnz0z022RGiflCIYbQNxQaMLbV2Oqt\/E6mDzdsCeFV1EG3H8TVQfAQaSe2TZ2R6UBFjI7Nct39ph9tESCSOqGaAxokvnXQMs9PI0NgGAZHDOvDE5g64IQOZr1jHa6GDGjjmDgOW0hf3o0yYZzZSMWMix399HPIsHbFMWJLuK1+XI2WG3PKDZCSWKmDC9nVx\/niDqAZ832SquM2mrgyegur+DQgeODcHc0oNsyk+9dq1wy4oO+dRTmkbGTsnvJ3gSXI36Lc9JhlXZY23S\/mfgfNb5vapdmu9o9SdDi3pOsb\/VNF\/7dJ9y9wgVNzQAgOWtTrrnieHQanMESK52Vn3KRe7\/4DLVyWoQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode\u3067DOT\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>6. \u5b9f\u4e16\u754c\u306e\u5b9f\u88c5\u30d1\u30bf\u30fc\u30f3 {#implementation-patterns}<\/h2>\n<h3>\u30d1\u30bf\u30fc\u30f31\uff1aCI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u30c9\u30ad\u30e5\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\uff08Mermaid\uff09\uff1a<\/strong><\/p>\n<p><img alt=\"\u30bd\u30fc\u30b9\u7ba1\u7406\u304b\u3089\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3001\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u3001\u304a\u3088\u3073\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u306b\u81f3\u308bCI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u793a\u3059Mermaid\u56f3\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8deb63fe2.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u30de\u30fc\u30e1\u30a4\u30c9<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u30de\u30fc\u30e1\u30a4\u30c9<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFUl1r1EAUfZ9fEbavLUi3pWUfBGuLCi2U1rfBh2ySrqFhI9ms4JvOlLhLX4pFpe0qtn62thpQ6vqFP+bihv4L79xJNrOw1FnCJnfOvffce04jsu\/dtZbXmIWn1a436Hs9bEeOxysgfoP8BeJ79ukw20kqdwimzg0\/5vjcbNctkCcgX4Dog+zge4lZXeMgn4P8qBDiM4gPWAlBGuE1Xfof7Xz9Fq9k53vZ+X62vwXiDcgvIBMQKchTovIN5HsMGlSW\/WbMiYSGvlYvIi0Bt72WArwDuQ1SEsvEZKLOQtsPXATtEt3uoLMzeNnLusclYt2xmxzETxBnIN9SP2qGhVREdb10sEVzMPmYNnOGExqTLHr3+cWz7WzvR\/Yk\/Xsk4VHfRBpcYrvhcZohoa309cz\/SVuaXuL4WGPmX41Clw96p9nTk0uKjB9tJWz6cRihXeSR2rH4k6shUlOmsNHiVCy9OEiyr1vl1YoXR76jbg+1h8gtSPCh0ktJjvvuqUFlt8y6FnhRjEkCmx7TZUdh86W8GsMYDWtNTV1FYzLtT\/pS\/mGFkSiiDMMK51CE7MGGRqGYMgQrnEER1I\/lOmqEkokNBaMY7p\/lWmguuHhWKKD54KJGI\/l+mLEriusNGIrEDwKPptzwg6A2sXFF\/SZbcRRuerWJarVqwKi6xrkznuvaQ9z0vD03MzvphEEY1eqB7Wwaabpn0WDenTMSXac6O5r4D7CZxOw=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph LR\n    subgraph Source[\"\u30bd\u30fc\u30b9\u7ba1\u7406\"]\n        Git[GitHub \u30ea\u30dd\u30b8\u30c8\u30ea]\n        PR[\u30d7\u30eb\u30ea\u30af\u30a8\u30b9\u30c8]\n    end\n    \n    subgraph CI[\"\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\"]\n        Lint[\u30ea\u30f3\u30c6\u30a3\u30f3\u30b0]\n        Test[\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8]\n        Build[\u30d3\u30eb\u30c9\u6210\u679c\u7269]\n        Scan[\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b9\u30ad\u30e3\u30f3]\n    end\n    \n    subgraph CD[\"\u7d99\u7d9a\u7684\u30c7\u30d7\u30ed\u30a4\"]\n        Dev[\u958b\u767a\u74b0\u5883\u3078\u30c7\u30d7\u30ed\u30a4]\n        Stage[\u30b9\u30c6\u30fc\u30b8\u30f3\u30b0\u74b0\u5883\u3078\u30c7\u30d7\u30ed\u30a4]\n        E2E[E2E \u30c6\u30b9\u30c8]\n        Prod[\u672c\u756a\u74b0\u5883\u3078\u30c7\u30d7\u30ed\u30a4]\n    end\n    \n    subgraph Monitor[\"\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\"]\n        Logs[\u30ed\u30b0\u96c6\u7d04]\n        Metrics[\u30e1\u30c8\u30ea\u30af\u30b9\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9]\n        Alerts[\u30a2\u30e9\u30fc\u30c8\u30b7\u30b9\u30c6\u30e0]\n    end\n    \n    Git --&gt; PR\n    PR --&gt; Lint\n    Lint --&gt; Test\n    Test --&gt; Build\n    Build --&gt; Scan\n    Scan --&gt; Dev\n    Dev --&gt; Stage\n    Stage --&gt; E2E\n    E2E --&gt; Prod\n    Prod --&gt; Logs\n    Prod --&gt; Metrics\n    Metrics --&gt; Alerts\n    \n    style Git fill:#f0f0f0,stroke:#333\n    style Prod fill:#d4edda,stroke:#28a745,color:black\n    style Alerts fill:#f8d7da,stroke:#dc3545,color:black\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFUl1r1EAUfZ9fEbavLUi3pWUfBGuLCi2U1rfBh2ySrqFhI9ms4JvOlLhLX4pFpe0qtn62thpQ6vqFP+bihv4L79xJNrOw1FnCJnfOvffce04jsu\/dtZbXmIWn1a436Hs9bEeOxysgfoP8BeJ79ukw20kqdwimzg0\/5vjcbNctkCcgX4Dog+zge4lZXeMgn4P8qBDiM4gPWAlBGuE1Xfof7Xz9Fq9k53vZ+X62vwXiDcgvIBMQKchTovIN5HsMGlSW\/WbMiYSGvlYvIi0Bt72WArwDuQ1SEsvEZKLOQtsPXATtEt3uoLMzeNnLusclYt2xmxzETxBnIN9SP2qGhVREdb10sEVzMPmYNnOGExqTLHr3+cWz7WzvR\/Yk\/Xsk4VHfRBpcYrvhcZohoa309cz\/SVuaXuL4WGPmX41Clw96p9nTk0uKjB9tJWz6cRihXeSR2rH4k6shUlOmsNHiVCy9OEiyr1vl1YoXR76jbg+1h8gtSPCh0ktJjvvuqUFlt8y6FnhRjEkCmx7TZUdh86W8GsMYDWtNTV1FYzLtT\/pS\/mGFkSiiDMMK51CE7MGGRqGYMgQrnEER1I\/lOmqEkokNBaMY7p\/lWmguuHhWKKD54KJGI\/l+mLEriusNGIrEDwKPptzwg6A2sXFF\/SZbcRRuerWJarVqwKi6xrkznuvaQ9z0vD03MzvphEEY1eqB7Wwaabpn0WDenTMSXac6O5r4D7CZxOw=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u30d1\u30bf\u30fc\u30f3 2: \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30b9\u30ad\u30fc\u30de\u8a2d\u8a08<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9 (PlantUML):<\/strong><\/p>\n<p><img alt=\"\u30e6\u30fc\u30b6\u30fc\u3001\u6ce8\u6587\u3001\u6ce8\u6587\u9805\u76ee\u3001\u88fd\u54c1\u3001\u304a\u3088\u3073\u652f\u6255\u3044\u30c6\u30fc\u30d6\u30eb\u3092\u5099\u3048\u305fe\u30b3\u30de\u30fc\u30b9\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30b9\u30ad\u30fc\u30de\u3092\u793a\u3059PlantUML\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u56f3\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e0682d4f.png\"\/><br \/>\n<em>\u56f3 5: E \u30b3\u30de\u30fc\u30b9\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30b9\u30ad\u30fc\u30de\u3092\u793a\u3059\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u56f3<\/em><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLJFQnD15BxlNp7Y9GiDf8LUIYcDDS7GfeQQYhTbkZj9XkxEh3EpsDWKceIY1uiYABq8wg6MYe9w4IpqZzb6ql_2jpkxwTPi3rqMDk-RzxxtlH-JPQcmK87d6dSSqgACe6RvtbgbmB17J4IOeggB8WCjBg92S-PkjLg6nqHBIvE8ncfXnqGxuD5OpS3L2LoDO4CJRqeYf8bs3GGFH0PWMzGnqGAghJTZj5YCFyJ3r0NuSNbZvK5vep0tFs_61pwMyXaNZjN1ifFdO0k25N4ihE2qMQjN7ZNBzKPyv6AfB9UtAPiwWaweG09SMT-i6tkfu8RWJc2hh6PVG_covNQGqJHVqfBY5kP8TOYq1VKLvR6WoXFDvGjgH_xtAokrUdcjC5kQcJCJbTpUjfu6M8_cAhqD9RUvw8Ag19sKiAAFACaMaV7FgU8_lREbKjfx0KkHa-EXSAuFbaT0FdarT-mwm05PKwDHN67NmXuFcBgXAzdPnKY7-ZvbRGixZY1IfjszBhYcY9SLJS6-KNDUHTMRjY5dGW6ZoigVxDMsuQu73RwsRHgwbQmqnYEgmvriNvJ0J68xMZWznQcLl5MReNWRkZjzsQ2Y-AgZNgzOvBj8xmUu-2w622EnztYnsDj5sdK1RH6NixQq54yTel1U4XvF2xnipXIcB27HQ4pKG-bj1Iz1MWIMDKesGHElgmiHiIN6SoY2icnUa9tE8nAEgMDjTGs3SLXHGTiTXNXBIuTUN7xwClh-EHp0-pKS78V3N-7mPTW_6PyUZa_Emk6BS7WM3ix3mTkBym-ZRqS6OGwAg192bxHYFfq_8ZmulDpl_nqUZ3x-WAZH6w3Tl_ZzPtpS3_kdezVlHsVlnYT7bwz-PgYMuIVyc_y3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\n!define TABLE(name) entity name &lt;&lt; (T,#FFAAAA) &gt;&gt;\n!define PK(x) x &lt;&lt;PK&gt;&gt;\n!define FK(x) x &lt;&lt;FK&gt;&gt;\n\nTABLE(Users) {\n    PK(user_id) : INT\n    --\n    email : VARCHAR(255)\n    password_hash : VARCHAR(255)\n    created_at : TIMESTAMP\n    last_login : TIMESTAMP\n    status : ENUM\n}\n\nTABLE(Products) {\n    PK(product_id) : INT\n    --\n    sku : VARCHAR(50)\n    name : VARCHAR(255)\n    description : TEXT\n    price : DECIMAL(10,2)\n    stock_quantity : INT\n    category_id : INT\n}\n\nTABLE(Categories) {\n    PK(category_id) : INT\n    --\n    name : VARCHAR(100)\n    parent_id : INT\n}\n\nTABLE(Orders) {\n    PK(order_id) : INT\n    --\n    FK(user_id) : INT\n    order_date : TIMESTAMP\n    total_amount : DECIMAL(10,2)\n    status : ENUM\n    shipping_address : TEXT\n}\n\nTABLE(OrderItems) {\n    PK(item_id) : INT\n    --\n    FK(order_id) : INT\n    FK(product_id) : INT\n    quantity : INT\n    unit_price : DECIMAL(10,2)\n}\n\nTABLE(Payments) {\n    PK(payment_id) : INT\n    --\n    FK(order_id) : INT\n    payment_method : ENUM\n    transaction_id : VARCHAR(255)\n    amount : DECIMAL(10,2)\n    status : ENUM\n    processed_at : TIMESTAMP\n}\n\nUsers ||--o{ Orders : places\nOrders }o--|{ Users : belongs_to\nOrders ||--|{ OrderItems : contains\nOrderItems }o--|| Products : references\nProducts }o--|| Categories : categorized_in\nOrders ||--o{ Payments : paid_by\n\nnote right of Users\n  \u9867\u5ba2\u30a2\u30ab\u30a6\u30f3\u30c8\u3068\u8a8d\u8a3c\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\nend note\n\nnote left of Orders\n  \u914d\u9001\u60c5\u5831\u3092\u542b\u3080\u4e3b\u8981\u306a\u53d6\u5f15\u8a18\u9332\nend note\n\n@enduml\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLJFQnD15BxlNp7Y9GiDf8LUIYcDDS7GfeQQYhTbkZj9XkxEh3EpsDWKceIY1uiYABq8wg6MYe9w4IpqZzb6ql_2jpkxwTPi3rqMDk-RzxxtlH-JPQcmK87d6dSSqgACe6RvtbgbmB17J4IOeggB8WCjBg92S-PkjLg6nqHBIvE8ncfXnqGxuD5OpS3L2LoDO4CJRqeYf8bs3GGFH0PWMzGnqGAghJTZj5YCFyJ3r0NuSNbZvK5vep0tFs_61pwMyXaNZjN1ifFdO0k25N4ihE2qMQjN7ZNBzKPyv6AfB9UtAPiwWaweG09SMT-i6tkfu8RWJc2hh6PVG_covNQGqJHVqfBY5kP8TOYq1VKLvR6WoXFDvGjgH_xtAokrUdcjC5kQcJCJbTpUjfu6M8_cAhqD9RUvw8Ag19sKiAAFACaMaV7FgU8_lREbKjfx0KkHa-EXSAuFbaT0FdarT-mwm05PKwDHN67NmXuFcBgXAzdPnKY7-ZvbRGixZY1IfjszBhYcY9SLJS6-KNDUHTMRjY5dGW6ZoigVxDMsuQu73RwsRHgwbQmqnYEgmvriNvJ0J68xMZWznQcLl5MReNWRkZjzsQ2Y-AgZNgzOvBj8xmUu-2w622EnztYnsDj5sdK1RH6NixQq54yTel1U4XvF2xnipXIcB27HQ4pKG-bj1Iz1MWIMDKesGHElgmiHiIN6SoY2icnUa9tE8nAEgMDjTGs3SLXHGTiTXNXBIuTUN7xwClh-EHp0-pKS78V3N-7mPTW_6PyUZa_Emk6BS7WM3ix3mTkBym-ZRqS6OGwAg192bxHYFfq_8ZmulDpl_nqUZ3x-WAZH6w3Tl_ZzPtpS3_kdezVlHsVlnYT7bwz-PgYMuIVyc_y3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u30d1\u30bf\u30fc\u30f3 3: \u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u30fb\u30a2\u30ba\u30fb\u30b3\u30fc\u30c9\u306e\u53ef\u8996\u5316<\/h3>\n<p><strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9 (Mermaid):<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u30de\u30fc\u30e1\u30a4\u30c9<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u30de\u30fc\u30e1\u30a4\u30c9<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNVVtPE0EUfu+vmMCrFdoVaRtDUsolJNAgi5Y44WG73bYbmm6z3Yq8yU5UiDHRByVeogl3QYRqvAUSfswEjf\/Cc2a37e7UBqaZ7ZzT8539vjNzpiVbq5XJ\/GiEwKg38iVhp3Mq7YMH4e4xZx+5u8vZOne3OfvK2Uvh+cXZmlhAwCpnW32LIgWOgmkbumNa1VZeHO1F+yVZw1m27CWzWqJ9nD3jjImUkO8Msgby4bg7m6EwSWzwuvgMxG6GA6Ymc9Rn6J5jinZG94sw11CFuwcxYWA2PU9hksviQkZbxGwjXzF1FPCCs1ecHeBLoSbuN2H6HCQxONLTo8B3k7MNBLlNofoHZ3uixkeCyjpnz7HGqAnynXVnGdXqWGiKgbAlnvJOmrfePoVxRrVwFWG2eV9zDFS2IfYZSvu6VaDLxHUOUq02bxo2ZOkh9aK5\/R88jvGMGqPwIKgKtR2TWM\/IuBQZ7xmpSJFKd6RcoK4ihSSOaY7ma2RPhLTz3qLmxlQKk8xadadkG+rt6Vt5e2CEs\/ecHUIjkfS9HkCjYNbpeAX3O6PpZcPzXE4+aAfX3f2oOpatlXDH\/eb+JNT8lKRABVWFiAPX9A6AJwE22D31W251X5xcrxM2hXMjnGV8QqUwycWj5u9369IbF6\/K2NAbtumsIOVT7kLT7IgOfMzdLYl1Lj1BYRJRZjjEh5KoSdqdgrsnrXCJ\/VR6hsIkrUY9vCrjGatqQpn9Ow8q81T07IFo8RNRtyPufvZMSUImRzMVq1HIaY5eDv+0MKetULyvF6KwkqRlVQqT\/H345s+HnW6irW\/xuFOHg8zdfXF7wPWzKzbkO949JBodIYLAhG1VHdpZksxY1ssb8GE0FDziF1\/YcOdF\/LtP2NjisiMuO5QOO4wXbmihliMuO5SQQ8Jhz0jIoEuRXGG0T6UN7dhK0A6D4JCHUQGHEnKEcZlcGNaxlaAd8W+VoE\/w7wrK5DyS2cDb6s5KxcD\/VlI0K5VUfzGJn2t1x7aWjFS\/oij+OrpsFpxyKl57EMDhJvm4YjI5ONjG6fqwBqZuVSw7tVw2HSOAQrIeKm4MK\/lEGxXTbhQSvVB4MH1Yckgb0m62YcPFhJ4o\/ANK8O9u\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TB\n    subgraph AWS[\"AWS \u30af\u30e9\u30a6\u30c9\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\"]\n        direction TB\n        \n        subgraph Networking[\"\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\"]\n            VPC[VPC 10.0.0.0\/16]\n            IGW[\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u30b2\u30fc\u30c8\u30a6\u30a7\u30a4]\n            NAT[NAT \u30b2\u30fc\u30c8\u30a6\u30a7\u30a4]\n            \n            subgraph Public[\"\u30d1\u30d6\u30ea\u30c3\u30af\u30b5\u30d6\u30cd\u30c3\u30c8\"]\n                ALB[\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30ed\u30fc\u30c9\u30d0\u30e9\u30f3\u30b5\u30fc]\n                Bastion[\u30d0\u30b9\u30bf\u30fc\u30b7\u30e7\u30f3\u30db\u30b9\u30c8]\n            end\n            \n            subgraph Private[\"\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30b5\u30d6\u30cd\u30c3\u30c8\"]\n                subgraph AppTier[\"\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5c64\"]\n                    ECS1[ECS \u30bf\u30b9\u30af 1]\n                    ECS2[ECS \u30bf\u30b9\u30af 2]\n                    ECS3[ECS \u30bf\u30b9\u30af 3]\n                end\n                \n                subgraph DataTier[\"\u30c7\u30fc\u30bf\u5c64\"]\n                    RDS[RDS PostgreSQL&lt;br\/&gt;\u30de\u30eb\u30c1 AZ]\n                    Redis[ElastiCache Redis]\n                end\n            end\n        end\n        \n        subgraph Storage[\"\u30b9\u30c8\u30ec\u30fc\u30b8\"]\n            S3[S3 \u30d0\u30b1\u30c3\u30c8&lt;br\/&gt;\u30a2\u30bb\u30c3\u30c8\u3068\u30d0\u30c3\u30af\u30a2\u30c3\u30d7]\n            EFS[EFS \u5171\u6709\u30b9\u30c8\u30ec\u30fc\u30b8]\n        end\n        \n        subgraph Security[\"\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\"]\n            WAF[WAF \u30eb\u30fc\u30eb]\n            SG[\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b0\u30eb\u30fc\u30d7]\n            IAM[IAM \u30ed\u30fc\u30eb]\n        end\n        \n        subgraph Monitoring[\"\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30ed\u30ae\u30f3\u30b0\"]\n            CW[CloudWatch]\n            XRay[AWS X-Ray]\n            SNS[SNS \u901a\u77e5]\n        end\n    end\n    \n    User[\u30a8\u30f3\u30c9\u30e6\u30fc\u30b6\u30fc] --&gt; CloudFront[CloudFront CDN]\n    CloudFront --&gt; WAF\n    WAF --&gt; ALB\n    ALB --&gt; ECS1\n    ALB --&gt; ECS2\n    ALB --&gt; ECS3\n    \n    ECS1 --&gt; RDS\n    ECS2 --&gt; RDS\n    ECS3 --&gt; RDS\n    \n    ECS1 --&gt; Redis\n    ECS2 --&gt; Redis\n    ECS3 --&gt; Redis\n    \n    ECS1 --&gt; S3\n    ECS2 --&gt; S3\n    ECS3 --&gt; S3\n    \n    ECS1 --&gt; EFS\n    ECS2 --&gt; EFS\n    ECS3 --&gt; EFS\n    \n    ECS1 --&gt; CW\n    ECS2 --&gt; CW\n    ECS3 --&gt; CW\n    \n    RDS --&gt; CW\n    Redis --&gt; CW\n    \n    CW --&gt; SNS\n    \n    style VPC fill:#f9f9f9,stroke:#333,stroke-width:2px\n    style ALB fill:#ff9900,stroke:#cc7a00,color:white\n    style RDS fill:#2e73b8,stroke:#1a4d80,color:white\n    style User fill:#95a5a6,stroke:#7f8c8d\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNVVtPE0EUfu+vmMCrFdoVaRtDUsolJNAgi5Y44WG73bYbmm6z3Yq8yU5UiDHRByVeogl3QYRqvAUSfswEjf\/Cc2a37e7UBqaZ7ZzT8539vjNzpiVbq5XJ\/GiEwKg38iVhp3Mq7YMH4e4xZx+5u8vZOne3OfvK2Uvh+cXZmlhAwCpnW32LIgWOgmkbumNa1VZeHO1F+yVZw1m27CWzWqJ9nD3jjImUkO8Msgby4bg7m6EwSWzwuvgMxG6GA6Ymc9Rn6J5jinZG94sw11CFuwcxYWA2PU9hksviQkZbxGwjXzF1FPCCs1ecHeBLoSbuN2H6HCQxONLTo8B3k7MNBLlNofoHZ3uixkeCyjpnz7HGqAnynXVnGdXqWGiKgbAlnvJOmrfePoVxRrVwFWG2eV9zDFS2IfYZSvu6VaDLxHUOUq02bxo2ZOkh9aK5\/R88jvGMGqPwIKgKtR2TWM\/IuBQZ7xmpSJFKd6RcoK4ihSSOaY7ma2RPhLTz3qLmxlQKk8xadadkG+rt6Vt5e2CEs\/ecHUIjkfS9HkCjYNbpeAX3O6PpZcPzXE4+aAfX3f2oOpatlXDH\/eb+JNT8lKRABVWFiAPX9A6AJwE22D31W251X5xcrxM2hXMjnGV8QqUwycWj5u9369IbF6\/K2NAbtumsIOVT7kLT7IgOfMzdLYl1Lj1BYRJRZjjEh5KoSdqdgrsnrXCJ\/VR6hsIkrUY9vCrjGatqQpn9Ow8q81T07IFo8RNRtyPufvZMSUImRzMVq1HIaY5eDv+0MKetULyvF6KwkqRlVQqT\/H345s+HnW6irW\/xuFOHg8zdfXF7wPWzKzbkO949JBodIYLAhG1VHdpZksxY1ssb8GE0FDziF1\/YcOdF\/LtP2NjisiMuO5QOO4wXbmihliMuO5SQQ8Jhz0jIoEuRXGG0T6UN7dhK0A6D4JCHUQGHEnKEcZlcGNaxlaAd8W+VoE\/w7wrK5DyS2cDb6s5KxcD\/VlI0K5VUfzGJn2t1x7aWjFS\/oij+OrpsFpxyKl57EMDhJvm4YjI5ONjG6fqwBqZuVSw7tVw2HSOAQrIeKm4MK\/lEGxXTbhQSvVB4MH1Yckgb0m62YcPFhJ4o\/ANK8O9u\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067\u30de\u30fc\u30e1\u30a4\u30c9\u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><img alt=\"\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e8538cd989.png\"\/><br \/>\n<em>\u56f3 6: AWS \u30af\u30e9\u30a6\u30c9\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3<\/em><\/p>\n<hr\/>\n<h2>7. \u9ad8\u5ea6\u306a\u6280\u8853: \u30b9\u30bf\u30a4\u30eb\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba {#advanced-techniques}<\/h2>\n<h3>\u30de\u30fc\u30e1\u30a4\u30c9\u306e\u9ad8\u5ea6\u306a\u30b9\u30bf\u30a4\u30eb<\/h3>\n<p><strong>\u30c6\u30fc\u30de\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba:<\/strong><\/p>\n<p><img alt=\"\u958b\u59cb\u3001\u5206\u5c90\u3001\u30d7\u30ed\u30bb\u30b9\u3001\u304a\u3088\u3073\u7d42\u4e86\u72b6\u614b\u306b\u8272\u5206\u3051\u3055\u308c\u305f\u5f62\u72b6\u3092\u4f7f\u7528\u3057\u305fMermaid\u306e\u9ad8\u5ea6\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u793a\u3059\u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e490dacf.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj81qwkAUhfeBvMOAhNlEMIkazaKQv3kC6UZcRJ00Q6ORyUArMQt\/KIJ7+wJCV9JVF20fJ7Wlb9HEhGg6dxi453yHuVcQIjIlTAMRZB6eYKjBoRNiKIK8v3UocYY+DmGK8BxID5xRMnHo3Az8gKYyrDVNHbUaUKz6PfzILozruv8BI6BjTC+I0unYillSPpnii6m2sirNEI+C6bgyBUKm1FBLgmHKSAXIRuC5OI4Fged47o46Mw\/0rJzX+7\/73ellNwD1+g0wotP28L0\/xrlpZOIiWb4my80CmP1k\/Zysj8nqM1m9A31QhTbnu10Aq8oZBWeef7D7P2+rr4+nQrRyMW\/yN2RzHwMduMT3tZosddtIEUNGg3us1aSu2rZkcZQtpz14hOHrkF2EULOpKO0yZCkyktF16A+7t5\/I\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">%%{init: {'theme':'base', 'themeVariables': {\r\n    'primaryColor': '#4CAF50',\r\n    'primaryTextColor': '#fff',\r\n    'primaryBorderColor': '#388E3C',\r\n    'lineColor': '#757575',\r\n    'secondaryColor': '#FFC107',\r\n    'tertiaryColor': '#fff'\r\n}}}%%\r\n\r\ngraph TD\r\n    A[\u958b\u59cb] --&gt; B{\u5224\u65ad}\r\n    B --&gt;|\u306f\u3044| C[\u30d7\u30ed\u30bb\u30b9 A]\r\n    B --&gt;|\u3044\u3044\u3048| D[\u30d7\u30ed\u30bb\u30b9 B]\r\n    C --&gt; E[\u7d42\u4e86]\r\n    D --&gt; E\r\n    \r\n    style A fill:#2196F3,stroke:#1976D2,color:white\r\n    style E fill:#F44336,stroke:#D32F2F,color:white\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj81qwkAUhfeBvMOAhNlEMIkazaKQv3kC6UZcRJ00Q6ORyUArMQt\/KIJ7+wJCV9JVF20fJ7Wlb9HEhGg6dxi453yHuVcQIjIlTAMRZB6eYKjBoRNiKIK8v3UocYY+DmGK8BxID5xRMnHo3Az8gKYyrDVNHbUaUKz6PfzILozruv8BI6BjTC+I0unYillSPpnii6m2sirNEI+C6bgyBUKm1FBLgmHKSAXIRuC5OI4Fged47o46Mw\/0rJzX+7\/73ellNwD1+g0wotP28L0\/xrlpZOIiWb4my80CmP1k\/Zysj8nqM1m9A31QhTbnu10Aq8oZBWeef7D7P2+rr4+nQrRyMW\/yN2RzHwMduMT3tZosddtIEUNGg3us1aSu2rZkcZQtpz14hOHrkF2EULOpKO0yZCkyktF16A+7t5\/I\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 Mermaid \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>PlantUML \u30b9\u30ad\u30f3\u306e\u30d1\u30e9\u30e1\u30fc\u30bf<\/h3>\n<p><strong>\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306a\u30b9\u30bf\u30a4\u30eb:<\/strong><\/p>\n<p><img alt=\"\u4e2d\u592e\u96c6\u6a29\u578b\u72b6\u614b\u7ba1\u7406\u3092\u793a\u3059\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306eReact\u30a2\u30d7\u30ea\u304a\u3088\u3073Redux\u30b9\u30c8\u30a2\u304b\u3089\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306eNode.js API\u3001Express\u30b5\u30fc\u30d0\u30fc\u3001\u304a\u3088\u3073MongoDB\u3078\u306e\u30d5\u30ed\u30fc\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e5b529f3.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPHBQzj04CVl0ds79Jtab695gMDVIXwMe8UKqXv33Xjh8oknTyHgJLxqK2q9JKABIoazb1OQ0WajUL7Qff2G3xD9JRz5roi9Ex7iHOVPcLdzVpipx5J4CUFDHjqqHf6CpwGubk9IYfOKtsNyHyRNCZvGjcb4Am4DCSCDj8YhApw39lLceGuCFN3rwas9QjY3rO3wQ0dN8z8RqWUhm2XXo2hqHke19Nmz90WOhu5f94W_f53VPqtrHjklvQkJGMnLQ8H02ULeqpIGMZFtOHtR7NShQH2OHrWQiCgJnSfu4fXc35Rl-L-cHEAT54B6vnsY-688IwYaiKy6agYQsKuXXyHzD3bRI0CkKFuYs238ckX1UAlBCQmG5FWGPSijEUKSvMAfxDgbhdBgjkrYsN9I_UnQ8r9yqEEYMn8VQMDd91FjTcB-ES5LhbgvByL7ARujv2HupJNKkKhdJ_iB_KejNVFJeJ9FmICFboCq_Un9luIp5Z8IHKhaPpRWbscMXpbUn151ytD0VQZCPFfzu6Xix74URPyhIRmBT6UR90o0olSdHxg8fg5xp0A_nX4ivN6XBdisiB-bE5GblDqwkhbwh-RdtwVjculZsozxxTrVVxVssYTVswrjqo3KqoFKaPbI6_L2_0S0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n' \u30b0\u30ed\u30fc\u30d0\u30eb\u30b9\u30bf\u30a4\u30eb\r\nskinparam backgroundColor #FFFFFF\r\nskinparam shadowing false\r\nskinparam roundcorner 10\r\nskinparam linetype ortho\r\n\r\n' \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\r\nskinparam component {\r\n    BackgroundColor #E3F2FD\r\n    BorderColor #1976D2\r\n    ArrowColor #1976D2\r\n}\r\n\r\n' \u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30b9\u30bf\u30a4\u30eb\r\nskinparam package {\r\n    BackgroundColor #FFF3E0\r\n    BorderColor #F57C00\r\n    FontSize 14\r\n}\r\n\r\n' \u30ce\u30fc\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\r\nskinparam note {\r\n    BackgroundColor #F1F8E9\r\n    BorderColor #689F38\r\n    FontColor #33691E\r\n}\r\n\r\npackage \"\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\" {\r\n    component [React \u30a2\u30d7\u30ea]\r\n    component [Redux \u30b9\u30c8\u30a2]\r\n}\r\n\r\npackage \"\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\" {\r\n    component [Node.js API]\r\n    component [Express \u30b5\u30fc\u30d0\u30fc]\r\n    database [MongoDB]\r\n}\r\n\r\n[React \u30a2\u30d7\u30ea] --&gt; [Redux \u30b9\u30c8\u30a2]\r\n[Redux \u30b9\u30c8\u30a2] --&gt; [Node.js API]\r\n[Node.js API] --&gt; [Express \u30b5\u30fc\u30d0\u30fc]\r\n[Express \u30b5\u30fc\u30d0\u30fc] --&gt; [MongoDB]\r\n\r\nnote right of [Redux \u30b9\u30c8\u30a2]\r\n  \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u96c6\u4e2d\u578b\u72b6\u614b\u7ba1\u7406\r\nend note\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPHBQzj04CVl0ds79Jtab695gMDVIXwMe8UKqXv33Xjh8oknTyHgJLxqK2q9JKABIoazb1OQ0WajUL7Qff2G3xD9JRz5roi9Ex7iHOVPcLdzVpipx5J4CUFDHjqqHf6CpwGubk9IYfOKtsNyHyRNCZvGjcb4Am4DCSCDj8YhApw39lLceGuCFN3rwas9QjY3rO3wQ0dN8z8RqWUhm2XXo2hqHke19Nmz90WOhu5f94W_f53VPqtrHjklvQkJGMnLQ8H02ULeqpIGMZFtOHtR7NShQH2OHrWQiCgJnSfu4fXc35Rl-L-cHEAT54B6vnsY-688IwYaiKy6agYQsKuXXyHzD3bRI0CkKFuYs238ckX1UAlBCQmG5FWGPSijEUKSvMAfxDgbhdBgjkrYsN9I_UnQ8r9yqEEYMn8VQMDd91FjTcB-ES5LhbgvByL7ARujv2HupJNKkKhdJ_iB_KejNVFJeJ9FmICFboCq_Un9luIp5Z8IHKhaPpRWbscMXpbUn151ytD0VQZCPFfzu6Xix74URPyhIRmBT6UR90o0olSdHxg8fg5xp0A_nX4ivN6XBdisiB-bE5GblDqwkhbwh-RdtwVjculZsozxxTrVVxVssYTVswrjqo3KqoFKaPbI6_L2_0S0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 PlantUML \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Graphviz \u9ad8\u5ea6\u306a\u5c5e\u6027<\/h3>\n<p><strong>\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3:<\/strong><\/p>\n<p><img alt=\"Flutter\u3001React\u3001Node.js\u3001\u304a\u3088\u3073PostgreSQL\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5099\u3048\u305f\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c64\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u5c64\u3001\u304a\u3088\u3073\u30c7\u30fc\u30bf\u5c64\u3092\u793a\u3059\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e7dbd492.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 DOT \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 DOT \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVltv0zAUfkfiP0ThdWy9LL1oBIk7SIDGOokHhJATO21YSKok3QQIidoSNzFAXB9AgMZgbGNigwcumrQfY3XjZ2A7SeOUDrWIVGrtY+d8x9\/5znGhXfdBs6EcgrPANRGshVcd260r1\/fuUdgzNqZQvE7JGiWblDyiZFVMlyl51tl4vX1zKdoW+bgQTfhj1E3P8Xxd3WdVrKoF1HTJ8tzQBVeQrp5EziwKbbN3NbCvIT1fSo0OMJCjqxR\/pOQrxVsimBc8DLxI8U+Kv1H8g5JblLyleIGv4jU+xZ8paVPyzt1+9Wnn2crO4\/XOAlF7\/DqeqauhZG0CqOdGtdTgA3cmQE09LxtdD6LImIuMFyei35Q4cpvRRPEyZ43coeSBiPuuTBz3IvM2KDn51BiwjLH9lu04CI74XsuFCMrHQe6cDcOGXhgwTs4yofi7HCeC9X+Js9onjAyLwPe9ObE1N1rZLT68ytPL0\/42HrC0cyU+3r7fpu3FLrMi4cvRnuj1oGVE2jSdVhAi\/1LTZ1lzQxDanpuIXJYYl9Unije50LigNrm4yBKbdjYW1Yle2iPWJXMie1S0ChaUX+CkJKt5raSZOXk1HZ1HhnIhDoePhaJZVCsUb8jxHDD8sYNTCJihkq+oIwoPJfFfGjc0q8SNKehcww6RelHCPOMZtoO6YJQs8BKPuY1BBcpxpxUy8oYAERg35ET+kQmjFdguCoK+WXjC9EfJvCjrNTFmivw8XAosyyqi3G4pQCUtn9slBYcmT3VZmTpWm+YGQcRZVq6jl4MeIizLKI\/DLBGGA8yZDNsn+OnPne46TuYUfxHqZYX3geIlxv8Q7gfgGYIQ9OX4tlDT1pC6rlgaqu5GagGVYbHQn9RJ374C\/KuS3JIOTl4zoSlHDwuKJ70grPuoxpjJj7NDBw3QRLrJbyWI\/CwzQIMlUM6wPIWaDmtGXZRfK2u0vdV5+Jzie7yy40paHRrLrKCSWc1gHQFmIy2fKQTtQBE3zzshV1an7wWM3JZEkfFeNSjcnxkeqCUmTTx6hfeR\/Qczuj45PT1ZG+PqZpF0+1K1XIKFrNQSY3LyuGv8L3dxaL3Vwcw1z5xB4YDuRmLhQhA0EMzeITxOBtErwEga2y+\/0\/a8hFKsVFDR7EGJjYnf2GNWAD2pl1xaWtlkvSbrsmvsF3hCBwP5m6I763jn6cchg4++Ezb6IIiue4fXCVfqG\/Gfa10qnsw1JIGXNf5JT+SxS4OdaM+N3wVEr0Q=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph AdvancedStyling {\r\n    \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u30b0\u30e9\u30d5\u5c5e\u6027\r\n    graph [\r\n        bgcolor=\"#f8f9fa\"\r\n        fontname=\"Helvetica\"\r\n        fontsize=16\r\n        label=\"\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3n\u672c\u756a\u74b0\u5883\"\r\n        labelloc=\"t\"\r\n        pad=0.5\r\n        ranksep=1.5\r\n        nodesep=1.0\r\n    ];\r\n    \r\n    \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u30ce\u30fc\u30c9\u5c5e\u6027\r\n    node [\r\n        fontname=\"Helvetica\"\r\n        fontsize=11\r\n        style=\"filled,rounded\"\r\n        penwidth=2\r\n    ];\r\n    \r\n    \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u30a8\u30c3\u30b8\u5c5e\u6027\r\n    edge [\r\n        fontname=\"Helvetica\"\r\n        fontsize=9\r\n        penwidth=1.5\r\n        arrowsize=0.8\r\n    ];\r\n    \r\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u3092\u6301\u3064\u30ce\u30fc\u30c9\u30af\u30e9\u30b9\u30bf\r\n    subgraph cluster_presentation {\r\n        label=\"\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c64\";\r\n        style=filled;\r\n        color=\"#e3f2fd\";\r\n        fontcolor=\"#1565c0\";\r\n        \r\n        Web [label=\"Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3&lt;br\/&gt;React 18\", fillcolor=\"#64b5f6\", fontcolor=\"white\"];\r\n        Mobile [label=\"\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea&lt;br\/&gt;Flutter\", fillcolor=\"#64b5f6\", fontcolor=\"white\"];\n    }\r\n    \r\n    subgraph cluster_business {\r\n        label=\"\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u5c64\";\r\n        style=filled;\r\n        color=\"#fff3e0\";\r\n        fontcolor=\"#e65100\";\r\n        \r\n        API [label=\"REST API&lt;br\/&gt;Node.js\", fillcolor=\"#ffb74d\", fontcolor=\"black\"];\r\n        GraphQL [label=\"GraphQL \u30b2\u30fc\u30c8\u30a6\u30a7\u30a4\", fillcolor=\"#ffb74d\", fontcolor=\"black\"];\n    }\r\n    \r\n    subgraph cluster_data {\r\n        label=\"\u30c7\u30fc\u30bf\u5c64\";\r\n        style=filled;\r\n        color=\"#e8f5e9\";\r\n        fontcolor=\"#2e7d32\";\r\n        \r\n        Primary [label=\"\u30d7\u30e9\u30a4\u30de\u30ea DB&lt;br\/&gt;PostgreSQL 14\", shape=cylinder, fillcolor=\"#a5d6a7\"];\r\n        Replica [label=\"\u8aad\u307f\u53d6\u308a\u30ec\u30d7\u30ea\u30ab&lt;br\/&gt;PostgreSQL 14\", shape=cylinder, fillcolor=\"#c8e6c9\"];\r\n        Cache [label=\"Redis \u30ad\u30e3\u30c3\u30b7\u30e5&lt;br\/&gt;\u30af\u30e9\u30b9\u30bf\u30e2\u30fc\u30c9\", shape=cylinder, fillcolor=\"#c8e6c9\"];\n    }\r\n    \r\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u3092\u6301\u3064\u30a8\u30c3\u30b8\r\n    Web -&gt; API [label=\"HTTPS\/REST\", color=\"#1976d2\", fontcolor=\"#1976d2\"];\r\n    Mobile -&gt; API [label=\"HTTPS\/REST\", color=\"#1976d2\", fontcolor=\"#1976d2\"];\r\n    Web -&gt; GraphQL [label=\"WebSocket\", color=\"#1976d2\", fontcolor=\"#1976d2\", style=dashed];\r\n    \r\n    API -&gt; Primary [label=\"\u8aad\u307f\u66f8\u304d\", color=\"#388e3c\", fontcolor=\"#388e3c\"];\r\n    API -&gt; Cache [label=\"\u30ad\u30e3\u30c3\u30b7\u30e5\", color=\"#f57c00\", fontcolor=\"#f57c00\", style=dashed];\r\n    GraphQL -&gt; Replica [label=\"\u8aad\u307f\u53d6\u308a\u5c02\u7528\", color=\"#388e3c\", fontcolor=\"#388e3c\"];\r\n    \r\n    Primary -&gt; Replica [label=\"\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u30ec\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\", color=\"#757575\", style=dotted];\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVltv0zAUfkfiP0ThdWy9LL1oBIk7SIDGOokHhJATO21YSKok3QQIidoSNzFAXB9AgMZgbGNigwcumrQfY3XjZ2A7SeOUDrWIVGrtY+d8x9\/5znGhXfdBs6EcgrPANRGshVcd260r1\/fuUdgzNqZQvE7JGiWblDyiZFVMlyl51tl4vX1zKdoW+bgQTfhj1E3P8Xxd3WdVrKoF1HTJ8tzQBVeQrp5EziwKbbN3NbCvIT1fSo0OMJCjqxR\/pOQrxVsimBc8DLxI8U+Kv1H8g5JblLyleIGv4jU+xZ8paVPyzt1+9Wnn2crO4\/XOAlF7\/DqeqauhZG0CqOdGtdTgA3cmQE09LxtdD6LImIuMFyei35Q4cpvRRPEyZ43coeSBiPuuTBz3IvM2KDn51BiwjLH9lu04CI74XsuFCMrHQe6cDcOGXhgwTs4yofi7HCeC9X+Js9onjAyLwPe9ObE1N1rZLT68ytPL0\/42HrC0cyU+3r7fpu3FLrMi4cvRnuj1oGVE2jSdVhAi\/1LTZ1lzQxDanpuIXJYYl9Unije50LigNrm4yBKbdjYW1Yle2iPWJXMie1S0ChaUX+CkJKt5raSZOXk1HZ1HhnIhDoePhaJZVCsUb8jxHDD8sYNTCJihkq+oIwoPJfFfGjc0q8SNKehcww6RelHCPOMZtoO6YJQs8BKPuY1BBcpxpxUy8oYAERg35ET+kQmjFdguCoK+WXjC9EfJvCjrNTFmivw8XAosyyqi3G4pQCUtn9slBYcmT3VZmTpWm+YGQcRZVq6jl4MeIizLKI\/DLBGGA8yZDNsn+OnPne46TuYUfxHqZYX3geIlxv8Q7gfgGYIQ9OX4tlDT1pC6rlgaqu5GagGVYbHQn9RJ374C\/KuS3JIOTl4zoSlHDwuKJ70grPuoxpjJj7NDBw3QRLrJbyWI\/CwzQIMlUM6wPIWaDmtGXZRfK2u0vdV5+Jzie7yy40paHRrLrKCSWc1gHQFmIy2fKQTtQBE3zzshV1an7wWM3JZEkfFeNSjcnxkeqCUmTTx6hfeR\/Qczuj45PT1ZG+PqZpF0+1K1XIKFrNQSY3LyuGv8L3dxaL3Vwcw1z5xB4YDuRmLhQhA0EMzeITxOBtErwEga2y+\/0\/a8hFKsVFDR7EGJjYnf2GNWAD2pl1xaWtlkvSbrsmvsF3hCBwP5m6I763jn6cchg4++Ezb6IIiue4fXCVfqG\/Gfa10qnsw1JIGXNf5JT+SxS4OdaM+N3wVEr0Q=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 DOT \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>VPasCode \u3067 DOT \u3092\u7de8\u96c6<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>8. \u5171\u540c\u4f5c\u696d\u3068\u5171\u6709\u30ef\u30fc\u30af\u30d5\u30ed\u30fc {#collaboration}<\/h2>\n<h3>\u5171\u6709\u53ef\u80fd\u306a\u56f3\u306e\u4f5c\u6210<\/h3>\n<p><strong>\u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u306e\u5171\u6709:<\/strong><\/p>\n<ol>\n<li>\n<p><strong>\u5171\u6709\u30ea\u30f3\u30af\u306e\u751f\u6210:<\/strong><\/p>\n<ul>\n<li>\n<p>VPasCode \u306e\u300c\u5171\u6709\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af<\/p>\n<\/li>\n<li>\n<p>\u751f\u6210\u3055\u308c\u305f URL \u3092\u30b3\u30d4\u30fc\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u30e1\u30fc\u30eb\u3001Slack\u3001\u307e\u305f\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u4ecb\u3057\u3066\u5171\u6709\u3059\u308b<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3078\u306e\u57cb\u3081\u8fbc\u307f:<\/strong><\/p>\n<pre class=\"lang-markdown\"><code data-language=\"markdown\">## \u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\r\n\r\n![\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3](https:\/\/www.vpascode.com\/share\/abc123xyz.svg)\r\n\r\n\u307e\u305f\u306f\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u7248\u3092\u57cb\u3081\u8fbc\u3080:\r\n&lt;iframe src=\"https:\/\/www.vpascode.com\/embed\/abc123xyz\" width=\"100%\" height=\"600\"&gt;&lt;\/iframe&gt;\r\n\r\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u7528\u306e\u30a8\u30af\u30b9\u30dd\u30fc\u30c8:<\/strong><\/p>\n<ul>\n<li>\n<p>\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u30a6\u30a7\u30d6\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u7528\u306e SVG<\/p>\n<\/li>\n<li>\n<p>PowerPoint\/Keynote \u7528\u306e PNG (300 DPI)<\/p>\n<\/li>\n<li>\n<p>\u5370\u5237\u7528\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u7528\u306e PDF<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u306e\u7d71\u5408<\/h3>\n<p><strong>\u56f3\u306e\u30b3\u30fc\u30c9\u3092 Git \u306b\u4fdd\u5b58\u3059\u308b:<\/strong><\/p>\n<pre><code>project-root\/\r\n\u251c\u2500\u2500 docs\/\r\n\u2502   \u251c\u2500\u2500 diagrams\/\r\n\u2502   \u2502   \u251c\u2500\u2500 architecture\/\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 system-overview.puml\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 deployment-view.puml\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 data-flow.mmd\r\n\u2502   \u2502   \u251c\u2500\u2500 processes\/\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 user-journey.mmd\r\n\u2502   \u2502   \u2514\u2500\u2500 infrastructure\/\r\n\u2502   \u2502       \u2514\u2500\u2500 aws-architecture.dot\r\n\u2502   \u2514\u2500\u2500 README.md\r\n\u2514\u2500\u2500 src\/\r\n<\/code><\/pre>\n<p><strong>Git \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306e\u4f8b:<\/strong><\/p>\n<pre class=\"lang-bash\"><code data-language=\"bash\"># \u56f3\u306e\u4f5c\u6210\r\necho '@startuml\r\ncomponent \"API Gateway\"\r\n@enduml' &gt; docs\/diagrams\/architecture\/gateway.puml\r\n\r\n# \u5909\u66f4\u3092\u30b3\u30df\u30c3\u30c8\r\ngit add docs\/diagrams\/architecture\/gateway.puml\r\ngit commit -m \"API Gateway \u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u3092\u8ffd\u52a0\"\r\ngit push\r\n\r\n# \u30c1\u30fc\u30e0\u30e1\u30f3\u30d0\u30fc\u306f\u3001\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u304b URL \u304b\u3089\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067\u3001VPasCode \u3067\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\r\n<\/code><\/pre>\n<h3>\u30c1\u30fc\u30e0\u30b3\u30e9\u30dc\u30ec\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30bf\u30fc\u30f3<\/h3>\n<p><strong>\u30d1\u30bf\u30fc\u30f3 1: \u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u6c7a\u5b9a\u8a18\u9332 (ADRs)<\/strong><\/p>\n<pre class=\"lang-markdown\"><code data-language=\"markdown\"># ADR-007: \u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u901a\u4fe1\u30d1\u30bf\u30fc\u30f3\r\n\r\n## \u80cc\u666f\r\n\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u306e\u901a\u4fe1\u65b9\u6cd5\u3092\u6a19\u6e96\u5316\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\r\n\r\n## \u6c7a\u5b9a\r\n\u30b5\u30fc\u30d3\u30b9\u9593\u901a\u4fe1\u306b\u306f\u3001RabbitMQ \u3092\u4ecb\u3057\u305f\u975e\u540c\u671f\u30e1\u30c3\u30bb\u30fc\u30b8\u30f3\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\r\n\r\n## \u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\r\n\r\n```mermaid\r\ngraph LR\r\n    A[Service A] --&gt;|Publish| B[(RabbitMQ)]\r\n    B --&gt;|Subscribe| C[Service B]\r\n    B --&gt;|Subscribe| D[Service C]\r\n<\/code><\/pre>\n<h2>\u7d50\u679c<\/h2>\n<ul>\n<li>\n<p>\u7d50\u5408\u5ea6\u306e\u4f4e\u4e0b\uff08\u30c7\u30ab\u30c3\u30d7\u30ea\u30f3\u30b0\u306e\u5411\u4e0a\uff09<\/p>\n<\/li>\n<li>\n<p>\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u306e\u5411\u4e0a<\/p>\n<\/li>\n<li>\n<p>\u30e1\u30c3\u30bb\u30fc\u30b8\u51e6\u7406\u306e\u8907\u96d1\u3055\u306e\u5897\u52a0<\/p>\n<\/li>\n<\/ul>\n<pre><code>\r\n**\u30d1\u30bf\u30fc\u30f3 2: \u30b9\u30d7\u30ea\u30f3\u30c8\u8a08\u753b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8**\r\n\r\n\u30b9\u30d7\u30ea\u30f3\u30c8\u306b\u5408\u308f\u305b\u3066\u9032\u5316\u3057\u3066\u3044\u304f\u751f\u304d\u305f\u56f3\u3092\u4f5c\u6210\u3057\u307e\u3059:\r\n<\/code><\/pre>\n<p><img alt=\"\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u30e2\u30b8\u30e5\u30fc\u30eb\u3001API\u958b\u767a\u3001\u304a\u3088\u3073\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u7d71\u5408\u306a\u3069\u306e\u5b8c\u4e86\u3001\u9032\u884c\u4e2d\u3001\u672a\u7740\u624b\u3001\u304a\u3088\u3073\u30d6\u30ed\u30c3\u30af\u3055\u308c\u305f\u30bf\u30b9\u30af\u3092\u793a\u3059\u30b9\u30d7\u30ea\u30f3\u30c824\u306e\u30ab\u30f3\u30d0\u30f3\u30dc\u30fc\u30c9\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8f5b49dbe.png\"\/><\/p>\n<pre><code><\/code><\/pre>\n<pre><code>graph TD\r\n    subgraph Sprint24[\"Sprint 24 - \u9032\u884c\u4e2d\"]\r\n        Done[\u2705 \u5b8c\u4e86\u30bf\u30b9\u30af]\r\n        InProgress[\ud83d\udd04 \u9032\u884c\u4e2d]\r\n        ToDo[\ud83d\udccb \u672a\u7740\u624b]\r\n        Blocked[\u26d4 \u505c\u6b62\u4e2d]\r\n    end\r\n    \r\n    Done --&gt; Task1[\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u30e2\u30b8\u30e5\u30fc\u30eb]\r\n    Done --&gt; Task2[\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3]\r\n    \r\n    InProgress --&gt; Task3[API \u958b\u767a]\r\n    InProgress --&gt; Task4[\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u7d71\u5408]\r\n    \r\n    ToDo --&gt; Task5[\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8]\r\n    ToDo --&gt; Task6[\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210]\r\n    \r\n    Blocked --&gt; Task7[\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u7d71\u5408]\r\n    \r\n    style Done fill:#d4edda,stroke:#28a745\r\n    style InProgress fill:#fff3cd,stroke:#ffc107\r\n    style ToDo fill:#e2e3e5,stroke:#6c757d\r\n    style Blocked fill:#f8d7da,stroke:#dc3545\r\n<\/code><\/pre>\n<hr\/>\n<h2>\u7d50\u8ad6: \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u5353\u8d8a\u6027\u3078\u306e\u65c5<\/h2>\n<p>\u304a\u3081\u3067\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01VPasCode \u3068 Diagram-as-Code \u306e\u624b\u6cd5\u306b\u95a2\u3059\u308b\u5305\u62ec\u7684\u306a\u65c5\u3092\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002\u5b66\u3093\u3060\u3053\u3068\u3092\u632f\u308a\u8fd4\u308a\u3001\u4eca\u5f8c\u306e\u9053\u7b4b\u3092\u5207\u308a\u958b\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h3>\u7fd2\u5f97\u3057\u305f\u5185\u5bb9<\/h3>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u901a\u3058\u3066\u3001\u3042\u306a\u305f\u306f\u6b21\u306e\u3053\u3068\u3092\u5b66\u3073\u307e\u3057\u305f:<\/p>\n<ol>\n<li>\n<p><strong>\u30c6\u30ad\u30b9\u30c8\u30d9\u30fc\u30b9\u306e\u56f3\u306e\u529b<\/strong>: \u56f3\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u3053\u3068\u3067\u3001\u624b\u52d5\u3067\u306e\u914d\u7f6e\u306e\u7169\u308f\u3057\u3055\u304c\u306a\u304f\u306a\u308a\u3001\u4e00\u8cab\u6027\u304c\u78ba\u4fdd\u3055\u308c\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u4fdd\u5b88\u6027\u304c\u5411\u4e0a\u3059\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<\/p>\n<\/li>\n<li>\n<p><strong>3 \u3064\u306e\u696d\u754c\u6a19\u6e96\u30a8\u30f3\u30b8\u30f3<\/strong>: \u73fe\u5728\u306f\u3001\u4ee5\u4e0b\u306e\u5206\u91ce\u3067\u5b9f\u8df5\u7684\u306a\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u3066\u3044\u307e\u3059:<\/p>\n<ul>\n<li>\n<p><strong>Mermaid.js<\/strong>\u958b\u767a\u8005\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8\u3068\u30e2\u30c0\u30f3\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u306e\u305f\u3081\u306b<\/p>\n<\/li>\n<li>\n<p><strong>PlantUML<\/strong>\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30b0\u30ec\u30fc\u30c9\u306eUML\u304a\u3088\u3073\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u56f3\u4f5c\u6210\u306e\u305f\u3081\u306b<\/p>\n<\/li>\n<li>\n<p><strong>Graphviz<\/strong>\u8907\u96d1\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30c8\u30dd\u30ed\u30b8\u304a\u3088\u3073\u95a2\u4fc2\u6027\u306e\u53ef\u8996\u5316\u306e\u305f\u3081\u306b<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u5b9f\u4e16\u754c\u306e\u30d1\u30bf\u30fc\u30f3<\/strong>\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u304b\u3089\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30b9\u30ad\u30fc\u30de\u3001CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u304b\u3089\u7d44\u7e54\u56f3\u307e\u3067\u3001\u3042\u3089\u3086\u308b\u30b7\u30b9\u30c6\u30e0\u3084\u30d7\u30ed\u30bb\u30b9\u3092\u53ef\u8996\u5316\u3059\u308b\u529b\u3092\u8eab\u306b\u3064\u3051\u307e\u3057\u305f\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u30b3\u30e9\u30dc\u30ec\u30fc\u30b7\u30e7\u30f3\u30ef\u30fc\u30af\u30d5\u30ed\u30fc<\/strong>URL\u306b\u3088\u308b\u56f3\u306e\u5171\u6709\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3078\u306e\u57cb\u3081\u8fbc\u307f\u3001\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u3068\u306e\u7d71\u5408\u3001CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u306e\u751f\u6210\u81ea\u52d5\u5316\u306e\u65b9\u6cd5\u3092\u7406\u89e3\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306a\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/strong>\u30ab\u30b9\u30bf\u30e0\u30c6\u30fc\u30de\u3001\u4e00\u8cab\u3057\u305f\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u3001\u7570\u306a\u308b\u8074\u8846\u306b\u9069\u3057\u305f\u8a73\u7d30\u30ec\u30d9\u30eb\u3092\u7528\u3044\u3066\u3001\u51fa\u7248\u54c1\u8cea\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ol>\n<h3>\u3088\u308a\u5927\u304d\u306a\u8996\u70b9<\/h3>\n<p>VPasCode\u304c\u771f\u306b\u9769\u547d\u7684\u306a\u306e\u306f\u3001\u30c4\u30fc\u30eb\u305d\u306e\u3082\u306e\u3060\u3051\u3067\u306a\u304f\u3001\u305d\u308c\u304c\u8868\u3059\u30d1\u30e9\u30c0\u30a4\u30e0\u30b7\u30d5\u30c8\u306b\u3042\u308a\u307e\u3059\u3002\u56f3\u3092\u30b3\u30fc\u30c9\u3068\u3057\u3066\u6271\u3046\u3053\u3068\u3067\u3001\u3042\u306a\u305f\u306f\uff1a<\/p>\n<ul>\n<li>\n<p><strong>\u30ae\u30e3\u30c3\u30d7\u3092\u57cb\u3081\u308b<\/strong>\u5b9f\u88c5\u3068\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u9593\u306b<\/p>\n<\/li>\n<li>\n<p><strong>\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u6c11\u4e3b\u5316<\/strong>\u30c1\u30fc\u30e0\u306e\u5168\u54e1\u304c\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067<\/p>\n<\/li>\n<li>\n<p><strong>\u77e5\u8b58\u306e\u5c06\u6765\u6027\u78ba\u4fdd<\/strong>\u30c6\u30ad\u30b9\u30c8\u30d9\u30fc\u30b9\u3067\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u3055\u308c\u305f\u30a2\u30fc\u30c6\u30a3\u30d5\u30a1\u30af\u30c8\u3092\u901a\u3058\u3066<\/p>\n<\/li>\n<li>\n<p><strong>\u30aa\u30f3\u30dc\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u52a0\u901f<\/strong>\u660e\u78ba\u3067\u5b9f\u884c\u53ef\u80fd\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u3088\u3063\u3066<\/p>\n<\/li>\n<li>\n<p><strong>\u6280\u8853\u7684\u8ca0\u50b5\u306e\u524a\u6e1b<\/strong>\u66f4\u65b0\u3092\u30c6\u30ad\u30b9\u30c8\u7de8\u96c6\u306e\u3088\u3046\u306b\u30b7\u30f3\u30d7\u30eb\u306b\u3059\u308b\u3053\u3068\u3067<\/p>\n<\/li>\n<\/ul>\n<h3>\u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/h3>\n<p><strong>1\u9031\u76ee\uff1a\u5c0f\u3055\u304f\u59cb\u3081\u308b<\/strong><\/p>\n<ul>\n<li>\n<p>\u7d44\u7e54\u5185\u306e\u65e2\u5b58\u306e\u56f3\u30921\u3064\u9078\u3073\u307e\u3059<\/p>\n<\/li>\n<li>\n<p>\u304a\u597d\u307f\u306e\u30a8\u30f3\u30b8\u30f3\u3092\u4f7f\u3063\u3066VPasCode\u3067\u305d\u308c\u3092\u518d\u73fe\u3057\u307e\u3059<\/p>\n<\/li>\n<li>\n<p>\u540c\u50da\u3068\u5171\u6709\u3057\u3001\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u3092\u96c6\u3081\u307e\u3059<\/p>\n<\/li>\n<li>\n<p>\u30b3\u30fc\u30c9\u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30ea\u30dd\u30b8\u30c8\u30ea\u306b\u4fdd\u5b58\u3057\u307e\u3059<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u90312\u301c3\uff1a\u52e2\u3044\u3092\u9ad8\u3081\u308b<\/strong><\/p>\n<ul>\n<li>\n<p>\u30c1\u30fc\u30e0\u306e\u4e00\u822c\u7684\u306a\u56f3\u8868\u30bf\u30a4\u30d7\u7528\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u547d\u540d\u898f\u5247\u3068\u30b9\u30bf\u30a4\u30eb\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3\u3092\u78ba\u7acb\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u56f3\u8868\u30ec\u30d3\u30e5\u30fc\u3092\u30b3\u30fc\u30c9\u30ec\u30d3\u30e5\u30fc\u30d7\u30ed\u30bb\u30b9\u306b\u7d71\u5408\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u300c\u30b3\u30fc\u30c9\u3068\u3057\u3066\u306e\u56f3\u8868\u300d\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u6587\u66f8\u5316\u3059\u308b<\/p>\n<\/li>\n<\/ul>\n<p><strong>2\u30f6\u6708\u76ee\uff1a\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3068\u81ea\u52d5\u5316<\/strong><\/p>\n<ul>\n<li>\n<p>\u81ea\u52d5\u56f3\u8868\u751f\u6210\u306e\u305f\u3081\u306eCI\/CD\u7d71\u5408\u3092\u8a2d\u5b9a\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u7d44\u7e54\u5411\u3051\u306e\u56f3\u8868\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f5c\u6210\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u30c1\u30fc\u30e0\u30e1\u30f3\u30d0\u30fc\u306b\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u7bc0\u7d04\u3055\u308c\u305f\u6642\u9593\u3068\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u54c1\u8cea\u306e\u5411\u4e0a\u3092\u6e2c\u5b9a\u3059\u308b<\/p>\n<\/li>\n<\/ul>\n<p><strong>3\u30f6\u6708\u76ee\u4ee5\u964d\uff1a\u6587\u5316\u3068\u3057\u3066\u5b9a\u7740\u3055\u305b\u308b<\/strong><\/p>\n<ul>\n<li>\n<p>\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u610f\u601d\u6c7a\u5b9a\u306b\u304a\u3044\u3066\u30b3\u30fc\u30c9\u3068\u3057\u3066\u306e\u56f3\u8868\u3092\u63a8\u9032\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u6210\u529f\u4e8b\u4f8b\u3092\u30ea\u30fc\u30c0\u30fc\u30b7\u30c3\u30d7\u3068\u5171\u6709\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u9084\u5143\u3059\u308b<\/p>\n<\/li>\n<li>\n<p>AI\u652f\u63f4\u306b\u3088\u308b\u56f3\u8868\u751f\u6210\u306a\u3069\u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u63a2\u308b<\/p>\n<\/li>\n<\/ul>\n<h3>\u7af6\u4e89\u4e0a\u306e\u512a\u4f4d\u6027<\/h3>\n<p>\u30b3\u30fc\u30c9\u3068\u3057\u3066\u306e\u56f3\u8868\u3092\u7fd2\u5f97\u3057\u305f\u7d44\u7e54\u306f\u3001\u5927\u304d\u306a\u512a\u4f4d\u6027\u3092\u7372\u5f97\u3057\u307e\u3059\uff1a<br \/>\n\u2705\u00a0<strong>\u610f\u601d\u6c7a\u5b9a\u306e\u8fc5\u901f\u5316<\/strong>: \u660e\u78ba\u306a\u8996\u899a\u5316\u304c\u7406\u89e3\u3068\u5408\u610f\u5f62\u6210\u3092\u52a0\u901f\u3059\u308b<br \/>\n\u2705\u00a0<strong>\u30aa\u30f3\u30dc\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u9593\u306e\u77ed\u7e2e<\/strong>: \u65b0\u5165\u308a\u306e\u30a8\u30f3\u30b8\u30cb\u30a2\u306f\u5b9f\u884c\u53ef\u80fd\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u901a\u3058\u3066\u30b7\u30b9\u30c6\u30e0\u3092\u3088\u308a\u901f\u304f\u7406\u89e3\u3059\u308b<br \/>\n\u2705\u00a0<strong>\u30b9\u30c6\u30fc\u30af\u30db\u30eb\u30c0\u30fc\u3068\u306e\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5411\u4e0a<\/strong>: \u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306a\u56f3\u8868\u304c\u6280\u8853\u7684\u8996\u70b9\u3068\u30d3\u30b8\u30cd\u30b9\u7684\u8996\u70b9\u3092\u3064\u306a\u3050<br \/>\n\u2705\u00a0<strong>\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u8ca0\u62c5\u306e\u8efd\u6e1b<\/strong>: \u30c6\u30ad\u30b9\u30c8\u306e\u66f4\u65b0\u306f\u3001\u56f3\u8868\u306e\u518d\u63cf\u753b\u3088\u308a\u3082\u901f\u3044<br \/>\n\u2705\u00a0<strong>\u30b3\u30fc\u30c9\u54c1\u8cea\u306e\u5411\u4e0a<\/strong>: \u56f3\u9762\u5316\u306e\u884c\u70ba\u306f\u3001\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u4e0a\u306e\u554f\u984c\u3092\u65e9\u671f\u306b\u660e\u3089\u304b\u306b\u3057\u307e\u3059<\/p>\n<h3>\u30e0\u30fc\u30d6\u30e1\u30f3\u30c8\u306b\u53c2\u52a0\u3059\u308b<\/h3>\n<p>\u3042\u306a\u305f\u306f\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c\u8ca0\u62c5\u3067\u3042\u308b\u5fc5\u8981\u306f\u306a\u3044\u3068\u8a8d\u8b58\u3059\u308b\u3001\u958b\u767a\u8005\u3001\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u3001\u30c1\u30fc\u30e0\u304b\u3089\u306a\u308b\u6210\u9577\u3057\u7d9a\u3051\u308b\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u4e00\u54e1\u3068\u306a\u308a\u307e\u3057\u305f\u3002VPasCode\u3092\u4f7f\u3048\u3070\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8cc7\u7523\u306b\u5909\u3048\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u304c\u624b\u306b\u5165\u308a\u307e\u3059\u3002\u305d\u308c\u306f\u3001\u30b3\u30fc\u30c9\u3068\u5171\u306b\u9032\u5316\u3057\u3066\u3044\u304f\u3001\u751f\u304d\u3066\u3044\u308b\u30b7\u30b9\u30c6\u30e0\u305d\u306e\u3082\u306e\u306e\u8868\u73fe\u3067\u3059\u3002<\/p>\n<h3>\u6700\u5f8c\u306e\u8a00\u8449<\/h3>\n<p>\u56f3\u9762\u3092\u30b3\u30fc\u30c9\u3068\u3057\u3066\u6271\u3046\u3053\u3068\u3092\u59cb\u3081\u308b\u306e\u306b\u6700\u9069\u306a\u6642\u671f\u306f\u6628\u65e5\u3067\u3057\u305f\u3002\u6b21\u306b\u6700\u9069\u306a\u6642\u671f\u306f\u3001\u4eca\u3067\u3059\u3002<br \/>\n\u3042\u306a\u305f\u306e\u672a\u6765\u306e\u81ea\u5206\u3001\u305d\u3057\u3066\u672a\u6765\u306e\u30c1\u30fc\u30e0\u30e1\u30a4\u30c8\u306f\u3001\u5e38\u306b\u6700\u65b0\u3067\u3001\u5e38\u306b\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\u3067\u3001\u5e38\u306b\u6b63\u78ba\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304b\u3089\u5f97\u3089\u308c\u308b\u660e\u78ba\u3055\u3001\u4e00\u8cab\u6027\u3001\u305d\u3057\u3066\u81ea\u4fe1\u306b\u5bfe\u3057\u3066\u3001\u3042\u306a\u305f\u306b\u611f\u8b1d\u3059\u308b\u3067\u3057\u3087\u3046\u3002<br \/>\n<strong>\u59cb\u3081\u308b\u6e96\u5099\u306f\u3067\u304d\u307e\u3057\u305f\u304b\uff1f<\/strong>\u00a0\u8a2a\u554f\u3059\u308b\u00a0<a href=\"https:\/\/www.vpascode.com\/editor\/\">VPasCode<\/a>\u00a0\u4eca\u3059\u3050\u3001\u6700\u521d\u306e\u56f3\u9762\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u3001\u30c6\u30ad\u30b9\u30c8\u304c\u660e\u78ba\u3055\u3078\u3068\u5909\u5316\u3059\u308b\u69d8\u5b50\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002\u3053\u306e\u7d50\u8ad6\u3092\u8aad\u3080\u306e\u306b\u304b\u304b\u3063\u305f\u6642\u9593\u3088\u308a\u3082\u77ed\u3044\u6642\u9593\u3067\u3001\u3042\u306a\u305f\u306f\u6700\u521d\u306eDiagram-as-Code\u6210\u679c\u7269\u3092\u4f5c\u6210\u3057\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<br \/>\n\u6280\u8853\u30c9\u30ad\u30e5\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u306e\u672a\u6765\u306f\u3053\u3053\u306b\u3042\u308a\u307e\u3059\u3002\u305d\u308c\u306f\u30b3\u30fc\u30c9\u99c6\u52d5\u578b\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u30d9\u30fc\u30b9\u3001\u305d\u3057\u3066\u5b8c\u5168\u306b\u7121\u6599\u3067\u3059\u3002\u9769\u547d\u3078\u3088\u3046\u3053\u305d\u3002<\/p>\n<hr\/>\n<p><strong>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306b\u3064\u3044\u3066<\/strong><br \/>\n<em>\u3053\u306e\u5305\u62ec\u7684\u306a\u30ac\u30a4\u30c9\u306f\u3001Diagram-as-Code\u3092\u901a\u3058\u3066\u958b\u767a\u30c1\u30fc\u30e0\u304c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u306e\u6163\u884c\u3092\u8fd1\u4ee3\u5316\u3067\u304d\u308b\u3088\u3046\u652f\u63f4\u3059\u308b\u305f\u3081\u306b\u4f5c\u6210\u3055\u308c\u307e\u3057\u305f\u3002\u30d3\u30b8\u30e5\u30a2\u30eb\u30d1\u30e9\u30c0\u30a4\u30e0\u306e20\u5e74\u306b\u308f\u305f\u308b\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u5c02\u9580\u77e5\u8b58\u3092\u57fa\u76e4\u3068\u3057\u3066\u69cb\u7bc9\u3055\u308c\u305fVPasCode\u306f\u3001\u6280\u8853\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u672a\u6765\u3092\u8868\u3057\u3066\u3044\u307e\u3059\u2014\u30a2\u30af\u30bb\u30b9\u3057\u3084\u3059\u304f\u3001\u4fdd\u5b88\u53ef\u80fd\u3067\u3001\u7121\u6599\u3067\u3059\u3002<\/em><br \/>\n<em>\u6700\u7d42\u66f4\u65b0\u65e5\uff1a2026\u5e746\u6708<\/em><br \/>\n<em>\u5bfe\u8c61\u8aad\u8005\uff1a\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u8005\u3001\u30b7\u30b9\u30c6\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u3001DevOps\u30a8\u30f3\u30b8\u30cb\u30a2\u3001\u6280\u8853\u30e9\u30a4\u30bf\u30fc\u3001\u304a\u3088\u3073\u958b\u767a\u30c1\u30fc\u30e0<\/em><br \/>\n<em>\u524d\u63d0\u6761\u4ef6\uff1a\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u6982\u5ff5\u306b\u95a2\u3059\u308b\u57fa\u672c\u7684\u306a\u7406\u89e3<\/em><br \/>\n<em>\u63a8\u5b9a\u5b8c\u4e86\u6642\u9593\uff1a\u5b8c\u5168\u306a\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u30672\u301c3\u6642\u9593\u3001\u30af\u30a4\u30c3\u30af\u30b9\u30bf\u30fc\u30c8\u306715\u5206<\/em><\/p>\n<hr\/>\n<p class=\"\"><strong>\u697d\u3057\u3044\u56f3\u9762\u5316\u3092\uff01\ud83c\udfa8\ud83d\udcca<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b\uff1a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u9769\u547d\u306f\u3053\u3053\u304b\u3089\u59cb\u307e\u308a\u307e\u3059 \u30bd\u30d5\u30c8\u30a6\u30a7\u30a2&hellip;<\/p>\n","protected":false},"author":2,"featured_media":4258,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","fifu_image_url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","fifu_image_alt":"","footnotes":""},"categories":[118],"tags":[],"class_list":["post-4257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vpascode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends\" \/>\n<meta property=\"og:description\" content=\"\u306f\u3058\u3081\u306b\uff1a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u9769\u547d\u306f\u3053\u3053\u304b\u3089\u59cb\u307e\u308a\u307e\u3059 \u30bd\u30d5\u30c8\u30a6\u30a7\u30a2&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\" \/>\n<meta property=\"og:site_name\" content=\"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-02T08:13:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-09T12:59:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\" \/>\n\t<meta property=\"og:image:width\" content=\"909\" \/>\n\t<meta property=\"og:image:height\" content=\"504\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83\"},\"headline\":\"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\",\"datePublished\":\"2026-06-02T08:13:49+00:00\",\"dateModified\":\"2026-09-09T12:59:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\"},\"wordCount\":369,\"publisher\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png\",\"articleSection\":[\"VPasCode\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\",\"url\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\",\"name\":\"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends\",\"isPartOf\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png\",\"datePublished\":\"2026-06-02T08:13:49+00:00\",\"dateModified\":\"2026-09-09T12:59:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\",\"url\":\"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png\",\"contentUrl\":\"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png\",\"width\":909,\"height\":504},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.go2posts.com\/ja\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/#website\",\"url\":\"https:\/\/www.go2posts.com\/ja\/\",\"name\":\"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.go2posts.com\/ja\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/#organization\",\"name\":\"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends\",\"url\":\"https:\/\/www.go2posts.com\/ja\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2025\/01\/logo.png\",\"contentUrl\":\"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2025\/01\/logo.png\",\"width\":341,\"height\":46,\"caption\":\"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends\"},\"image\":{\"@id\":\"https:\/\/www.go2posts.com\/ja\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.go2posts.com\/ja\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.go2posts.com\/ja\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","og_locale":"ja_JP","og_type":"article","og_title":"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends","og_description":"\u306f\u3058\u3081\u306b\uff1a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u9769\u547d\u306f\u3053\u3053\u304b\u3089\u59cb\u307e\u308a\u307e\u3059 \u30bd\u30d5\u30c8\u30a6\u30a7\u30a2&hellip;","og_url":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","og_site_name":"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends","article_published_time":"2026-06-02T08:13:49+00:00","article_modified_time":"2026-09-09T12:59:33+00:00","og_image":[{"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","type":"","width":"","height":""},{"width":909,"height":504,"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","twitter_misc":{"\u57f7\u7b46\u8005":"curtis","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"12\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#article","isPartOf":{"@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"},"author":{"name":"curtis","@id":"https:\/\/www.go2posts.com\/ja\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83"},"headline":"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb","datePublished":"2026-06-02T08:13:49+00:00","dateModified":"2026-09-09T12:59:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"},"wordCount":369,"publisher":{"@id":"https:\/\/www.go2posts.com\/ja\/#organization"},"image":{"@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png","articleSection":["VPasCode"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","url":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","name":"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends","isPartOf":{"@id":"https:\/\/www.go2posts.com\/ja\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage"},"image":{"@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png","datePublished":"2026-06-02T08:13:49+00:00","dateModified":"2026-09-09T12:59:33+00:00","breadcrumb":{"@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage","url":"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png","contentUrl":"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2026\/06\/img_6a1e86c394c18.png","width":909,"height":504},{"@type":"BreadcrumbList","@id":"https:\/\/www.go2posts.com\/ja\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.go2posts.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Diagram-as-Code \u306e\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\uff1a\u73fe\u4ee3\u306e\u958b\u767a\u30c1\u30fc\u30e0\u306e\u305f\u3081\u306e VPasCode \u5b8c\u5168\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb"}]},{"@type":"WebSite","@id":"https:\/\/www.go2posts.com\/ja\/#website","url":"https:\/\/www.go2posts.com\/ja\/","name":"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends","description":"","publisher":{"@id":"https:\/\/www.go2posts.com\/ja\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.go2posts.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/www.go2posts.com\/ja\/#organization","name":"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends","url":"https:\/\/www.go2posts.com\/ja\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.go2posts.com\/ja\/#\/schema\/logo\/image\/","url":"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2025\/01\/logo.png","contentUrl":"https:\/\/www.go2posts.com\/ja\/wp-content\/uploads\/sites\/16\/2025\/01\/logo.png","width":341,"height":46,"caption":"Go 2 Posts Japanese | Breaking Digital News &amp; Software Trends"},"image":{"@id":"https:\/\/www.go2posts.com\/ja\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.go2posts.com\/ja\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83","name":"curtis","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.go2posts.com\/ja\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.go2posts.com\/ja\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/posts\/4257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/comments?post=4257"}],"version-history":[{"count":0,"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/posts\/4257\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/media\/4258"}],"wp:attachment":[{"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/media?parent=4257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/categories?post=4257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.go2posts.com\/ja\/wp-json\/wp\/v2\/tags?post=4257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}