1. 为什么我宁愿让 Claude Code 画图也不想再手拖 drawio写技术文章、做分享 PPT、画系统架构图最头疼的往往不是逻辑想不清楚而是画出来的图不好看。配色乱、箭头丑、对齐歪怎么看都不像正经文章里该有的样子。我试过在 drawio 里手动调一张「Agent 循环」示意图光是让三个圆角矩形等距对齐就花了二十分钟最后箭头还是斜的。后来我把这件事交给了 Claude Code配合一个叫 anthropic-diagram 的开源技能只需要说一句话它就能吐出一个可编辑的.drawio文件风格是 Anthropic 技术博客那种温暖的米色底、开放式 V 形箭头、语义化配色。但这里有个前置问题Claude Code 要能稳定跑起来得先解决 API 通道和 Key 管理。如果你手上有多个项目、多个模型要切换每个都去改环境变量会很烦。这篇就聚焦一件事——用 TaoToken 统一 Key 接入 Claude Code把settings.json配置骨架搭好然后一句话生成 Anthropic 风格架构图从配置到出图一次跑通。适合谁看写技术博客的人、做技术分享的工程师、画系统设计文档的架构师以及任何想用自然语言替代手动排版的人。核心检索词就三个Claude Code、TaoToken 统一 Key、Anthropic 风格架构图。2. TaoToken 前置统一 Key 与 API 通道怎么理解TaoToken 在这里扮演的角色是一个统一的 API 通道和 Key 管理入口。你可以把它理解成一个「钥匙串」以前你每个模型、每个工具都要单独配一把钥匙API Key现在只需要在 TaoToken 里生成一把统一 Key然后在 Claude Code 的配置里指向这个通道就行。这样做的好处很直接。第一Key 集中管理换模型或换项目时不用到处翻环境变量。第二Claude Code 的settings.json只需要维护一份配置骨架团队协作时把骨架同步出去每个人填自己的 Key 即可。第三接入文档和 API Keys 页面是分开的排障时能快速定位是 Key 问题还是通道问题。需要提前准备的东西不多一个 TaoToken 账号、一把 API Key、本机装好 Claude Code、以及 draw.io Desktop可选用于导出 PNG。如果你还没拿 Key可以去控制台生成接入细节看接入文档。这两个入口我放在文末 CTA 里这里先不打断配置节奏。注意TaoToken 是合规的 API 通道服务配置时只填官方给的 API 地址不要自行拼接或改写域名否则容易出现 401 或连接超时。3. 可复制配置Claude Code 的 settings.json 骨架Claude Code 读取配置的位置分用户级和项目级。用户级在~/.claude/settings.json项目级在项目根目录的.claude/settings.json。我建议先用用户级跑通确认没问题后再复制到项目级做隔离。下面是一份可以直接复制的骨架。把YOUR_TAOTOKEN_API_KEY替换成你在控制台生成的那把 KeyANTHROPIC_BASE_URL指向 TaoToken 的 API 地址https://taotoken.net/api。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: YOUR_TAOTOKEN_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 }, permissions: { allow: [ Read, Write, Bash(drawio:*) ], deny: [] }, includeCoAuthoredBy: false }几个参数说明一下。ANTHROPIC_BASE_URL是通道地址必须带/api后缀不要加 UTM 参数否则可能被当成非法路径。ANTHROPIC_MODEL是主模型画图和长文本推理用它ANTHROPIC_SMALL_FAST_MODEL是快速小模型用于补全和轻量任务能省不少 token。permissions.allow里我加了Bash(drawio:*)这样 Claude Code 在需要调用 draw.io Desktop 导出 PNG 时不会卡在权限确认上。如果你想把配置放在项目级路径换成.claude/settings.json内容完全一样。项目级的好处是团队共享骨架但 Key 不要提交到 Git建议用环境变量注入或者本地覆盖。配置写完后Claude Code 不会自动热加载需要重启一次会话。重启后可以用/status命令查看当前生效的模型和通道确认ANTHROPIC_BASE_URL已经指向 TaoToken。4. 验证请求从一句话到 drawio 文件配置好之后先做一次最小验证确认通道是通的。在 Claude Code 里输入一句简单的话比如「用一句话说明你当前使用的模型和 API 通道」。如果返回正常说明 Key 和通道都没问题。如果报 401多半是 Key 填错或没重启如果报连接超时检查ANTHROPIC_BASE_URL是不是写成了带 UTM 的地址。通道验证通过后安装 anthropic-diagram 技能。手工安装两步把skill.md和references/文件夹复制到~/.claude/skills/anthropic-diagram/用户级或.claude/skills/anthropic-diagram/项目级。Claude Code 会自动检测并加载不需要额外配置。然后就是核心动作——一句话生成架构图。在 Claude Code 里输入画一个 Agent 循环的架构图用 Anthropic 风格输出 drawio 文件技能会自动触发生成一个.drawio文件。我实测下来生成的文件默认落在当前工作目录文件名类似agent-loop.drawio。生成后你可以直接用 draw.io Desktop 打开或者拖进 draw.io 网页版编辑。如果你想导出 PNG用命令行C:\Program Files\draw.io\draw.io.exe -x -f png -e -b 20 -o agent-loop.png agent-loop.drawio参数含义-x导出-f png指定格式-e嵌入 XML-b 20边框留白 20 像素-o输出文件名。macOS 下路径换成/Applications/draw.io.app/Contents/MacOS/draw.io即可。生成出来的图会是什么样背景是温暖的米色#F2EFE8箭头是开放式 V 形连接线带柔和圆角走正交路线每个组件包在细边框圆角矩形里。颜色有明确语义用户输入用#F8E9E1AI 模型用#D7E6DC错误状态用#F8DFDA。你不用读标签扫一眼颜色就能判断组件角色。5. 本篇常见错排查第一个坑ANTHROPIC_BASE_URL写成了带 UTM 的官网地址。官网地址是给人看的API 通道必须用https://taotoken.net/api两者不要混。我踩过的坑就是复制官网链接直接填进去结果一直 404。第二个坑Key 没重启就测试。Claude Code 的settings.json修改后需要重启会话才生效直接在当前会话里测试会读到旧配置。第三个坑drawio 文件生成了但打不开。检查文件是不是被截断正常情况下.drawio是 XML 格式开头应该是?xml version1.0 encodingUTF-8?。如果文件为空多半是技能没加载成功检查~/.claude/skills/anthropic-diagram/skill.md是否存在。第四个坑导出 PNG 时报「drawio 不是内部或外部命令」。这是没把 draw.io Desktop 加入 PATH用完整路径调用即可或者手动把安装目录加到系统环境变量。第五个坑生成的图颜色不对。anthropic-diagram 的颜色定义在references/color-palette.md如果你想改风格改这个文件就行不用动主逻辑。但改完要重启 Claude Code 会话。报错现象可能原因处理方式401 UnauthorizedKey 错误或未重启检查 Key重启会话404 Not FoundBASE_URL 带 UTM 或路径错改为https://taotoken.net/api连接超时网络或通道地址错确认地址检查网络drawio 文件为空技能未加载检查 skills 目录PNG 导出失败drawio 未加 PATH用完整路径调用6. 语义一致 CTA按你的场景选入口如果你现在卡在接入或排障阶段优先去 API Keys 页面生成或更换 Key再对照接入文档检查settings.json骨架。这两个入口能解决 90% 的配置问题。如果你只是想先验证模型能不能正常对话不想动本地配置可以直接用模型对话页面发一句话测试确认通道通畅后再回到 Claude Code 里配。如果你打算长期用 Claude Code 做编码、画图、Agent 任务建议了解一下 Coding Plan它更适合高频调用场景Key 管理和额度控制会更省心。配置这件事跑通一次之后就是复制粘贴。真正花时间的是想清楚要画什么逻辑剩下的配色、布局、箭头样式交给 anthropic-diagram 和 Claude Code 就行。