{"id":11240,"date":"2026-08-03T14:46:11","date_gmt":"2026-08-03T06:46:11","guid":{"rendered":"https:\/\/www.cybermedian.com\/ja\/diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot\/"},"modified":"2026-09-03T22:38:44","modified_gmt":"2026-09-03T14:38:44","slug":"diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/ja\/diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot\/","title":{"rendered":"\ud83d\udcd8Mermaid\u306b\u3088\u308b\u300c\u56f3\u3092\u30b3\u30fc\u30c9\u3068\u3057\u3066\u300d\u30b1\u30fc\u30b9\u30b9\u30bf\u30c7\u30a3\uff1aVisual Paradigm AI \u30c1\u30e3\u30c3\u30c8\u30dc\u30c3\u30c8\u306b\u3088\u308b UML \u30e2\u30c7\u30ea\u30f3\u30b0\u306e\u52a0\u901f"},"content":{"rendered":"

1. \u5c0e\u5165\u3068\u554f\u984c\u306e\u63d0\u793a<\/h2>\n

\u5f93\u6765\u306eUML \u30e2\u30c7\u30ea\u30f3\u30b0<\/a>\u306f\u5f37\u529b\u3067\u3059\u304c\u3001\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30ca\u30fc\u306f\u69cb\u6587\u3068\u306e\u683c\u95d8\u306b\u6570\u6642\u9593\u3092\u8cbb\u3084\u3057\u3001\u56f3\u56fa\u6709\u306e\u8a18\u6cd5\u3092\u6697\u8a18\u3057\u3001\u8a00\u8a9e\u7684\u306a\u30a2\u30a4\u30c7\u30a2\u3092\u624b\u4f5c\u696d\u3067\u6b63\u78ba\u3067\u30a8\u30e9\u30fc\u306e\u306a\u3044\u30e2\u30c7\u30eb\u306b\u5909\u63db\u3057\u307e\u3059\u3002\u30b9\u30d4\u30fc\u30c9\u306e\u901f\u3044\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30c1\u30fc\u30e0\u3067\u306f\u3001\u3053\u306e\u6469\u64e6\u304c\u8a2d\u8a08\u30ec\u30d3\u30e5\u30fc\u3092\u9045\u3089\u305b\u3001\u30a8\u30f3\u30b8\u30cb\u30a2\u4ee5\u5916\u306e\u53c2\u52a0\u3092\u963b\u5bb3\u3057\u307e\u3059\u3002<\/p>\n

\"Visual<\/p>\n

\u300cVisual Paradigm AI \u30c1\u30e3\u30c3\u30c8\u30dc\u30c3\u30c8<\/a><\/strong>\u300d\u306f\u3001\u30b7\u30b9\u30c6\u30e0\u3092\u5e73\u6613\u306a\u8a00\u8449\u3067\u8a18\u8ff0\u3059\u308b\u3060\u3051\u3067\u3001\u5373\u5ea7\u306b\u672c\u756a\u54c1\u8cea\u306e\u300c\u56f3\u30b3\u30fc\u30c9<\/a>\u300d\u3092\u3001Mermaid\u3001PlantUML\u3001\u307e\u305f\u306f Graphviz \u3067<\/strong>\u300d\u306e\u5f62\u5f0f\u3067\u63d0\u4f9b\u3057\u3001\u3042\u306a\u305f\u306b\u5c4a\u304f\u524d\u306b\u6b63\u78ba\u6027\u304c\u691c\u8a3c\u3055\u308c\u307e\u3059\u3002<\/p>\n\n

2. \u4e3b\u8981\u306a\u6982\u5ff5<\/h2>\n\n\n\n\n\n\n\n\n\n\n
\u6982\u5ff5<\/th>\n\u610f\u5473<\/th>\n<\/tr>\n<\/thead>\n
\u81ea\u7136\u8a00\u8a9e \u2192 \u56f3<\/strong><\/td>\n\u30b7\u30b9\u30c6\u30e0\u3092\u8a18\u8ff0\u3059\u308b\uff08\u4f8b\uff1a\u300c\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u5206\u5c90\u4ed8\u304d\u306e\u30ed\u30b0\u30a4\u30f3\u30d5\u30ed\u30fc\u300d\uff09\u3068\u3001\u30a2\u30b7\u30b9\u30bf\u30f3\u30c8\u304c\u81ea\u52d5\u7684\u306b\u56f3\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n
\u30de\u30eb\u30c1\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u5bfe\u5fdc<\/strong><\/td>\n1 \u3064\u306e\u8a18\u8ff0\u306f\u3001Mermaid\uff08\u9ad8\u901f\u306a\u30c6\u30ad\u30b9\u30c8\u56f3\uff09\u3001PlantUML\uff08\u5b8c\u5168\u306aUML<\/a>\/SysML<\/a>\/C4<\/a>\u306a\u3069\uff09\u3084 Graphviz\uff08\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3\/\u72b6\u614b\u56f3\uff09\u3068\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3067\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n
\u753b\u50cf\u89e3\u6790<\/strong><\/td>\n\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3084\u30b9\u30b1\u30c3\u30c1\uff08\u624b\u66f8\u304d\u306e\u30db\u30ef\u30a4\u30c8\u30dc\u30fc\u30c9\u306e\u5199\u771f\u3067\u3082\u53ef\uff09\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u3068\u3001\u30a2\u30b7\u30b9\u30bf\u30f3\u30c8\u304c\u5185\u5bb9\u3092\u89e3\u6790\u3057\u3001\u30c6\u30ad\u30b9\u30c8\u7684\u30fb\u69cb\u9020\u7684\u306a\u8981\u70b9\u3092\u30e2\u30c7\u30ea\u30f3\u30b0\u5165\u529b\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n
\u81ea\u52d5\u691c\u8a3c<\/strong><\/td>\n\u751f\u6210\u3055\u308c\u305f\u56f3\u30b3\u30fc\u30c9\u306f\u8868\u793a\u524d\u306b\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u304c\u884c\u308f\u308c\u3001\u300c\u58ca\u308c\u305f\u56f3\u300d\u306e\u3084\u308a\u53d6\u308a\u3092\u6392\u9664\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n
\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/strong><\/td>\nUML\u3092\u8d85\u3048\u3066\u3001\u305d\u308c\u306f\u300cSWOT<\/a>, PESTLE<\/a>, \u30de\u30c3\u30ad\u30f3\u30bc\u30fc 7S<\/a>, \u30de\u30a4\u30f3\u30c9\u30de\u30c3\u30d7<\/a>\u3001\u304a\u3088\u3073\u300cECharts\u30d9\u30fc\u30b9\u306e\u30c1\u30e3\u30fc\u30c8<\/a>\u3068\u3057\u3066\u69cb\u9020\u5316\u3055\u308c\u305fJSON\u3068\u3057\u3066\u51fa\u529b\u3057\u307e\u3059\u3002\u300d<\/td>\n<\/tr>\n
\u53cd\u5fa9\u7684\u306a\u6d17\u7df4<\/strong><\/td>\n\u30e6\u30fc\u30b6\u30fc\u306f\u300c\u975e\u540c\u671f\u306b\u3059\u308b\u300d\u300c\u30b9\u30a4\u30e0\u30ec\u30fc\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u300d\u306a\u3069\u306e\u6307\u793a\u3092\u51fa\u3057\u3001\u30a2\u30b7\u30b9\u30bf\u30f3\u30c8\u304c\u518d\u751f\u6210\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u751f\u304d\u305f\u5354\u50cd\u578b\u306e\u8a2d\u8a08\u30eb\u30fc\u30d7\u3067\u3059\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

3. \u4ed5\u7d44\u307f \u2014 \u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30ef\u30fc\u30af\u30d5\u30ed\u30fc<\/h2>\n

\"\u81ea\u7136\u8a00\u8a9e\u5165\u529b\u304c<\/p>\n

\u30b3\u30fc\u30c9\u3068\u3057\u3066\u306e\u56f3<\/a>Mermaid\u3092\u4f7f\u7528\u3057\u3066<\/p>\n

\"\u81ea\u7136\u8a00\u8a9e\u30ea\u30af\u30a8\u30b9\u30c8\u304b\u3089<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
flowchart LR\n    A[\u81ea\u7136\u8a00\u8a9e\u306b\u3088\u308b\u30e6\u30fc\u30b6\u30fc\u30ea\u30af\u30a8\u30b9\u30c8] --> B[VP AI \u30c1\u30e3\u30c3\u30c8\u30dc\u30c3\u30c8]\n    B --> C{\u610f\u56f3\u306e\u7406\u89e3}\n    C -->|\u56f3\u306e\u30ea\u30af\u30a8\u30b9\u30c8| D[UML\u56f3\u30b3\u30fc\u30c9\u306e\u751f\u6210]\n    C -->|\u753b\u50cf\/\u6587\u8108| E[\u753b\u50cf\u306e\u5206\u6790\u3068\u8a73\u7d30\u306e\u62bd\u51fa]\n    C -->|\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af| F[\u6226\u7565\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30afJSON\u306e\u69cb\u7bc9]\n    D --> G[Mermaid\/PlantUML\/Graphviz\u30b3\u30fc\u30c9]\n    G --> H[\u69cb\u6587\u306e\u691c\u8a3c]\n    H -->|\u6709\u52b9| I[\u56f3\u306e\u63d0\u793a]\n    H -->|\u7121\u52b9| J[\u4fee\u6b63\u3068\u518d\u691c\u8a3c]\n    J --> H\n    I --> K[\u30e6\u30fc\u30b6\u30fc\u306b\u3088\u308b\u30ec\u30d3\u30e5\u30fc\u3068\u53cd\u5fa9]\n    K --> B<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u56f3\u306e\u4f8b 1 \u2014 \u30b7\u30fc\u30b1\u30f3\u30b9\u56f3<\/a>\uff08\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u5fdc\u3058\u3066\u751f\u6210\uff09<\/h3>\n
\u30e6\u30fc\u30b6\u30fc\u304c\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u30d6\u30e9\u30f3\u30c1\u4ed8\u304d\u306e\u30ed\u30b0\u30a4\u30f3\u30d5\u30ed\u30fc\u3092\u8981\u6c42\u3059\u308b\u5178\u578b\u7684\u306a\u5bfe\u8a71\u4f8b\uff1a<\/p>\n
\"\u30ed\u30b0\u30a4\u30f3\u30d5\u30ed\u30fc\u3068\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u5206\u5c90\u306e\u751f\u6210\u306b\u304a\u3051\u308b\u30e6\u30fc\u30b6\u30fc\u3001VP<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
sequenceDiagram\n    participant U as \u30e6\u30fc\u30b6\u30fc\n    participant AI as VP AI \u30c1\u30e3\u30c3\u30c8\u30dc\u30c3\u30c8\n    participant V as \u691c\u8a3c\u8005\n    \n    U->>AI: \"\u30e6\u30fc\u30b6\u30fc\u30ed\u30b0\u30a4\u30f3\u306eUML\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\u3092\u63cf\u3044\u3066\u304f\u3060\u3055\u3044\"\n    AI->>AI: \u610f\u56f3\u3092\u89e3\u6790\u3057\u3001\u56f3\u306e\u7a2e\u985e\u3092\u9078\u629e\n    AI->>AI: Mermaid\u30b3\u30fc\u30c9\u3092\u751f\u6210\n    AI->>V: \u69cb\u6587\u3092\u691c\u8a3c\n    V-->>AI: \u6709\u52b9\n    AI-->>U: Mermaid\u30b3\u30fc\u30c9\u3068\u8aac\u660e\u3092\u8868\u793a\n    U->>AI: \"\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u30d6\u30e9\u30f3\u30c1\u3092\u8ffd\u52a0\"\n    AI->>AI: \u30d6\u30e9\u30f3\u30c1\u4ed8\u304d\u3067\u518d\u751f\u6210\n    AI-->>U: \u66f4\u65b0\u3055\u308c\u305f\u56f3\n    U->>AI: \"PlantUML\u5f62\u5f0f\u3067\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\"\n    AI->>AI: PlantUML\u306b\u5909\u63db\n    AI-->>U: PlantUML\u30d0\u30fc\u30b8\u30e7\u30f3\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u56f3\u306e\u4f8b 2 \u2014 \u30af\u30e9\u30b9\u56f3<\/a>\uff08\u30c9\u30e1\u30a4\u30f3\u30e2\u30c7\u30ea\u30f3\u30b0\uff09
\n\"\u30e6\u30fc\u30b6\u30fc\u3001\u6ce8\u6587\u3001\u652f\u6255\u3044\u30d7\u30ed\u30bb\u30c3\u30b5\u3001\u304a\u3088\u3073\u5728\u5eab\u30b7\u30b9\u30c6\u30e0\u9593\u306e\u95a2\u4fc2\u3092\u793a\u3059\u30c9\u30e1\u30a4\u30f3\u30e2\u30c7\u30eb\u30af\u30e9\u30b9\u56f3\u3002\"<\/h3>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
classDiagram\n    class User {\n        +String username\n        +String email\n        +login()\n        +logout()\n    }\n    class Order {\n        +int orderId\n        +String status\n        +float total\n        +calculateTotal()\n        +ship()\n    }\n    class PaymentProcessor {\n        +process(payment)\n        +refund(orderId)\n    }\n    class InventorySystem {\n        +checkStock(itemId)\n        +reserveItem(itemId)\n    }\n    User \"1\" --> \"many\" Order : \u4f5c\u6210\n    Order \"1\" --> \"1\" PaymentProcessor : \u4f7f\u7528\n    Order \"1\" --> \"1\" InventorySystem : \u7167\u4f1a\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u56f3\u306e\u4f8b 3 \u2014 \u5f79\u5272\u9593\u306e\u5354\u529b<\/h3>\n
\"\u30d3\u30b8\u30cd\u30b9\u30a2\u30ca\u30ea\u30b9\u30c8\u3001\u958b\u767a\u8005\u3001QA<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
flowchart LR\n    subgraph BA[\u30d3\u30b8\u30cd\u30b9\u30a2\u30ca\u30ea\u30b9\u30c8]\n        A1[\u8981\u4ef6\u3092\u5e73\u6613\u306a\u82f1\u8a9e\u3067\u8a18\u8ff0]\n        A2[\u751f\u6210\u3055\u308c\u305f\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u3068\u30a2\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u3092\u78ba\u8a8d]\n    end\n    subgraph DEV[\u958b\u767a\u8005]\n        B1[\u30af\u30e9\u30b9\u56f3\u3068\u30b7\u30fc\u30b1\u30f3\u30b9\u56f3\u306b\u6d17\u7df4]\n        B2[\u691c\u8a3c\u3057\u3001\u30b3\u30fc\u30c9\u3068\u3057\u3066\u30a8\u30af\u30b9\u30dd\u30fc\u30c8]\n    end\n    subgraph QA[QA]\n        C1[\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u56f3\u3092\u751f\u6210]\n    end\n    A1 --> B1 --> A2 --> C1\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nVPasCode\u3067Mermaid\u3092\u7de8\u96c6<\/span>
\n<\/a>\n<\/div>\n<\/div>\n\n
4. \u5229\u70b9<\/h2>\n