1. 为什么要在 Claude Code 里接 draw.io MCP如果你平时写技术博客、做方案评审、给团队画架构图大概率经历过这个循环打开 draw.io拖一个矩形对齐调颜色拉箭头发现布局歪了再重来。一张稍微像样的流程图半小时就没了。而真正值钱的部分——这张图要表达什么逻辑——反而被挤到最后。Claude Code 的 MCPModel Context Protocol机制正好能治这个病。draw.io MCP 是一个 MCP 服务器它把 draw.io 的绘图能力暴露成工具Claude Code 可以直接调用。你用自然语言描述图的结构Claude 生成 mxGraph XML 或 Mermaid 语法推送到本地 draw.io 渲染成可编辑的矢量图。整个过程你不需要打开 draw.io 的编辑器也不需要拖任何形状。但这里有个现实问题一旦你开始接多个 MCP 工具draw.io、文件系统、数据库查询、搜索……每个工具都要配自己的 API Key 或环境变量配置就散了。Claude Code 的 settings.json、MCP 的 config.toml、各个工具的 env 字段Key 到处复制改一个要翻三个文件。这篇要解决的就是这个用 TaoToken 的统一 Key 和 API 通道把 Claude Code 和 draw.io MCP 的配置收敛到一处然后跑通一句话出图的完整链路。适合谁看已经在用 Claude Code、想接 draw.io MCP 但被多工具 Key 配置劝退的人或者还没接 MCP、想找一个能跟做的配置骨架的人。下面从环境准备开始每一步都给可复制的配置和验证方法。2. TaoToken 前置统一 Key 与 API 通道TaoToken 在这里扮演的角色是统一入口。你不需要为每个 MCP 工具单独申请 Key而是用同一个 TaoToken Key 走同一个 API 通道Claude Code 和它调用的模型请求都从这里过。这样 settings.json 里只维护一份凭证config.toml 里也只引用同一个环境变量。先拿到 Key。访问控制台创建 API Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite创建后复制那串 Key形如sk-xxxxxxxx。接下来两个地方会用到它Claude Code 的模型请求配置以及 draw.io MCP 启动时的环境变量。建议把它写进系统环境变量而不是硬编码在配置文件里# macOS / Linux写入 ~/.zshrc 或 ~/.bashrc export TAOTOKEN_API_KEYsk-你的Key # Windows PowerShell写入用户环境变量 [System.Environment]::SetEnvironmentVariable(TAOTOKEN_API_KEY,sk-你的Key,User)设置完重开终端用echo $TAOTOKEN_API_KEYWindows 用echo $env:TAOTOKEN_API_KEY确认能打印出来。这一步别跳过后面 config.toml 里会用${TAOTOKEN_API_KEY}引用它如果环境变量没生效MCP 启动时会直接报鉴权失败。API 通道的基础地址是https://taotoken.net/api注意这个地址不带任何查询参数配置里直接填这个即可。模型对话、Coding Plan、API Keys 管理都在同一套体系下你可以在模型对话页先验证 Key 是否可用https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite如果只是想先确认 Key 能通在模型对话页发一句你好看有没有返回比直接配 Claude Code 再排障要快得多。3. 可复制配置settings.json 与 config.toml 骨架这一节是全文的核心。Claude Code 的配置分两层一层是 Claude Code 自身的模型接入settings.json一层是 MCP 服务器的注册config.toml 或 .mcp.json。我们把 TaoToken 的 Key 统一从环境变量注入两层都引用同一个变量。先看 Claude Code 的 settings.json。路径通常在~/.claude/settings.json全局或项目下的.claude/settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: ${TAOTOKEN_API_KEY} }, mcpServers: { drawio: { type: stdio, command: npx, args: [-y, drawio/mcp], env: { TAOTOKEN_API_KEY: ${TAOTOKEN_API_KEY} } } } }这里有两个关键点。第一ANTHROPIC_BASE_URL指向 TaoToken 的 API 通道Claude Code 的模型请求走这里。第二draw.io MCP 的env里也注入了同一个TAOTOKEN_API_KEY虽然 draw.io MCP 本身是本地渲染、不直接调模型但保持 Key 来源一致后续你接其他需要鉴权的 MCP 工具时直接复制这个 env 块就行不用再去找 Key。如果你更习惯用 TOML 管理 MCPconfig.toml 的等价写法如下[mcp_servers.drawio] type stdio command npx args [-y, drawio/mcp] [mcp_servers.drawio.env] TAOTOKEN_API_KEY ${TAOTOKEN_API_KEY} [api] base_url https://taotoken.net/api api_key ${TAOTOKEN_API_KEY}两种格式选一种即可不要同时维护否则改了一处忘了另一处排查起来很痛苦。我试过在项目里同时留了 .mcp.json 和 config.toml结果 Claude Code 读的是前者我改的是后者折腾了十几分钟才发现。配置写完后重启 Claude Code。在对话里输入/mcp如果看到drawio出现在 MCP 服务器列表里并且状态是 connected说明注册成功。如果显示 failed先看下一节的排障。4. 验证请求一句话出图的完整动作配置通了之后验证方式很直接在 Claude Code 里用自然语言描述一张图看 draw.io 是否弹出渲染结果。先确认工具列表。输入/mcp后展开 drawio应该能看到它暴露的工具核心是这几个工具作用open_drawio_xml用 mxGraph XML 精确控制节点、布局、样式open_drawio_mermaid用 Mermaid 语法快速出图open_drawio_csv从 CSV 数据生成组织架构类图表search_shapes搜索 draw.io 内置的约一万个行业图标日常 90% 的场景用open_drawio_xml因为它给你像素级控制画出来的图能直接发博客、贴 PPT。快速草图用open_drawio_mermaid更省事。现在发一句提示词比如画一张 RAG 在线推理链路图帮我画一张 RAG 在线推理链路图包含查询改写、多路召回、重排序、LLM 生成四个阶段。 有两个短路出口歧义检测→反问澄清、召回为空→兜底回复。底部加图例。Claude Code 会调用 drawio 的open_drawio_xml生成对应的 mxGraph XML然后推送到你本地的 draw.io。浏览器或桌面版 draw.io 会弹出一张可编辑的矢量图。整个过程不需要你手动打开 draw.io也不需要拖任何形状。验证成功的标志有三个一是 Claude Code 的对话里能看到它调用了 drawio 工具并返回了成功状态二是 draw.io 窗口弹出并渲染出图三是图里的节点文字和你描述的一致短路出口的箭头方向正确。如果图出来了但布局乱直接在对话里补一句把重排序和 LLM 生成放到同一行箭头改成水平它会重新生成 XML 并刷新。想验证模型侧是否也走通了 TaoToken可以在 Claude Code 里问一个需要模型推理的问题比如解释一下这张图里重排序的作用看它能否基于当前上下文正常回答。如果模型请求失败但 draw.io 渲染正常说明是 settings.json 里的ANTHROPIC_BASE_URL或 Key 有问题跟 MCP 无关。5. 本篇常见错排查配置和验证过程中最容易卡在几个地方。下面按现象列出来对照排查。现象一/mcp里看不到 drawio或状态是 failed。先确认npx能正常执行。在终端跑npx -y drawio/mcp --help如果这一步就报错说明 Node.js 环境有问题检查 Node 版本建议 18 以上。如果终端能跑但 Claude Code 里不行多半是 settings.json 的 JSON 格式错了比如多了个逗号、引号没闭合。用cat ~/.claude/settings.json | python -m json.tool验证一下格式。现象二draw.io 没弹出但 Claude Code 说调用成功了。draw.io MCP 需要本地有 draw.io 的接收端。如果你用的是浏览器版确认浏览器没拦截弹窗如果用桌面版确认 draw.io 已经安装并且能正常打开。另外某些系统上npx首次拉包会慢第一次调用可能要等十几秒别急着判定失败。现象三报鉴权失败或 401。九成是环境变量没生效。在 Claude Code 启动的终端里执行echo $TAOTOKEN_API_KEY如果为空说明你设置环境变量的终端和启动 Claude Code 的终端不是同一个或者设置后没重开终端。Windows 上尤其注意用户级环境变量设置后需要新开 PowerShell 窗口才生效。现象四图渲染出来了但中文变成方块或乱码。这是 draw.io 的字体问题不是 MCP 的问题。在 draw.io 里把字体改成系统支持的中文字体比如微软雅黑、PingFang SC或者在提示词里指定使用支持中文的字体。现象五改了 config.toml 但没生效。Claude Code 优先读 settings.json 里的 mcpServers如果你两个文件都写了以 settings.json 为准。建议只保留一处配置。另外改完配置必须重启 Claude Code热重载不一定可靠。如果排障过程中需要重新生成 Key 或查看调用记录去 API Keys 管理页https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入细节和参数说明在接入文档里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite6. 把这条链路用顺后续怎么扩展跑通 draw.io MCP 之后你会发现真正的价值不在画一张图而在于把描述→出图→改图变成一个可以反复用的动作。写博客时先让 Claude Code 根据文章大纲生成一张架构图做方案评审时把需求描述丢进去几秒钟出一张流程图不满意就补一句让它改。关注点从怎么画转移到画什么这才是这套工具链该有的体验。如果你后面要接更多 MCP 工具比如文件系统、搜索、数据库查询配置思路是一样的在 settings.json 的 mcpServers 里加一个条目env 里引用同一个TAOTOKEN_API_KEY。Key 只维护一份新增工具只是多一个配置块。长期做编码和 Agent 任务的话可以了解一下 Coding Plan它把模型调用和工具链的额度统一管理省得每个工具单独算账https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite如果你主要用 Claude Code 做开发ClaudeCodeAnthropic 这条通道的配置和本文的 settings.json 是同一套逻辑可以直接复用https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-code-anthropicutm_campaignrewrite最后给一个实用技巧把常用的图类型架构图、时序图、流程图、组织架构图各写一段提示词模板存起来用的时候改几个关键词就行。draw.io MCP 的open_drawio_xml对结构化描述响应最好提示词里把阶段、分支、出口、图例这些结构词说清楚出来的图基本不用大改。
