https://anTtutu.github.io/tags/mcp/ Recent content in Mcp on Anttu's Blog Hugo zh-CN Thu, 09 Apr 2026 00:29:47 +0800 https://anTtutu.github.io/post/2026-04-09-drawio-mcp/ Thu, 09 Apr 2026 00:29:47 +0800 https://anTtutu.github.io/post/2026-04-09-drawio-mcp/ <h2 id="前言">前言</h2> <blockquote> <p>分享如何在 Claude Code CLI 中使用 draw.io MCP 服务器创建、编辑和导出流程图</p> </blockquote> <hr> <h2 id="目录">目录</h2> <ol> <li><a href="#%E6%9E%B6%E6%9E%84%E6%A6%82%E8%BF%B0">架构概述</a></li> <li><a href="#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87">环境准备</a></li> <li><a href="#%E9%85%8D%E7%BD%AE%E6%AD%A5%E9%AA%A4">配置步骤</a></li> <li><a href="#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8">基础使用</a></li> <li><a href="#%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7">进阶技巧</a></li> <li><a href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98">常见问题</a></li> </ol> <hr> <h2 id="架构概述">架构概述</h2> <h3 id="两种集成方式对比">两种集成方式对比</h3> <table> <thead> <tr> <th>方式</th> <th>命令</th> <th>适用场景</th> <th>复杂度</th> </tr> </thead> <tbody> <tr> <td><strong>Skill 方式</strong></td> <td><code>/skill install drawio</code></td> <td>快速开始，一键安装</td> <td>⭐ 简单</td> </tr> <tr> <td><strong>MCP 方式</strong></td> <td>编辑 <code>settings.json</code></td> <td>自定义配置，多环境部署</td> <td>⭐⭐ 中等</td> </tr> </tbody> </table> <h3 id="系统架构图">系统架构图</h3> <pre tabindex="0"><code>┌─────────────────┐ ┌──────────────┐ ┌─────────────────┐ │ Claude Code │────▶│ drawio-mcp │────▶│ Draw.io Server │ │ CLI 工具 │ │ MCP服务 │ │ (本地:6002) │ └─────────────────┘ └──────────────┘ └─────────────────┘ │ │ │ 方式1: Skill 命令 │ │ /skill install drawio ▼ │ ┌─────────────────┐ │ │ 浏览器窗口 │ │ │ (实时预览编辑) │ │ └─────────────────┘ │ │ 方式2: MCP 配置 │ settings.json 配置 │ ▼ ┌─────────────────┐ │ MCP Server │ │ (npx 启动) │ └─────────────────┘ </code></pre><p><strong>工作流程</strong>：</p>