1. 一张架构图卡了我四十分钟上周给一个中台项目写技术方案架构图改到第三版还是被打回。前端网关、后端服务、MySQL 主从、Redis 缓存就这四个节点加几条调用关系我先让模型画出来的是圆角矩形叠渐变叠投影跟文档模板放一起像两个年代的产物转手打开 Figma拖了四十分钟盒子配色越调越脏最后方案里干脆塞了一张文字表格。忍着发了两版之后我在 GitHub 上刷到 diagram-design 这个绘图 Skill。它不解决“能不能画图”解决的是“画出来能不能直接放进文档”。它把设计师画图时守的那套规矩——不用阴影、不用渐变、细线条、强调色只留一个——写成规则让模型照着执行输出是单文件 HTML。但 Skill 只管画图那一步整条链路能不能稳定跑起来取决于模型侧怎么接。我把模型地址切到 TaoToken 之后Claude Code 和 Codex 都能稳定调Skill 的提示词一个字没改。这篇文章按顺序写先拿 Key、再改配置、再装 Skill、最后跑一遍前端 / 后端 / 数据库 / Redis 的完整例子每一步都能照着做。2. 拿 Key 与 Base URLClaude Code 和 Codex 各改哪个文件2.1 先把 Key 拿到手如果还没进过控制台先打开 TaoToken 官网 完成注册已经在用的直接跳到 API Keys 页面 新建一个 Key。拿到手的是一长串字符本文统一写成YOUR_API_KEY。有两个细节值得注意第一Key 只在创建时完整展示一次关掉页面就看不到了建议立刻存进密码管理器第二按项目拆 Key给“写文档配图”这条链路单独申请一个以后轮换或撤销不会牵连别的工具。Base URL 固定填https://taotoken.net/api结尾不要带斜杠也不要自己补/v1。这是最容易踩的坑多一个斜杠就是一片 404。2.2 Claude Code改 settings.jsonClaude Code 的供应商配置放在settings.json。全局路径是~/.claude/settings.json项目级路径是项目/.claude/settings.json项目级优先级更高。写入下面这段{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5 } }保存之后必须重开会话已经在跑的会话不会热加载配置。想确认生效可以在会话里直接问一句“你现在用的 base url 是什么”或者看会话启动时打出的模型信息。不想写文件的话也可以走环境变量export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY这种方式适合临时切一下关掉终端就失效长期用还是写进settings.json省事。2.3 Codex改 config.toml别抄上面的变量名Codex 走的是完全另一套配置体系。它读的是~/.codex/config.toml不认ANTHROPIC_*这一套把上面那段 JSON 原样搬过去只会得到一个连不上的客户端。model gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api responses然后在 shell 里把 Key 写进对应的环境变量export TAOTOKEN_API_KEYYOUR_API_KEY这里有个高频错误env_key填的是变量名不是 Key 本身。有人看到这一行就把YOUR_API_KEY直接塞进去结果就是鉴权失败报错还看不出问题在哪。2.4 CC Switch 三件套怎么填如果你 Claude Code 和 Codex 同时在用手改两个文件很容易乱。CC Switch 这类切换工具管的其实就是三件套Base URLhttps://taotoken.net/apiAPI KeyYOUR_API_KEY模型名按控制台模型列表里的名字填Claude Code 和 Codex 用的不是同一个名字三项填完保存切回 Claude Code 重开会话才生效。这里还有一个隐蔽的坑如果 CC Switch 的“当前供应商”没切到 TaoToken它会在你下次启动时用自己缓存的那份配置把settings.json覆盖回去表现出来就是“我明明改了怎么还是老地址”。遇到这种情况先去看切换工具的当前选中项再回去看配置文件。2.5 几种典型报错怎么定位401 / authentication_errorKey 复制时带了首尾空格或者把 Key 填到了env_key那种“变量名”位置。404 not foundBase URL 尾部多了斜杠或者自己加了/v1。model not found模型名和控制台列表里不一致建议直接复制粘贴。改完毫无反应会话没重启或者项目级配置覆盖了全局配置而你没注意。3. 装 diagram-design两条命令的事以及它到底画成什么样diagram-design 是一个装在 AI 编程工具里用的绘图 SkillClaude Code、Codex、Factory Droid、Pi 都能用。它的定位叫“编辑级”——画出来的图可以直接进文章、进 PPT、进技术方案不需要再拉进设计工具二次加工。Claude Code 里的安装路径很直白把 Skill 文件放进 skills 目录即可mkdir -p ~/.claude/skills/diagram-design # 把仓库里的 SKILL.md 与配套资源文件放到该目录下 ls -la ~/.claude/skills/diagram-design放好之后重开会话直接说“给我画一张 XX 架构图”它就会自己去选图型。Codex 那边是把同样的文件放到它对应的 prompt / skill 目录Factory Droid 和 Pi 的步骤基本一致。它内含的图型覆盖面比我预想的宽架构图、流程图、时序图、状态机、ER 图、时间线、泳道图这些是基本盘象限图、雷达图、金字塔、漏斗、甘特图、桑基图、鱼骨图、看板、用户旅程图、Wardley 地图、UML 类图、数据库表结构图也都在。每种图型有三档样式可选浅色极简、深色极简、完整编辑版。最实用的一点是输出形态生成结果就是一个 HTML 文件双击在浏览器里打开不依赖任何外部图片资源离线也能看。图本身还能导出 SVG 和 PNG——SVG 可以直接拖进 Figma 继续改PNG 默认 2 倍清晰度贴进 PPT 够用。它内部写死了一整套审美规则一张图只允许有一个强调色焦点元素控制在一到两个所有坐标、宽度、间距必须是 4 的倍数边框 1 像素圆角最大 10 像素不允许使用阴影。这些规则单条看都挺琐碎自己画图时一条都想不起来但少了它们图就是会难看一截。4. 完整复现前端 后端 MySQL Redis从节点清单到架构图 HTML现在把整条链路跑一遍。前提是第 2 节的配置已经生效会话里能正常调用模型。4.1 输入一份节点清单最省事的做法不是描述“帮我画个架构图”而是把节点和连线直接列出来。下面这段可以直接抄改帮我画一张应用架构图用途是写进技术方案文档。 节点 - 前端React SPA静态资源走 CDN - 接入层Nginx负责 TLS 终止与反向代理 - 后端订单服务集群3 副本无状态 - 缓存Redis主从 哨兵 - 数据库MySQL 8一主两从 连线 - 浏览器 → CDN → Nginx - Nginx → 后端集群 - 后端集群 → Redis读缓存 - 后端集群 → MySQL 主库写 - MySQL 主库 → 从库异步复制 样式浅色极简强调色用品牌色底部带图例。 输出单文件 HTML。注意最后两行。指定“样式”和“输出格式”是让结果可控的关键——不写的话它会给你一个默认版本虽然也能看但跟你文档的视觉未必搭。4.2 输出一个可以就地打开的 HTML生成完成后你会拿到一个 HTML 文件双击就能在浏览器打开。没有外部依赖换台机器照样能看。如果节点太多导致图挤不用自己动手调接着说一句就行“节点太密了把 Redis 和 MySQL 切到独立分组字号调大一号”。它会在同一套设计规则下重排。4.3 落地到文档导出与再加工写进 Markdown / 技术方案直接把 HTML 截图或者导出 PNG2 倍清晰度贴进去不糊。要二次编辑导出 SVG 拖进 Figma图层是分开的能改字改色。要放 PPT导出 PNG深色版本建议先看一遍投影效果浅色极简在任何背景上都稳。一个流程上的小建议架构图这种东西节点一旦确定就尽早生成一版存着。后面接口调整只改文字图的骨架不动改起来是分钟级的事。另外第一次在新项目里用它画图时它会主动停下来问一句风格文件现在还是默认的要不要先做一次品牌适配还是就用默认配色先画。确认之后才动手不会直接拿默认风格给你出图。这个交互设计挺克制的。5. 品牌适配让配图和你的技术文档视觉统一这是我觉得最值回票价的功能。你跟它说一句“适配我的官网风格”它会去抓你主页的配色和字体把背景色、正文色、强调色、标题字体全部提出来之后画的每一张图都用这套色。对写公众号或者写对外技术博客的人这个效果很直观——配图终于跟账号整体视觉统一了而不是每张图都像从同一个模板里抠出来的。就算不做适配默认配色也能直接用黑色墨底加橘色强调截图放文章里不丢人。但花一分钟让图带上自己的品牌色长期看还是划算的。要提醒一句的是品牌适配抓的是配色和字体这类视觉参数别把它当成能读你业务数据的东西。它只关心图长什么样。6. 旧图重画与用途切换给管理层看的版本长什么样手里有 draw.io 或者 Mermaid 画的旧图可以直接丢给它它会用自己那套设计体系重画一遍。更值钱的是“重画 指定用途”。同一张源图你说要放幻灯片它把字号整体调大你说给管理层看它会把节点上的技术细节换成业务说法。举个例子源图上写的是Auth Service / JWT · RS256 · :8443转成业务版本之后就变成“登录”两个字。还有一个细节我觉得很实在画完之后它会给你一份变更清单哪些节点合并了、哪些删掉了写得清清楚楚不会偷偷改你的内容。技术方案配图最怕的就是“看着差不多但意思被改了”有这份清单就能对着核。7. 判断标准什么情况下别画图作者自己在仓库里写了什么场景不该用这个 Skill我觉得很中肯转述一下只是发个动态配个示意图或者在终端里快速示意一下纯文本字符画就够了犯不上动用它。要罗列一堆条目用表格或列表别画图。做前后对比表格比图更清楚。一张图里只有一个盒子一句话那不叫图直接把这句话写出来。判断标准就一条读者从这张图里得到的信息会不会比从一段写好的文字里得到的更多。不会就别画。这条标准其实比工具本身更重要。架构图是给评审的人看的不是给作者自己看的多画一张没有信息增量的图只会让方案变厚不会让它变清楚。8. 收尾把配图这件事从流程里彻底删掉回到开头那个场景。以前写技术方案配图是流程里的一个独立环节先写正文再卡在图上最后要么凑合要么放弃。现在这个环节基本没了——节点清单在写正文的时候就顺手列出来了末尾加一句“画成架构图浅色极简输出 HTML”剩下的交给工具。这套组合里diagram-design 解决的是“画出来的图能不能直接用”TaoToken 解决的是“这条链路能不能稳定跑”。两边配好之后改图就是改一句提示词的事。如果你也想把这条链路搭起来可以按这个顺序走一遍先在 模型对话 里试一下模型能不能正常出图确认 Base URL 和 Key 没问题。长期高频用的话看下 Coding Plan比按次调用更可控。到 API Keys 给配图这条链路单独建一个 Key跟其他项目分开。Claude Code 的具体配置细节参考 Claude Code 文档里面有完整字段说明。把这几步做完下次写方案的时候配图就不再是一个需要专门留时间的环节了。