1. 为什么我要把 Draw.io 和 Claude Code 接在一起Draw.io 官方发布 drawio-mcp 之后画流程图这件事的交互方式变了。以前是打开网页或桌面端从左侧图形库里拖方块、拉连线、调对齐一张三层架构图能耗掉半小时现在是直接在 Claude Code 里说一句「画一个用户登录流程图包含校验、限流、落库三个分支」它调用 drawio-mcp 的工具把.drawio文件生成出来。drawio-mcp 本质是一个 MCP Server把 Draw.io 的编辑能力包装成一组 ToolAI 编程助手通过 MCP 协议调用这些 Tool 来创建文件、添加节点、连线、设置样式、导出格式。但真正动手接的时候问题不在 drawio-mcp 本身而在 Key 的分散。Claude Code 要调模型drawio-mcp 作为本地 MCP Server 又要被 Claude Code 拉起如果你同时还在用别的 AI 工具每个工具一套 Key、一套 Base URL、一套额度配置散落在settings.json、环境变量、各工具的私有配置里。我这次的做法是模型侧统一走 TaoToken 的 API 通道drawio-mcp 只负责画图Claude Code 的settings.json里把模型入口收敛到一处。这样换模型、查用量、加新工具都只改一个地方。这篇适合三类人已经在用 Claude Code 想加绘图能力的、被多个 AI 工具 Key 管理搞烦的、想跑通 drawio-mcp 但卡在配置上的。下面从环境准备到可复制配置到验证请求一步步来。2. TaoToken 前置把模型入口先收敛掉TaoToken 在这里的角色是统一的 API 通道。你不需要在 Claude Code 里分别填某家模型的地址和 Key而是把 Base URL 指向 TaoToken 的 API 端点用一把 Key 走通模型调用。drawio-mcp 不直接碰模型它只被 Claude Code 调用所以整条链路是Claude Code → TaoToken API → 模型 → 返回工具调用指令 → Claude Code 执行 drawio-mcp 的 Tool → 生成.drawio文件。先拿 Key。打开控制台进 API Keys 页面创建一个新 Key复制出来。地址是https://taotoken.net/api注意这个是不带查询参数的 API 端点配置里填的就是它。控制台入口在 deep link 里https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite。这里有个容易踩的点Base URL 到底填https://taotoken.net/api还是带/v1。Claude Code 走的是 Anthropic 兼容协议配置项是ANTHROPIC_BASE_URL填https://taotoken.net/api即可不要自己拼/v1/messages客户端会处理路径。Key 填在ANTHROPIC_AUTH_TOKEN里。如果你之前配过别的中转先把旧的ANTHROPIC_BASE_URL清掉否则会串。注意Key 只创建一次就够不要每个工具建一把。统一 Key 的意义就在于后面加 drawio-mcp、加别的 MCP Server 时模型侧完全不用动。3. 可复制配置Claude Code 的 settings.json 骨架Claude Code 的配置分两层一层是模型接入环境变量或settings.json的env段一层是 MCP Server 注册mcpServers段。drawio-mcp 通过npx拉起所以本机要有 Node.js 环境建议 18 以上。先看settings.json的完整骨架。文件位置通常在~/.claude/settings.json用户级或项目根目录.claude/settings.json项目级。项目级优先级更高团队协作时把 drawio-mcp 写进项目级配置别人 clone 下来就能用。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, mcpServers: { drawio-mcp: { command: npx, args: [-y, drawio-mcp], env: {} } } }逐段说明。env段里三个变量ANTHROPIC_BASE_URL指向 TaoToken APIANTHROPIC_AUTH_TOKEN放你的 KeyANTHROPIC_MODEL指定默认模型。模型名按你实际可用的填不确定就先不写这一行让 Claude Code 用默认。mcpServers段注册 drawio-mcpcommand是npxargs里-y表示自动确认安装drawio-mcp是包名。env留空对象即可drawio-mcp 本身不需要额外密钥。如果你不想改settings.json也可以用命令行注册 MCP效果一样claude mcp add drawio-mcp -- npx -y drawio-mcp这条命令会把 drawio-mcp 写进 Claude Code 的 MCP 配置。注册完用claude mcp list检查能看到drawio-mcp在列表里就说明挂上了。模型侧的环境变量如果不想写进settings.json也可以在 shell 里 exportexport ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENsk-你的TaoToken密钥两种方式选一种别同时配否则排查时不知道哪层生效。我习惯把模型接入放 shell 环境变量换机器方便把 drawio-mcp 放项目级settings.json跟着仓库走。配置项对照表方便你核对配置项填什么作用ANTHROPIC_BASE_URLhttps://taotoken.net/api模型请求入口ANTHROPIC_AUTH_TOKENTaoToken 控制台创建的 Key鉴权ANTHROPIC_MODEL你实际可用的模型名默认模型mcpServers.drawio-mcp.commandnpx拉起方式mcpServers.drawio-mcp.args[-y,drawio-mcp]包名与自动确认4. 验证请求从一句话到一张流程图配置写完先验证模型通道通不通再验证 drawio-mcp 能不能被调用。分两步走出问题好定位。第一步验证模型通道。在终端直接跑一句最简单的请求确认 TaoToken 的 Key 和 Base URL 生效curl https://taotoken.net/api/v1/messages \ -H x-api-key: sk-你的TaoToken密钥 \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d { model: claude-sonnet-4-20250514, max_tokens: 64, messages: [{role: user, content: 回复 OK 两个字母}] }返回里能看到content字段带文本就说明通道没问题。如果返回 401检查 Key返回 404检查 Base URL 有没有多拼路径。第二步验证 drawio-mcp。进入 Claude Code 交互模式先确认 MCP 已加载claude # 进入后输入 /mcp/mcp会列出当前挂载的 MCP Server 和它们的 Tool。看到drawio-mcp以及它暴露的工具创建文件、添加节点、连线、导出等就对了。然后直接下指令帮我画一个用户登录流程图包含开始 → 输入账号密码 → 校验格式 → 调用鉴权服务 → 判断是否通过 → 通过则生成 Token 并落库不通过则返回错误 → 结束。输出为 login-flow.drawioClaude Code 会先规划节点和连线然后依次调用 drawio-mcp 的工具创建文件、加节点、连线、设样式、保存。跑完后当前目录会出现login-flow.drawio。用 Draw.io 桌面版或 VS Code 的 Draw.io 插件打开能看到完整流程图。想导出 PNG 就再补一句把 login-flow.drawio 导出为 login-flow.png 和 login-flow.svgdrawio-mcp 支持.drawio、.png、.jpg、.svg、.pdf、.html几种导出格式。.drawio是原生格式后续还能继续编辑.svg适合贴技术博客.html是可交互版本。推荐流程是AI 生成.drawio初版 → 在 Draw.io 里微调布局 → 导出目标格式。AI 负责从零到一人负责精修。实测下来简单流程图一次生成基本可用节点位置偶尔需要手动挪一下。复杂的三层架构图AI 会把节点和连线都建出来但布局可能挤在一起打开 Draw.io 用「布局 → 自动排列」一键整理比全手工快很多。5. 本篇常见错排查配置和验证过程中几个高频报错集中在这里。MCP Server 没出现在/mcp列表里。先确认npx -y drawio-mcp能单独跑起来在终端直接执行看有没有报错。如果提示找不到包检查 Node.js 版本和网络如果settings.json里写了但没生效确认文件路径对不对项目级是.claude/settings.json用户级是~/.claude/settings.json别放错层。改完配置要重启 Claude Code。模型请求 401 或鉴权失败。检查ANTHROPIC_AUTH_TOKEN是不是完整的 Key有没有多余空格。如果同时配了 shell 环境变量和settings.json的env以哪层为准取决于加载顺序建议只留一处。Key 如果泄露过去控制台重新生成一把。请求 404 或路径错误。最常见的是 Base URL 填成了https://taotoken.net/api/v1或带了/messages。正确填法是https://taotoken.net/api路径由客户端补。另外确认没有残留的旧ANTHROPIC_BASE_URL指向别处。drawio-mcp 被调用但文件没生成。看 Claude Code 的输出里工具调用是否返回错误。常见原因是当前目录没有写权限或者文件名带了非法字符。换个简单文件名、确认目录可写再试。如果工具调用成功但文件是空的可能是节点添加顺序问题让 AI 重新生成一次或在指令里明确「先创建文件再逐个添加节点」。生成的图节点重叠严重。这不是配置错误是 AI 布局能力有限。打开.drawio文件在 Draw.io 里用自动布局整理或者在下指令时补一句「节点之间留出足够间距采用从上到下的纵向布局」能改善不少。导出格式失败。确认 drawio-mcp 版本支持该格式.html和.pdf在部分版本里需要额外依赖。先导出.drawio和.svg这两个最稳的其他格式在 Draw.io 里手动导出。6. 后续怎么用统一 Key 之后的路跑通这一套之后模型侧就固定成 TaoToken 一个入口了。后面再加 MCP Server比如数据库查询、文件操作、API 调试都只在mcpServers段加一段模型接入完全不用动。这就是统一 Key 的价值工具在变入口不变。如果你主要做长期编码和 Agent 任务可以看 Coding Plan把额度规划一下https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite。想先在网页里试模型效果用模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteClaude Code 相关的接入说明可以看https://taotoken.net/claude-code?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite。drawio-mcp 解决的是绘图从零到一的效率TaoToken 解决的是多工具 Key 分散的管理成本。两个叠在一起你得到的是一个入口统一、能画图、能写代码的 Claude Code 工作流。下一步可以试试让它根据你现有的代码生成架构图或者把会议纪要直接转成流程图这两个场景我跑下来都挺省事。