多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Mermaid 旧图重画,改 TaoToken 行不行

Mermaid 旧图重画,改 TaoToken 行不行 1. 先给结论Mermaid 旧图重画改 TaoToken 行不行上周我把一张三年前的 Mermaid 架构图丢给 diagram-design 绘图 Skill 重画卡住的不是图型选择而是 Claude Code 侧的模型访问配置Base URL 到底填官方地址还是填 TaoToken 的兼容地址如果你也在评估“Mermaid 旧图重画改 TaoToken 行不行”先记一个入口TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_intro 。我的结论是行但要把 Key、Base URL、模型名三件事分开处理不能把 Claude Code 的 ANTHROPIC_* 配置原样抄给 Codex也不能把绘图 Skill 当成模型供应商。先把概念掰开。diagram-design 这类绘图 Skill本质上是一组提示词、样式规则和文件操作流程。它负责读取你上传的 Mermaid 源图理解节点关系按照编辑级样式重画再输出 HTML 和 SVG 对照文件。它本身不直接连某个模型而是依附在 Claude Code、Codex 这类 AI 编程工具里由工具去调用模型。因此你改 TaoToken改的是“模型访问方式”不是“绘图引擎”。只要编程工具能通过 TaoToken 的 Base URL 访问模型Skill 的工作流不会被推翻。但“行不行”有三个前提。第一Key 要在重画前准备好。不要等到 Skill 跑到一半报 401 才去找 Key。正确顺序是先到 TaoToken 官网拿 Key再把 Base URL 填成https://taotoken.net/api最后才让 Skill 读 Mermaid 源图。第二Claude Code 和 Codex 的配置不能混。Claude Code 走settings.json和ANTHROPIC_*环境变量Codex 走config.toml和model_providers。把ANTHROPIC_BASE_URL填进 Codex或者把 Codex 的wire_api塞给 Claude Code都会导致鉴权失败或模型不存在。第三重画质量不只看模型。模型访问通了只代表能跑图好不好看还要看你有没有指定编辑级样式、用途、是否保留语义、是否输出 HTML/SVG 对照。下面按技术文档作者的视角把整套流程拆成可跟做的步骤。2. 重画前先拿 KeyTaoToken 侧三件套与 Base URL在重画 Mermaid 旧图之前先处理模型访问。你可以把这一步理解成“给 AI 编程工具换一个可用的模型入口”。入口在 TaoToken 官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_key 。进入控制台后创建 API Key复制出来不要直接提交到 Git 仓库也不要写进前端代码。你需要记下三件套配置项值说明Base URLhttps://taotoken.net/api工具配置用不要在后面随便加 UTM 参数API KeyYOUR_API_KEY换成你在控制台创建的真实 Key模型名YOUR_MODEL_NAME以控制台当前可用模型名为准不要凭记忆填Base URL 尤其容易填错。产品事实里给的是https://taotoken.net/api不是带utm_source的官网首页也不是带utm_content的活动页。UTM 参数是给官网入口统计用的工具配置里只填 API Base URL。如果你在 Claude Code 或 Codex 里把?utm_source...也拼进去模型请求路径就会变奇怪常见结果是 404 或 401。本地可以先准备环境变量方便后面切换export TAOTOKEN_API_KEYYOUR_API_KEY export TAOTOKEN_BASE_URLhttps://taotoken.net/api export TAOTOKEN_MODELYOUR_MODEL_NAME注意这三个变量只是给你自己终端和脚本用的通用变量。Claude Code 不认TAOTOKEN_API_KEYCodex 也不一定认TAOTOKEN_MODEL。真正接入时要映射到各自配置文件。不要因为看到TAOTOKEN_*就以为所有工具都能直接读配置映射这一步不能省。创建 Key 之后建议先做一次最小验证。不是让模型画图而是先确认模型访问层是通的。你可以到模型对话入口发一句“返回 ok”或者在你常用的 AI 编程工具里发一个极短请求。等最小请求通过再去装或调用绘图 Skill。顺序反过来一旦失败你分不清是 Key 问题、Base URL 问题还是 Skill 没加载。还有一个细节Key 不要复用个人主账号的长期 Key。重画 Mermaid 旧图是一个低风险任务但 AI 编程工具可能会读写本地文件、执行本地命令。给这类任务单独建 Key后续排查和轮换都更清楚。所有命令都在本地终端执行Mermaid 源图也在本地读取不要让 Skill 去连生产数据库。3. Claude Code 接入settings.json 与 ANTHROPIC_* 的正确写法Claude Code 侧的配置核心是settings.json和环境变量。它通常使用ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL这组变量。你要做的是把 Base URL 指向https://taotoken.net/api把 Auth Token 换成YOUR_API_KEY模型名换成YOUR_MODEL_NAME。项目级配置可以放在项目的.claude/settings.json用户级配置可以放在~/.claude/settings.json。示例{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_MODEL_NAME } }如果你更习惯在终端里临时覆盖也可以export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELYOUR_MODEL_NAME配置完以后重启 Claude Code 或重新打开终端让环境变量生效。然后在 Claude Code 里发一个简单请求确认它已经走 TaoToken 的 Base URL。可以让它回复“当前模型访问正常”或者直接问一个不需要读文件的问题。确认通过后再让它调用 diagram-design Skill。调用绘图 Skill 时不要只丢一句“帮我重画”。要明确告诉它输入、样式和输出。例如读取当前目录下的 old-flow.mmd。 用 diagram-design 的编辑级样式重画。 风格选浅色极简只保留一个强调色。 用途是技术文档正文字号偏大节点名保留业务语义。 把端口号、JWT、RS256、:8443 这类实现细节合并成“登录”。 输出两个文件redraw-preview.html 和 redraw-editorial.svg。 HTML 里要做原 Mermaid 和新 SVG 的左右对照。Claude Code 常见的接入问题有几个。401Key 没填、Key 失效、ANTHROPIC_AUTH_TOKEN里 still 是YOUR_API_KEY。404Base URL 写成了带 UTM 的官网地址或者自己加了不确定的/v1。模型不存在ANTHROPIC_MODEL写了不存在的模型名或者控制台没有该模型权限。配置不生效settings.json放错位置或者你只改了项目配置但启动目录不对。终端环境变量没生效新开终端后没 source或者 shell 配置文件和当前会话不一致。如果你需要确认 TaoToken 官网上的控制台信息可以从这个入口进https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_config 。不要从第三方截图中抄 Key也不要把 Key 贴到群里让别人帮你看。把YOUR_API_KEY留在本地配置文件里即可。4. Codex 接入config.toml 与 CC Switch 三件套别混用Codex 的配置逻辑和 Claude Code 不同它用config.toml不是ANTHROPIC_*。这一点必须强调不要把 Claude Code 的ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN原样抄到 Codex。Codex 通常通过model_providers定义供应商再用model_provider选择。一个可参考的~/.codex/config.toml模板如下model YOUR_MODEL_NAME model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat然后准备环境变量export TAOTOKEN_API_KEYYOUR_API_KEY这里env_key填的是环境变量名不是 Key 本身。真正的 Key 放在环境变量里避免配置文件被提交后泄露。wire_api按你的 Codex 版本和 TaoToken 支持情况调整如果版本要求 responses 协议就按实际文档改不要硬套 chat。关键点是Codex 只认config.toml这套不要在这里出现ANTHROPIC_*。如果你使用 CC Switch 这类切换工具把它理解成“供应商配置切换器”。它的三件套是CC Switch 项填写内容Base URLhttps://taotoken.net/apiAPI KeyYOUR_API_KEY模型YOUR_MODEL_NAMECC Switch 切换的是模型访问配置不是安装绘图 Skill。你仍然要在 Codex 或 Claude Code 侧确认 Skill 已经能被调用。切换后建议重启 Codex 会话或终端避免旧配置缓存。若切换后仍然报鉴权错误先检查 CC Switch 当前激活的是不是 TaoToken 配置再检查 Codex 的model_provider是否指向对应 provider 名。还有一个容易踩的坑Claude Code 和 Codex 同时开着并且终端里都 export 了环境变量。此时你以为 Codex 在读config.toml但它可能被 shell 环境干扰。最稳妥的做法是分终端会话测试一个终端只测 Claude Code一个终端只测 Codex。每测通一个再进入绘图 Skill 环节。5. 上传 Mermaid 源图指定编辑级样式与输出 HTML/SVG 对照模型访问配置通后才进入真正的重画环节。目标很明确上传 Mermaid 源图指定编辑级样式输出 HTML 和 SVG 对照。为了可复现先准备一个本地文件old-flow.mmdflowchart LR U[读者] -- G[API Gateway] G -- A[Auth Service] A -- DB[(User DB)] G -- C[Redis Cache] C -- G A -- L[Audit Log]这就是一张典型的旧图节点名带着实现细节布局是早期 Mermaid 默认排版线交叉可能多字号和留白不一定适合技术文档。你要让 diagram-design 重画而不是重新设计业务架构。所以提示词里要加“保留节点语义”“只做视觉重画”“输出变更清单”。可以这样发指令请读取本地 old-flow.mmd。 使用 diagram-design 的编辑级样式重画不要改业务关系。 样式选择浅色极简。 主强调色只保留一个背景干净边框 1px圆角不超过 10px不要阴影。 把 Auth Service / JWT / RS256 / :8443 合并为“登录”。 把 Redis Cache 保留为“缓存”Audit Log 保留为“审计日志”。 用途是技术博客正文宽度适配移动端阅读字号比默认大一号。 输出 redraw-preview.html 和 redraw-editorial.svg。 HTML 左侧放原始 Mermaid 渲染结果右侧放新 SVG。 最后列出节点合并、删除、改名清单。执行后你应该得到类似这些文件old-flow.mmd redraw-preview.html redraw-editorial.svg redraw-changes.md其中redraw-preview.html直接双击就能在浏览器打开里面是 HTML 和 SVG 对照。redraw-editorial.svg可以拖进 Figma 继续改也可以嵌入到文档站点。若 Skill 支持导出 PNG可以再生成 2 倍图用于 PPT但核心验收物是 HTML 和 SVG 对照不要只看聊天窗口里的预览。验收时按这几个点检查节点语义有没有变。原图里的“登录”是否还包含认证链路缓存是否还回写 Gateway。是否只做视觉重画。如果 Skill 把 Redis Cache 删了而你的文章正文还在讲缓存那就是语义丢失。配色是否克制。编辑级样式通常强调色少、线条细、留白足不应出现大面积渐变和厚阴影。SVG 是否自包含。不要引用外部图片否则换台机器打开 HTML 会缺图。HTML 对照是否可读。左边旧图、右边新图能快速看出改了什么。如果你要把图放进 CSDN 技术博客建议优先用 SVG 或高分辨率 PNG。SVG 在桌面端清晰PNG 在移动端兼容性更稳。CSDN 编辑器对 SVG 的支持视版本而定如果上传后显示异常就导出 2 倍 PNG 作为正文图同时保留 SVG 源文件供后续修改。6. 排障重画结果不一致、超时、鉴权失败时怎么查这类工作流的故障可以分成三层模型访问层、工具 Skill 层、输出文件层。按层排查比反复重试有效。模型访问层最常见的是鉴权失败。先确认YOUR_API_KEY已经替换且没有多余空格。然后确认 Claude Code 用的是ANTHROPIC_AUTH_TOKENCodex 用的是env_key指向的环境变量。不要把 Claude Code 的变量复制到 Codex。若你忘了控制台里的模型名可以回到 TaoToken 官网查看https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_troubleshoot 。如果报 404优先怀疑 Base URL。工具配置里只填https://taotoken.net/api。不要拼 UTM 参数不要凭感觉加/v1。如果某个工具明确要求/v1按该工具文档调整但不要同时保留两种写法。如果报模型不存在检查YOUR_MODEL_NAME是否和控制台一致。模型名大小写、日期后缀、版本号都可能影响结果。不要用“claude”这种泛称。如果 Skill 层报找不到 diagram-design先确认它是否安装到了当前工具。Claude Code、Codex、Factory Droid、Pi 的 Skill 安装方式不同装错目录等于没装。其次确认你启动工具的工作目录是否正确。项目级 Skill 通常只在项目目录内可见用户级 Skill 才全局可用。如果重画风格没变先看提示词是否明确“编辑级样式”。只说“重画”可能会得到另一张普通 Mermaid 默认图。把样式名、强调色数量、边框、圆角、阴影规则写清楚。再检查 Skill 的样式文件是否被正确读取。第一次在新项目使用时有些 Skill 会先问你要不要做品牌适配如果你跳过适配它会用默认配色这不算失败。如果输出 HTML 空白检查 SVG 是否内联成功。有些浏览器安全策略会拦截本地文件里的外部资源所以最稳的是让 Skill 直接内联 SVG。若只得到 SVG 没有 HTML可以要求它补一个对照页。若只得到 PNG也可以接受但后续修改不如 SVG 方便。如果长图超时不要一次重画整张复杂架构。拆成主链路、缓存链路、审计链路三张子图分别输出 SVG再用文档工具组合。模型调用超时也可能是上下文太长去掉 Mermaid 里的注释和无用样式类只保留节点和连线。如果语义被改要求 Skill 输出变更清单并和原始.mmd做节点对照。技术文档作者最怕的是图好看但含义变了。编辑级样式可以合并节点但不能悄悄删掉关键依赖。所有本地命令都在你的终端执行不要让 Skill 去连接生产库或执行数据库查询。最后如果 Claude Code 和 Codex 的表现差异很大不要急着怀疑 TaoToken。两个工具的系统提示、Skill 加载方式、文件读写权限都不同。先用同一个 Mermaid 源图和同一段提示词分别测试再比较输出。能稳定复现的那一层才是需要改配置的地方。7. 文末 CTA模型对话、Coding Plan、创建 Key、Claude Code 文档回到标题Mermaid 旧图重画改 TaoToken 行不行我的实践结论是行但它是“模型访问方式”的替换不是绘图 Skill 的替代。只要先把 Key、Base URL、模型名三件套准备好Claude Code 和 Codex 分别按自己的配置文件接入diagram-design 这类 Skill 就能继续完成“上传 Mermaid 源图、指定编辑级样式、输出 HTML 和 SVG 对照”的流程。推荐按这个顺序走先到模型对话入口验证模型能不能通https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_chat如果你要长期在 Claude Code、Codex 里重画技术图再看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_coding_plan正式配置前创建 API Key把YOUR_API_KEY换掉https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_api_keysClaude Code 的settings.json、ANTHROPIC_*写法以这份文档为准https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentmermaid_redraw_claude_code_doc先跑通模型对话再创建 Key最后把 Base URLhttps://taotoken.net/api填进对应工具。Mermaid 旧图重画这件事难点从来不是画图命令本身而是让模型访问、Skill 加载、文件输出三件事各归其位。
返回列表