1. 从拖拽半小时到三句话出图架构图工作流的真实痛点如果你写过系统设计文档大概率经历过这个循环需求评审刚结束脑子里架构清清楚楚打开 Draw.io 开始拖方块、拉箭头、对齐网格、调颜色半小时过去图还没成型。换成 Visio 更重换成 Mermaid 又要跟 DSL 语法较劲渲染出来布局还未必是你想要的。真正花在「思考架构」上的时间反而被「画图」这件事吃掉了。这篇要聊的解法是用自然语言驱动 Claude Code / Codex 生成可编辑的架构图核心是一个叫 Archify 的免费 Skill。它是什么简单说它是一个 AI Agent Skill 插件支持 Claude Code、Codex CLI 和 opencode你描述系统它输出一个自包含的 HTML 文件浏览器打开就能切主题、导出 SVG/PNG零依赖发一个文件就能分享。适合谁写技术文档的人、做代码 review 的人、做 AI/Agent 开发要画调用链的人、写技术博客需要配图的人。我试过把仓库丢给它做运行时架构分析也试过让它画登录时序图整体体验是「对话式迭代」比手工拖拽快一个量级。但这里有个前提模型调用通道要稳。Claude Code 和 Codex 这类 CLI 工具默认走官方 endpoint国内直连经常超时或断流所以本文会把模型 endpoint 统一改到 TaoToken 的 Key 通道让整个流程可复现。下面从安装配置讲到导出验证每一步都能跟着做。2. TaoToken 前置准备把 Claude Code / Codex 的模型通道统一到一把 Key在装 Archify 之前先把「模型从哪来」这件事解决掉。Claude Code 和 Codex CLI 都是靠环境变量或配置文件读取 Base URL 和 API Key 的默认指向官方地址。如果你所在网络访问官方 endpoint 不稳定生成架构图这种需要多轮对话迭代的任务就会频繁中断——画到一半报local proxy failed或者reading choices解析失败体验直接崩掉。TaoToken 在这里扮演的角色是「统一 Key 通道」你申请一把 Key把 Claude Code、Codex、以及后面可能用到的其他工具都指向同一个 Base URL省得每个工具单独配一套凭证。它的 API 地址是https://taotoken.net/api控制台在https://taotoken.net/consoleKey 管理在https://taotoken.net/api-keys。注意 API 地址后面不加任何多余路径Claude Code 和 Codex 对 Base URL 的拼接规则不一样写错了会直接 404。具体操作分三步。第一步进控制台注册并创建 API Key复制出来先存好后面配置要用。第二步确认你要用的模型 ID比如 Claude 系列或 GPT 系列不同工具支持的模型名不同Codex 走的是 OpenAI 兼容格式Claude Code 走的是 Anthropic 格式TaoToken 两种协议都兼容所以同一把 Key 可以同时喂给两个工具。第三步把 Base URL 和 Key 写进各自的环境变量或配置文件。这里有个容易踩的坑Claude Code 读的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEYCodex 读的是OPENAI_BASE_URL和OPENAI_API_KEY两者变量名不同但值都指向 TaoToken 的同一个 API 地址和同一把 Key。如果你只配了一个另一个工具就会回退到官方 endpoint然后你就看到「一个能用一个超时」的诡异现象。所以建议两个都配统一管理。配完之后先别急着装 Archify用一条最简单的请求验证通道是否通。Claude Code 里直接问一句「你好」Codex 里跑一个codex print hello能正常返回就说明 Key 通道没问题。如果报 401说明 Key 复制错了或者没生效如果报连接超时检查 Base URL 是不是写成了带/v1的完整路径——TaoToken 的 API 地址就是https://taotoken.net/api不要自己加后缀。这一步验证通过后面的 Skill 安装和出图才有稳定基础。3. 可复制配置Archify Skill 安装 Claude Code / Codex 接入片段通道验证通过后开始装 Archify。最快的方式是一行命令npx skills add tt-a1i/archify -g-g表示全局安装装完之后 Claude Code 和 Codex 都能识别到这个 Skill。如果你用的是 Claude Code 手动安装方式下载archify.zip后解压到~/.claude/skills/目录unzip archify.zip -d ~/.claude/skills/Codex CLI 和 opencode 的 skills 目录路径略有差异一般在~/.codex/skills/或项目根目录的.skills/下具体看 README。装完可以用ls ~/.claude/skills/确认 archify 目录存在。接下来是关键的配置片段。Claude Code 的配置文件通常在~/.claude/settings.json你需要把模型通道指向 TaoToken。一个可复制的settings.json片段如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }Codex 的配置走~/.codex/auth.json和~/.codex/config.toml两个文件。auth.json存 Key{ OPENAI_API_KEY: sk-你的TaoToken密钥 }config.toml存 Base URL 和模型 IDmodel gpt-4o model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api wire_api chat这三件套——Base URL、Key、Model ID——缺一不可。很多人只改了 Base URL 忘了改 Model ID结果请求发出去模型名对不上报model not found。Claude Code 对应的是ANTHROPIC_MODELCodex 对应的是config.toml里的model字段两边都要填成 TaoToken 支持的模型名。如果你用 CC Switch 这类工具管理多套配置逻辑是一样的在 CC Switch 里新增一个 providerBase URL 填https://taotoken.net/apiKey 填 TaoToken 的 KeyModel ID 填你要用的模型然后切换过去。Cline MCP 场景下也是同样的三件套MCP server 配置里指定baseUrl、apiKey、model三个字段即可。配完之后重启 Claude Code 或 Codex让配置生效。4. 三句话提示词模板与导出验证从描述到 SVG/PNG 的完整动作配置就绪现在进入出图环节。Archify 的核心用法是自然语言描述我把它归纳成三句话模板覆盖大多数场景。第一句定义图表类型和系统边界。比如画架构图「用 archify 画架构图React 前端 → Node.js API → PostgreSQL 主库 Redis 缓存部署在 AWSCloudFront 前置Cognito 做鉴权。」这句话里包含了组件、数据流向、部署环境和鉴权层Archify 会自动把postgres、redis、aws映射到对应的语义颜色——紫色是数据库/存储绿色是后端服务琥珀色是云基础设施玫瑰色是安全/鉴权不需要你手动指定。第二句补充细节或修正。画完第一版如果不满意直接接着聊「把 Redis 挪到左边」「鉴权服务用玫红色高亮」「把 Kafka 加进来连接 Order Service 和 Notification Service」。Archify 理解意图后只改动需要改的部分不会重绘整张图这是对话式迭代的关键——比在 Draw.io 里重新拖一遍快得多。第三句指定导出格式和验证要求。比如「导出 SVG 和 PNGPNG 要 4× 分辨率确认深浅色主题都能正常切换。」Archify 生成的是一个自包含 HTML 文件浏览器打开后右上角有导出菜单Copy PNG 直接进剪贴板下载支持 PNG / JPEG / WebP / SVG。它的 4× 导出不是把低分辨率图拉伸放大而是把 SVG 的width/height直接设为4 × viewBox让浏览器在目标分辨率下原生光栅化所以视网膜屏和打印稿都清晰。验证动作分三步。第一步浏览器打开生成的 HTML切换深色/浅色主题确认颜色语义正确、没有斜线箭头或越界节点。第二步点导出菜单下载 SVG把 SVG 丢进 GitHub README开深色模式看是否自动切换——Archify 导出的 SVG 内嵌了双主题 CSS 变量和media (prefers-color-scheme)规则同一个文件适配两种模式不需要维护两张图。第三步下载 PNG 粘进 Slack 或 Notion放大看边缘是否锐利确认是原生 4× 而不是插值放大。Archify 内置了验证循环生成图之后会自动走一遍 JSON Schema 校验、布局合理性检查、HTML/SVG 产物审查有问题就迭代。斜线箭头、图例区域污染这类渲染 bug在交付给你之前会被发现并修掉。但你自己最好还是过一遍上面三步尤其是导出后的实际显示效果因为不同浏览器的 SVG 渲染有细微差异。5. 本篇常见错排查401、local proxy failed、reading choices 与 OAuth 报错配置和出图过程中最容易撞上四类报错逐个说清楚。第一类401 Unauthorized。这个基本是 Key 问题。检查ANTHROPIC_API_KEY或OPENAI_API_KEY是否填了 TaoToken 的 Key有没有多余空格Key 是否在控制台被禁用。还有一种情况是 Claude Code 和 Codex 读的变量名不同你只配了一个另一个工具回退到官方 endpoint 然后官方 Key 无效也会报 401。解决办法是两边都配统一用 TaoToken 的 Key。第二类local proxy failed。这个报错通常出现在 Claude Code 走本地代理转发时代理进程没起来或者端口被占用。如果你没有主动配代理检查环境变量里有没有残留的HTTP_PROXY/HTTPS_PROXY指向一个不存在的本地端口。清掉这些变量让请求直连 TaoToken 的 API 地址即可。另外确认 Base URL 写的是https://taotoken.net/api不要带/v1或其他后缀路径拼接错误也会导致代理层报失败。第三类reading choices解析失败。这个报错说明请求发出去了、也返回了但返回体格式不符合 Codex 预期的 OpenAI 兼容结构。常见原因是config.toml里wire_api字段写错了Codex 需要wire_api chat来走 chat completions 格式。如果你填成了responses或其他值解析就会失败。改回chat后重启 Codex 即可。第四类OAuth 相关报错。Claude Code 某些版本会尝试走 OAuth 登录流程如果你已经用 API Key 配置了 TaoToken 通道就不需要再走 OAuth。报错信息里出现OAuth或token exchange failed时检查settings.json里是否同时存在 OAuth 相关字段和 API Key 字段两者冲突会导致鉴权失败。删掉 OAuth 字段只保留ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY。还有一个隐蔽的坑模型 ID 写错。Claude Code 报model not foundCodex 报invalid model都是因为ANTHROPIC_MODEL或config.toml里的model填了一个 TaoToken 不支持的模型名。去控制台确认可用模型列表填对的那个。排查顺序建议是先确认 Key 有效再确认 Base URL 无多余路径再确认 Model ID 正确最后确认没有代理环境变量干扰。这四步走完九成报错都能定位。6. 稳定通道 免费 Skill把架构图这件事从手工活变成对话回到最初的问题画架构图到底该花多少时间如果每次都要打开 Draw.io 拖半小时那确实不值得。Archify 这类 Skill 的价值在于把「画图」变成「描述」你只需要说清楚系统里有什么、怎么连、部署在哪剩下的布局、配色、导出交给它。而 TaoToken 的 Key 通道解决的是「模型调用稳不稳」这个前置条件——通道不稳再好的 Skill 也会在迭代到第三轮时断掉。实际用下来我的建议是先把 Claude Code 和 Codex 的 Base URL、Key、Model ID 三件套配好用一条简单请求验证通道再装 Archify然后用三句话模板出第一张图。导出 SVG 丢进 README 验证双主题导出 PNG 验证 4× 清晰度。整个过程不超过十分钟比手工拖一张图还快。如果你还没配通道可以从 API Keys 页面拿一把 Key接入文档里有各工具的详细配置说明。想把模型对话单独跑起来验证效果可以用模型对话页面直接试。长期做编码和 Agent 开发的话Coding Plan 更适合高频调用场景。架构图只是开始通道稳了之后代码 review 的调用链图、CI/CD 工作流图、数据流图都能用同一套流程生成。