1. 为什么我又把 Visio 卸载了Claude Code Next AI Draw.io 的真实场景如果你写过技术方案、接口文档或者故障复盘大概率经历过这种循环脑子里架构已经清楚了打开 Visio 拖了半小时方框和箭头最后图没画完思路先断了。Visio 不是不好而是它太重——启动慢、对齐烦、改一版要重新连线画完还得手动导出。对习惯用命令行和 Markdown 的开发者来说这种“鼠标密集型”操作本身就是效率损耗。我最近把画图这件事整个搬进了 Claude Code通过 MCPModel Context Protocol接入 Next AI Draw.io用自然语言描述结构让模型直接生成 draw.io 图表。Next AI Draw.io 是一个把 AI 能力和 draw.io 无缝结合的网页应用在 GitHub 上已经有 29k star核心能力就是“你说人话它出图”。它支持架构图、时序图、用例图、活动图、思维导图等常见技术图形生成结果可以在浏览器里实时预览也能导出成.drawio文件继续手工微调。这套组合适合谁三类人最明显一是经常写技术文档、需要快速出架构图和流程图的后端/全栈开发者二是做技术分享、需要批量产出示意图的讲师和博主三是团队里负责方案评审、想把“口头描述”直接变成可视化图表的架构师。它不替代 draw.io 的精细编辑能力而是把“从 0 到 1 出草图”这一步压缩到几十秒。下面我把 Claude Code 接入 Next AI Draw.io 的完整配置、TaoToken 统一 Key 的填入位置以及一次可复制的验证动作拆开讲你照着做就能跑通。2. 前置准备TaoToken 统一 Key 与 Claude Code 环境在配置 MCP 之前先把模型调用这条链路理顺。Claude Code 本身是一个 CLI 编码代理它需要访问大模型来完成推理和工具调用。这里我用 TaoToken 作为统一的模型接入层好处是一个 Key 可以覆盖对话、编码、Agent 等多种场景不用在多个平台之间来回切换配置。你需要先拿到一个可用的 API Key。登录 TaoToken 控制台在 API Keys 页面创建一个新 Key复制保存好。这个 Key 后面会填到 Claude Code 的环境变量或配置文件里作为模型请求的凭证。注意 Key 只在创建时完整显示一次丢了就重新生成不要把它硬编码进会提交到 Git 的脚本里。TaoToken 的接入地址是https://taotoken.net/api兼容常见的 Anthropic/OpenAI 风格调用方式。Claude Code 走的是 Anthropic 协议所以我们在配置里把 base URL 指向 TaoToken 的 API 端点再把 Key 填进去即可。如果你还没创建 Key可以先到控制台看一眼当前可用的模型列表确认你要用的模型在列避免配完了发现模型名不对。环境层面Claude Code 需要 Node.js 18 和 npm。Next AI Draw.io 的 MCP Server 是通过npx拉起的所以本机要能正常执行npx命令。另外Next AI Draw.io 的预览窗口默认跑在http://localhost:6002确保这个端口没有被其他服务占用。如果 6002 被占了后面启动时会报端口冲突换端口的方式在排障章节讲。3. 可复制配置settings.json 与 config.toml 骨架Claude Code 的配置分两块一块是模型接入Key 和 base URL一块是 MCP Server 注册。不同版本的 Claude Code 配置文件名略有差异常见的是settings.json和config.toml。下面给出两份骨架你按自己实际使用的文件填。先看settings.json重点是env里的模型接入信息{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoTokenKey, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, mcpServers: { drawio: { command: npx, args: [-y, next-ai-drawio/mcp-serverlatest] } } }这里ANTHROPIC_BASE_URL指向 TaoToken 的 API 地址ANTHROPIC_API_KEY填你刚才创建的 KeyANTHROPIC_MODEL填你要用的模型名。mcpServers里注册了一个名为drawio的 MCP Server命令是npx -y next-ai-drawio/mcp-serverlatest-y表示自动确认安装避免每次启动都卡在交互确认上。如果你用的是config.toml风格骨架如下[env] ANTHROPIC_BASE_URL https://taotoken.net/api ANTHROPIC_API_KEY sk-你的TaoTokenKey ANTHROPIC_MODEL claude-sonnet-4-20250514 [mcp_servers.drawio] command npx args [-y, next-ai-drawio/mcp-serverlatest]两份配置的核心信息一致模型走 TaoTokenMCP 走 Next AI Draw.io。填完后保存重启 Claude Code 让配置生效。你也可以用claude mcp add命令直接注册效果等价claude mcp add drawio -- npx -y next-ai-drawio/mcp-serverlatest这条命令会把drawio这个 MCP Server 写进 Claude Code 的配置里。如果你更习惯可视化操作也可以用支持 MCP 管理的图形化工具来配置字段和上面 JSON 里的一致。配置完成后在 Claude Code 里输入/mcp命令应该能看到drawio处于已连接状态并列出它提供的工具。4. 验证请求从自然语言到 draw.io 图表的完整动作配置对不对跑一次就知道。下面用一个具体例子走完整流程让 Claude Code 通过 draw.io MCP 画一张电商系统的架构图。打开 Claude Code输入提示词用 draw.io mcp 画一张电商项目的系统架构图包含网关、用户服务、商品服务、订单服务、支付服务和 MySQL 数据库Claude Code 会识别到你要调用drawio这个 MCP Server然后依次调用它的工具。Next AI Draw.io 的 MCP 提供了一组工具常见的有工具名作用start_session启动新的 draw.io 会话并打开预览窗口create_new_diagram从 XML 创建新图表需要 xml 参数edit_diagram通过 ID 编辑图表更新/添加/删除单元格get_diagram获取当前图表的 XML 内容export_diagram将图表保存为 .drawio 文件执行时Claude Code 先调用start_session打开预览窗口默认地址是http://localhost:6002。然后它根据你的描述生成 draw.io 的 XML 结构调用create_new_diagram把图渲染出来。你切到浏览器就能看到架构图已经画好了。整个过程不需要你手动拖任何方框。如果第一次没出图先看 Claude Code 的终端输出确认 MCP 工具是否被正确调用。常见情况是模型没有识别到 MCP这时可以显式在提示词里带上工具名比如“调用 drawio 的 create_new_diagram 工具”。出图后你可以继续用自然语言让它改把订单服务和支付服务之间的连线改成虚线并加一个消息队列节点Claude Code 会调用edit_diagram按 ID 修改对应单元格。确认无误后让它导出把这张图导出成 drawio 文件它会调用export_diagram保存文件你拿到.drawio后可以用 draw.io 桌面版或网页版继续精修。实测下来从输入提示词到看到图通常在半分钟以内比在 Visio 里从空白画布开始快得多。同样的流程可以复用到其他图形。比如画时序图用 draw.io mcp 画一张用户登录过程的时序图包含浏览器、网关、用户服务和 Redis画活动图根据订单确认流程用 draw.io mcp 画一张活动图包含库存校验、优惠券核销、生成订单三个步骤画思维导图制定一条后端学习路线用 draw.io mcp 画一张思维导图每种图形都走同一套 MCP 工具链区别只在提示词描述的结构。5. 本篇常见错排查MCP 连不上、端口冲突、Key 无效配置过程中最容易卡在几个点上我按出现频率排一下。MCP 显示未连接。在 Claude Code 里输入/mcp看不到drawio或者状态是 failed。先确认npx能正常执行在终端跑npx -y next-ai-drawio/mcp-serverlatest --help如果能输出帮助信息说明包能拉下来。如果卡住或报网络错误检查 npm 源是否可用。另一个原因是配置文件路径不对Claude Code 可能读的是项目级配置而不是全局配置确认你改的文件和它实际加载的是同一个。预览窗口打不开提示 6002 端口被占用。Next AI Draw.io 默认用 6002如果这个端口被别的服务占了start_session会失败。先查占用lsof -i :6002macOS/Linux或netstat -ano | findstr 6002Windows找到进程后要么停掉它要么给 MCP Server 换端口。换端口的方式是在 MCP 配置的args里加环境变量具体参数看 MCP Server 的文档说明。模型请求报 401 或 Key 无效。这说明 TaoToken 的 Key 没填对或者 base URL 写错了。检查ANTHROPIC_BASE_URL是不是https://taotoken.net/api注意不要多加路径后缀。Key 要完整复制前后不要有空格。如果 Key 是在环境变量里设置的确认 Claude Code 启动时能读到这个变量——有时候你在 shell 里 export 了但 Claude Code 是从另一个终端会话启动的读不到。出图了但内容不对节点缺失或连线混乱。这通常是提示词太笼统。模型生成 XML 时依赖你对结构的描述描述越具体图越准。比如“画一张架构图”就不如“画一张包含网关、用户服务、商品服务、订单服务、支付服务、MySQL 的架构图网关在最上层数据库在最下层”来得明确。如果图已经生成不用重画直接用edit_diagram让它改比重新生成省时间。导出文件后打不开。确认导出的是.drawio格式而不是被截断的 XML。如果文件很小或者内容不完整可能是export_diagram调用时参数没传对。重新让它导出一次并确认保存路径有写权限。6. 把画图接进日常TaoToken 与 Claude Code 的配合建议跑通之后这套组合的价值在于“随手画”。写文档时想到一个结构直接在 Claude Code 里描述一句图就出来了不用切窗口、不用等 Visio 启动。TaoToken 在这里的角色是统一入口一个 Key 同时支撑 Claude Code 的模型调用和后续可能接入的其他 AI 工具省去多平台配置的麻烦。如果你主要用 Claude Code 做长期编码和 Agent 任务可以关注 TaoToken 的 Coding Plan它针对这类高频调用场景做了额度规划。日常验证模型效果、试提示词用模型对话页面就够了。配置过程中遇到 Key 或接入问题直接查接入文档里面有针对 Claude Code 的说明。需要管理多个 Key 或查看用量在控制台和 API Keys 页面操作。最后给一个实用习惯把常用的画图提示词存成片段比如“画架构图”“画时序图”“画活动图”各一条模板用的时候改几个词就行。Next AI Draw.io 的 MCP 工具链是稳定的真正影响出图质量的是你的描述精度。多画几次你会发现自己越来越懒得打开 Visio 了。