{"id":11226,"date":"2026-08-03T14:46:11","date_gmt":"2026-08-03T06:46:11","guid":{"rendered":"https:\/\/www.cybermedian.com\/tw\/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\/tw\/diagram-as-code-case-study-with-mermaid-and-visual-paradigm-ai-chatbot\/","title":{"rendered":"\ud83d\udcd8\u4f7f\u7528 Mermaid \u7684\u5716\u5f62\u5373\u7a0b\u5f0f\u78bc\u6848\u4f8b\u7814\u7a76\uff1a\u900f\u904e Visual Paradigm AI \u804a\u5929\u6a5f\u5668\u4eba\u52a0\u901f UML \u5efa\u6a21"},"content":{"rendered":"

1. \u7c21\u4ecb\u8207\u554f\u984c\u9673\u8ff0<\/h2>\n

\u50b3\u7d71UML \u5efa\u6a21<\/a>\u529f\u80fd\u5f37\u5927\u4f46\u901f\u5ea6\u7de9\u6162\u3002\u8a2d\u8a08\u5e2b\u82b1\u8cbb\u6578\u5c0f\u6642\u8207\u8a9e\u6cd5\u640f\u9b25\u3001\u8a18\u61b6\u5716\u5f62\u7279\u5b9a\u7684\u6a19\u8a18\u6cd5\uff0c\u4e26\u624b\u52d5\u5c07\u53e3\u982d\u6982\u5ff5\u8f49\u63db\u70ba\u7cbe\u78ba\u4e14\u7121\u8aa4\u7684\u6a21\u578b\u3002\u5728\u5feb\u901f\u8b8a\u52d5\u7684\u8edf\u9ad4\u5718\u968a\u4e2d\uff0c\u9019\u7a2e\u6469\u64e6\u6703\u5ef6\u9072\u8a2d\u8a08\u5be9\u67e5\uff0c\u4e26\u6253\u64ca\u975e\u5de5\u7a0b\u5e2b\u53c3\u8207\u7684\u610f\u9858\u3002<\/p>\n

\"Visual<\/p>\n

Visual Paradigm AI \u804a\u5929\u6a5f\u5668\u4ebaVisual Paradigm AI \u804a\u5929\u6a5f\u5668\u4eba<\/a><\/strong>\u89e3\u6c7a\u4e86\u9019\u500b\u554f\u984c\uff0c\u8b93\u60a8\u80fd\u7528\u81ea\u7136\u8a9e\u8a00\u63cf\u8ff0\u7cfb\u7d71\uff0c\u4e26\u7acb\u5373\u7372\u5f97\u751f\u7522\u7d1a\u5225\u7684\u5716\u5f62\u7a0b\u5f0f\u78bc<\/a>\u2014\u2014\u63a1\u7528Mermaid\u3001PlantUML \u6216 Graphviz<\/strong>\u2014\u2014\u5728\u50b3\u9001\u7d66\u60a8\u4e4b\u524d\u5df2\u9a57\u8b49\u5176\u6b63\u78ba\u6027\u3002<\/p>\n\n

2. \u6838\u5fc3\u6982\u5ff5<\/h2>\n\n\n\n\n\n\n\n\n\n\n
\u6982\u5ff5<\/th>\n\u542b\u7fa9<\/th>\n<\/tr>\n<\/thead>\n
\u81ea\u7136\u8a9e\u8a00 \u2192 \u5716\u5f62<\/strong><\/td>\n\u63cf\u8ff0\u60a8\u7684\u7cfb\u7d71\uff08\u4f8b\u5982\u300c\u5e36\u6709\u8d85\u6642\u5206\u652f\u7684\u767b\u5165\u6d41\u7a0b\u300d\uff09\uff0c\u52a9\u624b\u5c07\u81ea\u52d5\u751f\u6210\u5716\u5f62\u7a0b\u5f0f\u78bc\u3002<\/td>\n<\/tr>\n
\u591a\u683c\u5f0f\u652f\u63f4<\/strong><\/td>\n\u55ae\u4e00\u63cf\u8ff0\u53ef\u6e32\u67d3\u70ba Mermaid\uff08\u5feb\u901f\u6587\u5b57\u5716\u5f62\uff09\u3001PlantUML\uff08\u5b8c\u6574\u7684UML<\/a>\/SysML<\/a>\/C4<\/a>\uff09\u6216 Graphviz\uff08\u7db2\u8def\/\u72c0\u614b\u5716\u5f62\uff09\u3002<\/td>\n<\/tr>\n
\u5f71\u50cf\u5206\u6790<\/strong><\/td>\n\u8cbc\u4e0a\u87a2\u5e55\u622a\u5716\u6216\u8349\u5716\uff08\u5373\u4f7f\u662f\u624b\u7e6a\u767d\u677f\u7167\u7247\uff09\u2014\u2014\u52a9\u624b\u6703\u8b80\u53d6\u5176\u5167\u5bb9\uff0c\u4e26\u5c07\u6587\u5b57\u8207\u7d50\u69cb\u91cd\u9ede\u8f49\u63db\u70ba\u5efa\u6a21\u8f38\u5165\u3002<\/td>\n<\/tr>\n
\u81ea\u52d5\u9a57\u8b49<\/strong><\/td>\n\u751f\u6210\u7684\u5716\u5f62\u7a0b\u5f0f\u78bc\u5728\u986f\u793a\u524d\u6703\u9032\u884c\u8a9e\u6cd5\u6aa2\u67e5\uff0c\u6d88\u9664\u300c\u5716\u5f62\u640d\u58de\u300d\u7684\u5f80\u8fd4\u4fee\u6b63\u3002<\/td>\n<\/tr>\n
\u8cc7\u8a0a\u5716\u8868\u6846\u67b6<\/strong><\/td>\n\u9664\u4e86 UML\uff0c\u5b83\u9084\u80fd\u7522\u751f\u300cSWOT<\/a>, PESTLE<\/a>, \u9ea5\u80af\u932b 7S \u6a21\u578b<\/a>, \u5fc3\u667a\u5716<\/a>\u3001\u4ee5\u53ca\u300c\u57fa\u65bc ECharts \u7684\u5716\u8868<\/a>\u300d\u4f5c\u70ba\u7d50\u69cb\u5316 JSON\u3002<\/td>\n<\/tr>\n
\u8fed\u4ee3\u5f0f\u7cbe\u9032<\/strong><\/td>\n\u60a8\u63d0\u51fa\u5f8c\u7e8c\u8981\u6c42\uff08\u4f8b\u5982\u300c\u6539\u70ba\u975e\u540c\u6b65\u300d\u3001\u300c\u52a0\u5165\u6cf3\u9053\u300d\uff09\uff0c\u52a9\u624b\u96a8\u5373\u91cd\u65b0\u751f\u6210\u2014\u2014\u5f62\u6210\u4e00\u500b\u52d5\u614b\u3001\u5354\u4f5c\u7684\u8a2d\u8a08\u5faa\u74b0\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

3. \u904b\u4f5c\u65b9\u5f0f\u2014\u2014\u7aef\u5230\u7aef\u5de5\u4f5c\u6d41\u7a0b<\/h2>\n

\"VP<\/p>\n

\u5716\u8868\u5373\u7a0b\u5f0f\u78bc<\/a>\u4f7f\u7528 Mermaid<\/p>\n

\"\u5de5\u4f5c\u6d41\u7a0b\u5716\uff0c\u986f\u793a<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
flowchart LR\n    A[\u4f7f\u7528\u8005\u4ee5\u81ea\u7136\u8a9e\u8a00\u63d0\u51fa\u8acb\u6c42] --> B[VP AI \u804a\u5929\u6a5f\u5668\u4eba]\n    B --> C{\u7406\u89e3\u610f\u5716}\n    C -->|\u5716\u8868\u8acb\u6c42| D[\u751f\u6210 UML \u5716\u8868\u7a0b\u5f0f\u78bc]\n    C -->|\u5716\u7247\/\u60c5\u5883| E[\u5206\u6790\u5716\u7247\u4e26\u63d0\u53d6\u7d30\u7bc0]\n    C -->|\u6846\u67b6| F[\u5efa\u7acb\u7b56\u7565\u6846\u67b6 JSON]\n    D --> G[Mermaid\/PlantUML\/Graphviz \u7a0b\u5f0f\u78bc]\n    G --> H[\u9a57\u8b49\u8a9e\u6cd5]\n    H -->|\u6709\u6548| I[\u5448\u73fe\u5716\u8868]\n    H -->|\u7121\u6548| J[\u4fee\u6b63\u4e26\u91cd\u65b0\u9a57\u8b49]\n    J --> H\n    I --> K[\u4f7f\u7528\u8005\u6aa2\u8996\u4e26\u8fed\u4ee3]\n    K --> B\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u5716\u8868\u793a\u7bc4\u4f8b 1 \u2014\u300c\u5e8f\u5217\u5716\u300d<\/a>\uff08\u4f9d\u8acb\u6c42\u751f\u6210\uff09<\/h3>\n
\u4e00\u500b\u5178\u578b\u4e92\u52d5\u60c5\u5883\uff1a\u4f7f\u7528\u8005\u8acb\u6c42\u5305\u542b\u8d85\u6642\u5206\u652f\u7684\u767b\u5165\u6d41\u7a0b\uff1a<\/p>\n
\"UML<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
sequenceDiagram\r\n    participant U as \u4f7f\u7528\u8005\r\n    participant AI as VP AI \u804a\u5929\u6a5f\u5668\u4eba\r\n    participant V as \u9a57\u8b49\u5668\r\n    \r\n    U->>AI: \"\u70ba\u4f7f\u7528\u8005\u767b\u5165\u7e6a\u88fd UML \u5e8f\u5217\u5716\"\r\n    AI->>AI: \u89e3\u6790\u610f\u5716\u4e26\u9078\u64c7\u5716\u8868\u985e\u578b\r\n    AI->>AI: \u7522\u751f Mermaid \u7a0b\u5f0f\u78bc\r\n    AI->>V: \u9a57\u8b49\u8a9e\u6cd5\r\n    V-->>AI: \u6709\u6548\r\n    AI-->>U: \u5448\u73fe Mermaid \u7a0b\u5f0f\u78bc\u8207\u8aaa\u660e\r\n    U->>AI: \"\u65b0\u589e\u903e\u6642\u5099\u7528\u5206\u652f\"\r\n    AI->>AI: \u91cd\u65b0\u7522\u751f\u542b\u5206\u652f\u7684\u5716\u8868\r\n    AI-->>U: \u66f4\u65b0\u5f8c\u7684\u5716\u8868\r\n    U->>AI: \"\u532f\u51fa\u70ba PlantUML \u683c\u5f0f\"\r\n    AI->>AI: \u8f49\u78bc\u70ba PlantUML\r\n    AI-->>U: PlantUML \u7248\u672c\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u7bc4\u4f8b\u5716\u8868 2 \u2014 \u985e\u5225\u5716<\/a>\uff08\u9818\u57df\u5efa\u6a21\uff09
\n\"\u9818\u57df\u6a21\u578b\u985e\u5225\u5716\uff0c\u986f\u793a\u4f7f\u7528\u8005\u3001\u8a02\u55ae\u3001\u4ed8\u6b3e\u8655\u7406\u5668\u548c\u5eab\u5b58\u7cfb\u7d71\u4e4b\u9593\u7684\u95dc\u4fc2\u3002\"<\/h3>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
classDiagram\r\n    class User {\r\n        +String username\r\n        +String email\r\n        +login()\r\n        +logout()\r\n    }\r\n    class Order {\r\n        +int orderId\r\n        +String status\r\n        +float total\r\n        +calculateTotal()\r\n        +ship()\r\n    }\r\n    class PaymentProcessor {\r\n        +process(payment)\r\n        +refund(orderId)\r\n    }\r\n    class InventorySystem {\r\n        +checkStock(itemId)\r\n        +reserveItem(itemId)\r\n    }\r\n    User \"1\" --> \"many\" Order : \u4e0b\u55ae\r\n    Order \"1\" --> \"1\" PaymentProcessor : \u4f7f\u7528\r\n    Order \"1\" --> \"1\" InventorySystem : \u67e5\u8a62\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u7bc4\u4f8b\u5716\u8868 3 \u2014 \u8de8\u89d2\u8272\u5354\u4f5c<\/h3>\n
\"Mermaid<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
flowchart LR\r\n    subgraph BA[\u696d\u52d9\u5206\u6790\u5e2b]\r\n        A1[\u4ee5\u7d14\u82f1\u6587\u63cf\u8ff0\u9700\u6c42]\r\n        A2[\u6aa2\u8996\u7522\u751f\u7684\u4f7f\u7528\u6848\u4f8b\u8207\u6d3b\u52d5\u5716]\r\n    end\r\n    subgraph DEV[\u958b\u767c\u4eba\u54e1]\r\n        B1[\u7cbe\u7149\u70ba\u985e\u5225\u5716\u8207\u5e8f\u5217\u5716]\r\n        B2[\u9a57\u8b49\u4e26\u532f\u51fa\u70ba\u7a0b\u5f0f\u78bc]\r\n    end\r\n    subgraph QA[\u54c1\u8cea\u4fdd\u8b49]\r\n        C1[\u7522\u751f\u6e2c\u8a66\u6848\u4f8b\u5716]\r\n    end\r\n    A1 --> B1 --> A2 --> C1\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Mermaid<\/span>
\n<\/a>\n<\/div>\n<\/div>\n\n
4. \u6548\u76ca<\/h2>\n