1. 从一句话到业务图OpenClaw Skill 自动生成 Mermaid 的真实场景一句话生成业务流程图这件事听起来像是产品经理的幻想但实际落地之后你会发现它解决的是一个非常具体的痛点画图的时间成本远高于思考流程本身。我平时写技术方案、梳理系统架构、给团队讲业务链路最耗时的环节往往不是想清楚逻辑而是打开绘图工具、拖拽节点、调整连线、对齐排版。等图画完思路已经凉了一半。OpenClaw 结合 Skill 的思路本质上是把「自然语言 → Mermaid 代码 → 可编辑链接 / SVG 文件」这条链路封装成一个 Agent 可以反复调用的标准能力。你只需要对 Agent 说一句「帮我画一个用户登录流程图包含账号密码校验、后端验证、token 返回、失败跳转」它就能自动生成对应的 Mermaid 语法校验通过后输出可编辑链接和可下载的 SVG 图片。整个过程不需要你手动写一行 Mermaid 代码。但这里有一个容易被忽略的问题多工具调用时的 Key 分散和鉴权混乱。OpenClaw 的绘图 Agent 在生成 Mermaid 之后可能需要调用模型做语法校验、调用渲染服务导出 SVG、调用存储服务保存文件。如果每个环节都单独配置一套 API Key不仅管理麻烦还容易出现某个 Key 过期导致整条链路断掉的情况。我试过在三个不同的 Skill 里分别填 Key结果调试的时候花了半小时才定位到是其中一个 Key 的额度用完了。所以这篇文章的重点不只是「怎么让 OpenClaw 画出 Mermaid 图」而是怎么用 TaoToken 统一 Key 接入版把整条链路的鉴权收口到一个地方。TaoToken 提供统一的 API 通道你只需要在配置里填一次 Base URL 和 KeyOpenClaw 的绘图 Agent 就能通过这个通道调用模型能力完成从自然语言解析到 Mermaid 代码生成的全过程。这样做的直接好处是Key 管理集中、额度监控清晰、切换模型不用改多处配置。适合谁看如果你正在用 OpenClaw 搭建多 Agent 工作流或者你手头有多个 Skill 需要调用模型能力但不想每个都配一遍 Key这篇文章的配置片段可以直接复制落地。如果你只是想试试「一句话出流程图」的效果跟着第 3 节的配置走一遍十分钟内就能看到结果。2. TaoToken 统一 Key 接入OpenClaw Skill 鉴权收口的前置准备在正式配置之前先把 TaoToken 的定位说清楚。TaoToken 是一个面向开发者的 API 统一接入平台它把多家模型服务商的接口收敛成一套标准的 Base URL 和 Key 体系。对于 OpenClaw 这种需要频繁调用模型能力的 Agent 框架来说这意味着你不需要在 Skill 里硬编码多个服务商的 Key只需要指向 TaoToken 的 API 地址用同一个 Key 完成所有模型调用。具体到 OpenClaw Skill 生成 Mermaid 业务图的场景TaoToken 承担的角色是模型调用通道。绘图 Agent 在接收到自然语言指令后需要调用模型把「用户登录流程图包含账号密码校验、后端验证、token 返回」这样的描述转换成标准的 Mermaid 语法。这个转换过程就是通过 TaoToken 的 API 完成的。生成 Mermaid 代码之后Skill 里的 validate.mjs 会做语法校验generate-link.mjs 会生成 Mermaid Live 可编辑链接export-svg.mjs 会导出 SVG 文件。这三个脚本本身不直接调用模型但它们依赖的 Mermaid 代码质量取决于模型通过 TaoToken 生成的结果是否准确。所以前置准备其实就两件事拿到 TaoToken 的 API Key确认 OpenClaw 的配置文件位置。先说 Key。你需要访问 TaoToken 的 API Keys 管理页面创建一个新的 Key。创建的时候建议给 Key 起一个能识别用途的名字比如openclaw-mermaid-skill这样后面如果有多条业务线共用同一个账号排查问题时能快速定位。Key 创建后会显示一次复制下来保存好后面配置里要用。再说配置文件。OpenClaw 的模型接入配置通常放在项目根目录的config文件夹或者环境变量文件里。如果你用的是 OpenClaw 的默认结构模型相关的配置一般在config/model.json或者.env文件中。具体路径取决于你的 OpenClaw 版本和部署方式但核心逻辑是一样的找到模型调用的 Base URL 和 API Key 字段把它们替换成 TaoToken 的地址和你的 Key。这里有一个容易踩的坑Base URL 的结尾不要带多余的斜杠。TaoToken 的 API 地址是https://taotoken.net/api如果你在配置里写成https://taotoken.net/api/有些 HTTP 客户端会把路径拼成//v1/chat/completions导致 404。这个细节在后面的排错章节会再展开。另外如果你打算把 xfc-mermaid 这个 Skill 集成到 OpenClaw 的绘图 Agent 里建议先确认 Agent 的 SOUL.md 文件位置。SOUL.md 是 OpenClaw Agent 的「灵魂文件」里面定义了 Agent 的角色、可用工具、调用规则。绘图 Agent 的 SOUL.md 需要明确写出当用户请求生成业务图时先调用模型生成 Mermaid 语法再调用 xfc-mermaid 的脚本做校验和导出。这个判断逻辑写清楚之后Agent 才能正确路由请求。前置准备做到这里就够了。你不需要提前安装 Mermaid 的本地渲染环境也不需要配置额外的图形库。xfc-mermaid 的脚本会处理渲染和导出你只需要保证 TaoToken 的 Key 有效、Base URL 正确、OpenClaw 能正常读取配置。3. 可复制配置OpenClaw 接入 TaoToken 与 xfc-mermaid Skill 的完整片段这一节直接给可复制的配置片段。我会按「TaoToken 模型接入配置 → xfc-mermaid Skill 目录结构 → 绘图 Agent SOUL.md 路由规则」的顺序展开每一步都给出具体的文件路径和内容。你照着填就行不需要额外改逻辑。3.1 TaoToken 模型接入配置OpenClaw 的模型配置通常放在config/model.json或者通过环境变量注入。下面给出两种方式的配置片段你根据自己项目的实际情况选一种。方式一JSON 配置文件{ provider: taotoken, baseUrl: https://taotoken.net/api, apiKey: sk-your-taotoken-key-here, model: claude-sonnet-4-20250514, maxTokens: 4096, temperature: 0.3 }这里有几个参数需要说明。baseUrl填 TaoToken 的 API 地址注意结尾不要加斜杠。apiKey填你在 TaoToken 控制台创建的 Key。model填你要调用的模型 ID具体支持哪些模型可以在 TaoToken 的文档页面查看。temperature建议设低一点因为 Mermaid 语法生成需要稳定性太高的温度会导致同样的指令每次生成的代码结构差异很大。方式二环境变量如果你不想把 Key 写在配置文件里可以用环境变量export TAOTOKEN_BASE_URLhttps://taotoken.net/api export TAOTOKEN_API_KEYsk-your-taotoken-key-here export TAOTOKEN_MODELclaude-sonnet-4-20250514然后在 OpenClaw 的配置里引用这些环境变量{ provider: taotoken, baseUrl: ${TAOTOKEN_BASE_URL}, apiKey: ${TAOTOKEN_API_KEY}, model: ${TAOTOKEN_MODEL} }环境变量的好处是 Key 不会进版本库适合团队协作或者多环境部署的场景。3.2 xfc-mermaid Skill 目录结构xfc-mermaid 的目录结构设计如下你可以在本地任意目录新建这个 Skill 项目xfc-mermaid/ ├── SKILL.md # 必填使用说明 元数据 ├── scripts/ # 必填可执行代码 │ ├── validate.mjs # 语法校验 │ ├── generate-link.mjs # 生成 Mermaid Live 可编辑链接 │ └── export-svg.mjs # 导出 SVG 文件 └── package.json # 必填代码版本配置SKILL.md是整个 Skill 的说明书需要写清楚用途、触发条件、工具调用方式和输入输出规则。scripts/目录下放三个核心脚本分别负责校验、生成链接、导出 SVG。package.json里声明依赖主要是 Mermaid 相关的解析和渲染库。3.3 绘图 Agent SOUL.md 路由规则绘图 Agent 的 SOUL.md 需要定义清楚当用户请求生成业务图时Agent 应该怎么处理。下面是一个可复制的路由规则片段## 绘图 Agent 路由规则 当用户输入包含「画图」「流程图」「时序图」「甘特图」「业务图」等关键词时 1. 判断用户意图 - 如果用户想生成美食手账图调用 xiaohongshu-card-maker - 如果用户想解读图片调用 xfc-img-understand - 如果用户想生成业务图进入步骤 2 2. 生成 Mermaid 语法 - 调用模型通过 TaoToken 通道将用户描述转换为标准 Mermaid 代码 - 模型配置baseUrlhttps://taotoken.net/apimodelclaude-sonnet-4-20250514 3. 校验与导出 - 调用 xfc-mermaid/scripts/validate.mjs 校验语法 - 校验通过后调用 generate-link.mjs 生成可编辑链接 - 调用 export-svg.mjs 导出 SVG 文件 4. 返回结果 - 返回可编辑链接、SVG 下载链接、以及 Mermaid 源码这个路由规则的核心逻辑是先判断意图再生成代码最后校验导出。把这三步拆开写清楚Agent 在执行的时候就不会跳步或者乱序。3.4 三个核心脚本的关键代码validate.mjs负责语法校验核心逻辑是调用 Mermaid 的解析器检查代码是否合法import { validateMermaid } from xfc-mermaid-core; import { printJson } from ./utils.mjs; const code process.argv[2]; const config JSON.parse(process.argv[3] || {}); await validateMermaid(code, config); printJson({ ok: true, valid: true, config });generate-link.mjs负责生成 Mermaid Live 可编辑链接import { buildState, serializeState, buildLinks } from xfc-mermaid-core; import { printJson } from ./utils.mjs; const code process.argv[2]; const config JSON.parse(process.argv[3] || {}); const state buildState({ code, config }); const token serializeState(state, pako); const links buildLinks({ token, baseUrl: https://mermaid.live, mode: both }); printJson({ ok: true, token, state, ...links });export-svg.mjs负责导出 SVG 文件import { renderMermaidSvg, writeOutputFile } from xfc-mermaid-core; import { printJson } from ./utils.mjs; const code process.argv[2]; const outputPath process.argv[3]; const config JSON.parse(process.argv[4] || {}); const result await renderMermaidSvg(code, config); if (outputPath) { await writeOutputFile(outputPath, result.svg); } printJson({ ok: true, svg: result.svg, outputPath });这三个脚本的共同点是输入输出都是 JSON方便 Agent 解析和串联。validate.mjs输出校验结果generate-link.mjs输出链接和 tokenexport-svg.mjs输出 SVG 内容或文件路径。Agent 拿到这些结构化结果之后可以按需返回给用户。配置写完之后建议先单独跑一遍validate.mjs确认 Mermaid 代码能通过校验。如果校验失败说明模型生成的语法有问题需要调整 prompt 或者降低 temperature。校验通过之后再跑generate-link.mjs和export-svg.mjs确认链接和 SVG 都能正常生成。4. 验证请求从一句话到 Mermaid 流程图输出的完整实测配置写完接下来就是实际跑一遍验证。我会用一个具体的例子从输入指令开始到最终拿到可编辑链接和 SVG 文件结束把每一步的结果都展示出来。4.1 输入指令在 OpenClaw 的绘图 Agent 对话框里输入以下指令请帮我画一个用户登录流程图包含以下步骤 1. 用户输入账号密码 2. 前端校验格式 3. 发送请求到后端 4. 后端验证用户信息 5. 如果验证成功生成 token 返回 6. 如果失败返回错误信息 7. 前端根据结果跳转页面或显示错误这条指令的特点是步骤清晰、有分支逻辑成功/失败、有明确的起止点。模型需要把这些自然语言描述转换成 Mermaid 的flowchart TD语法并且正确处理条件分支。4.2 模型生成的 Mermaid 代码Agent 通过 TaoToken 通道调用模型后生成的 Mermaid 代码如下flowchart TD A[用户输入账号密码] -- B[前端校验格式] B -- C{格式是否正确} C --|否| D[提示格式错误] C --|是| E[发送请求到后端] E -- F[后端验证用户信息] F -- G{验证是否成功} G --|是| H[生成 token 返回] G --|否| I[返回错误信息] H -- J[前端跳转页面] I -- K[前端显示错误]这段代码的结构是从用户输入开始经过前端校验、后端验证最后根据验证结果分支到成功或失败路径。Mermaid 的{}表示判断节点--|是|和--|否|表示条件分支的标签。4.3 语法校验把生成的 Mermaid 代码传给validate.mjs做校验node scripts/validate.mjs flowchart TD A[用户输入账号密码] -- B[前端校验格式] B -- C{格式是否正确} C --|否| D[提示格式错误] C --|是| E[发送请求到后端] E -- F[后端验证用户信息] F -- G{验证是否成功} G --|是| H[生成 token 返回] G --|否| I[返回错误信息] H -- J[前端跳转页面] I -- K[前端显示错误]校验通过后输出{ ok: true, valid: true, config: {} }如果校验失败输出会包含具体的错误信息比如「Unknown diagram type」或者「Parse error on line 3」。这时候需要把错误信息返回给模型让它重新生成。4.4 生成可编辑链接校验通过后调用generate-link.mjs生成 Mermaid Live 可编辑链接node scripts/generate-link.mjs flowchart TD A[用户输入账号密码] -- B[前端校验格式] ...输出结果包含 token 和链接{ ok: true, token: pako:..., state: {...}, editUrl: https://mermaid.live/edit#pako:..., viewUrl: https://mermaid.live/view#pako:... }点击editUrl可以直接进入 Mermaid Live 编辑器修改节点文字、调整连线、改变布局。点击viewUrl可以查看只读版本的流程图。4.5 导出 SVG 文件最后调用export-svg.mjs导出 SVGnode scripts/export-svg.mjs flowchart TD A[用户输入账号密码] -- B[前端校验格式] ... ./output/login-flow.svg输出结果{ ok: true, svg: svg.../svg, outputPath: ./output/login-flow.svg }打开login-flow.svg文件可以看到渲染好的流程图。SVG 格式的好处是矢量图放大不会模糊可以直接插入到文档、PPT 或者网页里。4.6 实测结果整个链路跑下来从输入指令到拿到 SVG 文件耗时大约 8 秒。其中模型生成 Mermaid 代码占 5 秒校验和导出占 3 秒。生成的流程图结构正确条件分支清晰节点文字没有乱码。如果你想让流程图更美观可以在 Mermaid 代码里加样式配置比如flowchart TD A[用户输入账号密码] -- B[前端校验格式] B -- C{格式是否正确} C --|否| D[提示格式错误] C --|是| E[发送请求到后端] E -- F[后端验证用户信息] F -- G{验证是否成功} G --|是| H[生成 token 返回] G --|否| I[返回错误信息] H -- J[前端跳转页面] I -- K[前端显示错误] style A fill:#e1f5fe style H fill:#c8e6c9 style I fill:#ffcdd2加上style之后起始节点、成功节点、失败节点会有不同的背景色视觉上更容易区分。5. 常见报错排查401、local proxy failed、reading choices、OAuth 对照解决配置和验证过程中最容易遇到的报错集中在鉴权、网络、响应解析这几个环节。下面按报错类型逐一对照给出排查思路和解决方法。5.1 401 Unauthorized报错信息{ error: { code: 401, message: Unauthorized: invalid api key } }原因TaoToken 的 API Key 无效、过期或者填错了。排查步骤第一检查config/model.json里的apiKey字段是否和 TaoToken 控制台创建的 Key 一致。注意不要有多余的空格或者换行。第二确认 Key 没有过期。TaoToken 控制台的 API Keys 页面可以看到每个 Key 的创建时间和状态。第三如果用的是环境变量确认环境变量已经正确导出。可以在终端里执行echo $TAOTOKEN_API_KEY检查。第四确认 Base URL 填的是https://taotoken.net/api不要填成其他地址。5.2 local proxy failed报错信息Error: local proxy failed: connect ECONNREFUSED 127.0.0.1:7890原因OpenClaw 或者底层 HTTP 客户端配置了本地代理但代理服务没有启动。排查步骤第一检查环境变量里是否有HTTP_PROXY或HTTPS_PROXY指向本地端口。如果有确认对应的代理服务是否在运行。第二如果不需要代理直接取消这些环境变量unset HTTP_PROXY unset HTTPS_PROXY第三检查 OpenClaw 的配置文件里是否有代理相关的设置。有些版本的 OpenClaw 会在config/network.json里单独配置代理。第四确认 TaoToken 的 API 地址可以直接访问。可以在终端里执行curl -I https://taotoken.net/api测试连通性。5.3 reading choices 报错报错信息TypeError: Cannot read properties of undefined (reading choices)原因模型返回的响应结构不符合预期通常是 Base URL 或者请求路径拼错了。排查步骤第一确认 Base URL 是https://taotoken.net/api不要多加/v1或者/chat之类的路径。TaoToken 的 API 会自动处理路径拼接。第二检查请求的 model ID 是否正确。如果 model ID 填错了有些服务商会返回错误结构导致解析choices字段时失败。第三在代码里打印完整的响应内容看看实际返回的是什么const response await fetch(url, options); const data await response.json(); console.log(JSON.stringify(data, null, 2));第四如果响应里包含error字段优先处理错误信息而不是直接读choices。5.4 OAuth 相关报错报错信息Error: OAuth token expired or invalid原因如果你用的是 OAuth 方式的鉴权token 可能过期了。排查步骤第一确认你用的是 API Key 方式还是 OAuth 方式。TaoToken 支持 API Key 直接鉴权如果你在配置里填的是 OAuth token需要重新获取。第二如果确实需要用 OAuth检查 token 的有效期重新走一遍授权流程。第三建议直接改用 API Key 方式配置更简单不需要处理 token 刷新。5.5 Mermaid 语法校验失败报错信息{ ok: false, valid: false, error: Parse error on line 3: Expecting SEMI, NEWLINE, got EOF }原因模型生成的 Mermaid 代码有语法错误比如缺少换行、节点定义不完整、箭头方向写错。排查步骤第一把模型生成的 Mermaid 代码复制到 Mermaid Live 编辑器里看看具体哪一行报错。第二检查节点定义是否完整。比如A[用户输入]这种写法方括号必须成对出现。第三检查箭头方向。--表示实线箭头-.-表示虚线箭头表示粗箭头。写错了会导致解析失败。第四如果模型频繁生成错误语法可以在 prompt 里加一句「请确保生成的 Mermaid 代码符合 flowchart TD 语法规范节点定义完整箭头方向正确」。5.6 导出 SVG 时文件写入失败报错信息Error: ENOENT: no such file or directory, open ./output/login-flow.svg原因输出目录不存在。排查步骤第一确认./output/目录已经创建。可以在脚本里加一行自动创建目录的逻辑import { mkdir } from fs/promises; await mkdir(./output, { recursive: true });第二检查文件路径是否有写权限。如果是在服务器上运行确认当前用户对目标目录有写入权限。第三如果路径里包含特殊字符建议用绝对路径代替相对路径。6. 长期编码与 Agent 工作流TaoToken Coding Plan 与接入文档把 OpenClaw xfc-mermaid 跑通之后你可能会想把这套能力扩展到更多场景。比如让 Agent 自动生成时序图、甘特图、状态图或者把绘图能力集成到 CI/CD 流程里每次代码合并自动更新架构图。这些扩展场景对模型调用的稳定性和额度要求更高单次按量付费的方式可能不够划算。TaoToken 的 Coding Plan 就是为这种长期编码和 Agent 工作流设计的。它提供固定的月度额度适合需要频繁调用模型能力的场景。你可以把 OpenClaw 的多个 Agent 都接到同一个 Coding Plan 下统一管理额度不用每个 Agent 单独充值。如果你需要查看完整的 API 接入文档包括支持的模型列表、请求参数说明、错误码对照可以访问 TaoToken 的接入文档页面。文档里详细列出了每个接口的请求格式和响应结构方便你在自定义脚本里直接调用。对于需要验证模型效果的场景比如你想对比不同模型生成 Mermaid 代码的质量可以用 TaoToken 的模型对话页面快速测试。输入同样的 prompt切换不同的模型看看哪个生成的流程图结构更准确、排版更清晰。如果你打算把绘图 Agent 的能力开放给团队成员使用建议在 TaoToken 控制台里为每个成员创建独立的 API Key这样既能追踪每个人的调用量又能在出现问题时快速定位到具体的 Key。控制台的 API Keys 管理页面支持创建、禁用、删除 Key操作起来比较灵活。回到 OpenClaw xfc-mermaid 这套方案本身它的核心价值不在于「画一张图」而在于把「自然语言生成业务图」这项能力沉淀成了一个可复用的 Skill。你可以把这个 Skill 挂到不同的 Agent 上让写作 Agent 自动生成文章配图让运维 Agent 自动生成架构图让产品 Agent 自动生成流程图。每次调用都走 TaoToken 的统一通道Key 管理集中额度监控清晰切换模型不用改多处配置。实际用下来这套方案最适合的场景是需要频繁生成业务图、但不想在绘图工具上花太多时间的团队。如果你只是偶尔画一两张图手动拖拽可能更快。但如果你每天都要输出流程图、架构图、时序图把这件事交给 Agent 自动化省下来的时间足够你多写几篇技术方案。
1. 从一句话到业务图OpenClaw Skill 自动生成 Mermaid 的真实场景一句话生成业务流程图这件事听起来像是产品经理的幻想但实际落地之后你会发现它解决的是一个非常具体的痛点画图的时间成本远高于思考流程本身。我平时写技术方案、梳理系统架构、给团队讲业务链路最耗时的环节往往不是想清楚逻辑而是打开绘图工具、拖拽节点、调整连线、对齐排版。等图画完思路已经凉了一半。OpenClaw 结合 Skill 的思路本质上是把「自然语言 → Mermaid 代码 → 可编辑链接 / SVG 文件」这条链路封装成一个 Agent 可以反复调用的标准能力。你只需要对 Agent 说一句「帮我画一个用户登录流程图包含账号密码校验、后端验证、token 返回、失败跳转」它就能自动生成对应的 Mermaid 语法校验通过后输出可编辑链接和可下载的 SVG 图片。整个过程不需要你手动写一行 Mermaid 代码。但这里有一个容易被忽略的问题多工具调用时的 Key 分散和鉴权混乱。OpenClaw 的绘图 Agent 在生成 Mermaid 之后可能需要调用模型做语法校验、调用渲染服务导出 SVG、调用存储服务保存文件。如果每个环节都单独配置一套 API Key不仅管理麻烦还容易出现某个 Key 过期导致整条链路断掉的情况。我试过在三个不同的 Skill 里分别填 Key结果调试的时候花了半小时才定位到是其中一个 Key 的额度用完了。所以这篇文章的重点不只是「怎么让 OpenClaw 画出 Mermaid 图」而是怎么用 TaoToken 统一 Key 接入版把整条链路的鉴权收口到一个地方。TaoToken 提供统一的 API 通道你只需要在配置里填一次 Base URL 和 KeyOpenClaw 的绘图 Agent 就能通过这个通道调用模型能力完成从自然语言解析到 Mermaid 代码生成的全过程。这样做的直接好处是Key 管理集中、额度监控清晰、切换模型不用改多处配置。适合谁看如果你正在用 OpenClaw 搭建多 Agent 工作流或者你手头有多个 Skill 需要调用模型能力但不想每个都配一遍 Key这篇文章的配置片段可以直接复制落地。如果你只是想试试「一句话出流程图」的效果跟着第 3 节的配置走一遍十分钟内就能看到结果。2. TaoToken 统一 Key 接入OpenClaw Skill 鉴权收口的前置准备在正式配置之前先把 TaoToken 的定位说清楚。TaoToken 是一个面向开发者的 API 统一接入平台它把多家模型服务商的接口收敛成一套标准的 Base URL 和 Key 体系。对于 OpenClaw 这种需要频繁调用模型能力的 Agent 框架来说这意味着你不需要在 Skill 里硬编码多个服务商的 Key只需要指向 TaoToken 的 API 地址用同一个 Key 完成所有模型调用。具体到 OpenClaw Skill 生成 Mermaid 业务图的场景TaoToken 承担的角色是模型调用通道。绘图 Agent 在接收到自然语言指令后需要调用模型把「用户登录流程图包含账号密码校验、后端验证、token 返回」这样的描述转换成标准的 Mermaid 语法。这个转换过程就是通过 TaoToken 的 API 完成的。生成 Mermaid 代码之后Skill 里的 validate.mjs 会做语法校验generate-link.mjs 会生成 Mermaid Live 可编辑链接export-svg.mjs 会导出 SVG 文件。这三个脚本本身不直接调用模型但它们依赖的 Mermaid 代码质量取决于模型通过 TaoToken 生成的结果是否准确。所以前置准备其实就两件事拿到 TaoToken 的 API Key确认 OpenClaw 的配置文件位置。先说 Key。你需要访问 TaoToken 的 API Keys 管理页面创建一个新的 Key。创建的时候建议给 Key 起一个能识别用途的名字比如openclaw-mermaid-skill这样后面如果有多条业务线共用同一个账号排查问题时能快速定位。Key 创建后会显示一次复制下来保存好后面配置里要用。再说配置文件。OpenClaw 的模型接入配置通常放在项目根目录的config文件夹或者环境变量文件里。如果你用的是 OpenClaw 的默认结构模型相关的配置一般在config/model.json或者.env文件中。具体路径取决于你的 OpenClaw 版本和部署方式但核心逻辑是一样的找到模型调用的 Base URL 和 API Key 字段把它们替换成 TaoToken 的地址和你的 Key。这里有一个容易踩的坑Base URL 的结尾不要带多余的斜杠。TaoToken 的 API 地址是https://taotoken.net/api如果你在配置里写成https://taotoken.net/api/有些 HTTP 客户端会把路径拼成//v1/chat/completions导致 404。这个细节在后面的排错章节会再展开。另外如果你打算把 xfc-mermaid 这个 Skill 集成到 OpenClaw 的绘图 Agent 里建议先确认 Agent 的 SOUL.md 文件位置。SOUL.md 是 OpenClaw Agent 的「灵魂文件」里面定义了 Agent 的角色、可用工具、调用规则。绘图 Agent 的 SOUL.md 需要明确写出当用户请求生成业务图时先调用模型生成 Mermaid 语法再调用 xfc-mermaid 的脚本做校验和导出。这个判断逻辑写清楚之后Agent 才能正确路由请求。前置准备做到这里就够了。你不需要提前安装 Mermaid 的本地渲染环境也不需要配置额外的图形库。xfc-mermaid 的脚本会处理渲染和导出你只需要保证 TaoToken 的 Key 有效、Base URL 正确、OpenClaw 能正常读取配置。3. 可复制配置OpenClaw 接入 TaoToken 与 xfc-mermaid Skill 的完整片段这一节直接给可复制的配置片段。我会按「TaoToken 模型接入配置 → xfc-mermaid Skill 目录结构 → 绘图 Agent SOUL.md 路由规则」的顺序展开每一步都给出具体的文件路径和内容。你照着填就行不需要额外改逻辑。3.1 TaoToken 模型接入配置OpenClaw 的模型配置通常放在config/model.json或者通过环境变量注入。下面给出两种方式的配置片段你根据自己项目的实际情况选一种。方式一JSON 配置文件{ provider: taotoken, baseUrl: https://taotoken.net/api, apiKey: sk-your-taotoken-key-here, model: claude-sonnet-4-20250514, maxTokens: 4096, temperature: 0.3 }这里有几个参数需要说明。baseUrl填 TaoToken 的 API 地址注意结尾不要加斜杠。apiKey填你在 TaoToken 控制台创建的 Key。model填你要调用的模型 ID具体支持哪些模型可以在 TaoToken 的文档页面查看。temperature建议设低一点因为 Mermaid 语法生成需要稳定性太高的温度会导致同样的指令每次生成的代码结构差异很大。方式二环境变量如果你不想把 Key 写在配置文件里可以用环境变量export TAOTOKEN_BASE_URLhttps://taotoken.net/api export TAOTOKEN_API_KEYsk-your-taotoken-key-here export TAOTOKEN_MODELclaude-sonnet-4-20250514然后在 OpenClaw 的配置里引用这些环境变量{ provider: taotoken, baseUrl: ${TAOTOKEN_BASE_URL}, apiKey: ${TAOTOKEN_API_KEY}, model: ${TAOTOKEN_MODEL} }环境变量的好处是 Key 不会进版本库适合团队协作或者多环境部署的场景。3.2 xfc-mermaid Skill 目录结构xfc-mermaid 的目录结构设计如下你可以在本地任意目录新建这个 Skill 项目xfc-mermaid/ ├── SKILL.md # 必填使用说明 元数据 ├── scripts/ # 必填可执行代码 │ ├── validate.mjs # 语法校验 │ ├── generate-link.mjs # 生成 Mermaid Live 可编辑链接 │ └── export-svg.mjs # 导出 SVG 文件 └── package.json # 必填代码版本配置SKILL.md是整个 Skill 的说明书需要写清楚用途、触发条件、工具调用方式和输入输出规则。scripts/目录下放三个核心脚本分别负责校验、生成链接、导出 SVG。package.json里声明依赖主要是 Mermaid 相关的解析和渲染库。3.3 绘图 Agent SOUL.md 路由规则绘图 Agent 的 SOUL.md 需要定义清楚当用户请求生成业务图时Agent 应该怎么处理。下面是一个可复制的路由规则片段## 绘图 Agent 路由规则 当用户输入包含「画图」「流程图」「时序图」「甘特图」「业务图」等关键词时 1. 判断用户意图 - 如果用户想生成美食手账图调用 xiaohongshu-card-maker - 如果用户想解读图片调用 xfc-img-understand - 如果用户想生成业务图进入步骤 2 2. 生成 Mermaid 语法 - 调用模型通过 TaoToken 通道将用户描述转换为标准 Mermaid 代码 - 模型配置baseUrlhttps://taotoken.net/apimodelclaude-sonnet-4-20250514 3. 校验与导出 - 调用 xfc-mermaid/scripts/validate.mjs 校验语法 - 校验通过后调用 generate-link.mjs 生成可编辑链接 - 调用 export-svg.mjs 导出 SVG 文件 4. 返回结果 - 返回可编辑链接、SVG 下载链接、以及 Mermaid 源码这个路由规则的核心逻辑是先判断意图再生成代码最后校验导出。把这三步拆开写清楚Agent 在执行的时候就不会跳步或者乱序。3.4 三个核心脚本的关键代码validate.mjs负责语法校验核心逻辑是调用 Mermaid 的解析器检查代码是否合法import { validateMermaid } from xfc-mermaid-core; import { printJson } from ./utils.mjs; const code process.argv[2]; const config JSON.parse(process.argv[3] || {}); await validateMermaid(code, config); printJson({ ok: true, valid: true, config });generate-link.mjs负责生成 Mermaid Live 可编辑链接import { buildState, serializeState, buildLinks } from xfc-mermaid-core; import { printJson } from ./utils.mjs; const code process.argv[2]; const config JSON.parse(process.argv[3] || {}); const state buildState({ code, config }); const token serializeState(state, pako); const links buildLinks({ token, baseUrl: https://mermaid.live, mode: both }); printJson({ ok: true, token, state, ...links });export-svg.mjs负责导出 SVG 文件import { renderMermaidSvg, writeOutputFile } from xfc-mermaid-core; import { printJson } from ./utils.mjs; const code process.argv[2]; const outputPath process.argv[3]; const config JSON.parse(process.argv[4] || {}); const result await renderMermaidSvg(code, config); if (outputPath) { await writeOutputFile(outputPath, result.svg); } printJson({ ok: true, svg: result.svg, outputPath });这三个脚本的共同点是输入输出都是 JSON方便 Agent 解析和串联。validate.mjs输出校验结果generate-link.mjs输出链接和 tokenexport-svg.mjs输出 SVG 内容或文件路径。Agent 拿到这些结构化结果之后可以按需返回给用户。配置写完之后建议先单独跑一遍validate.mjs确认 Mermaid 代码能通过校验。如果校验失败说明模型生成的语法有问题需要调整 prompt 或者降低 temperature。校验通过之后再跑generate-link.mjs和export-svg.mjs确认链接和 SVG 都能正常生成。4. 验证请求从一句话到 Mermaid 流程图输出的完整实测配置写完接下来就是实际跑一遍验证。我会用一个具体的例子从输入指令开始到最终拿到可编辑链接和 SVG 文件结束把每一步的结果都展示出来。4.1 输入指令在 OpenClaw 的绘图 Agent 对话框里输入以下指令请帮我画一个用户登录流程图包含以下步骤 1. 用户输入账号密码 2. 前端校验格式 3. 发送请求到后端 4. 后端验证用户信息 5. 如果验证成功生成 token 返回 6. 如果失败返回错误信息 7. 前端根据结果跳转页面或显示错误这条指令的特点是步骤清晰、有分支逻辑成功/失败、有明确的起止点。模型需要把这些自然语言描述转换成 Mermaid 的flowchart TD语法并且正确处理条件分支。4.2 模型生成的 Mermaid 代码Agent 通过 TaoToken 通道调用模型后生成的 Mermaid 代码如下flowchart TD A[用户输入账号密码] -- B[前端校验格式] B -- C{格式是否正确} C --|否| D[提示格式错误] C --|是| E[发送请求到后端] E -- F[后端验证用户信息] F -- G{验证是否成功} G --|是| H[生成 token 返回] G --|否| I[返回错误信息] H -- J[前端跳转页面] I -- K[前端显示错误]这段代码的结构是从用户输入开始经过前端校验、后端验证最后根据验证结果分支到成功或失败路径。Mermaid 的{}表示判断节点--|是|和--|否|表示条件分支的标签。4.3 语法校验把生成的 Mermaid 代码传给validate.mjs做校验node scripts/validate.mjs flowchart TD A[用户输入账号密码] -- B[前端校验格式] B -- C{格式是否正确} C --|否| D[提示格式错误] C --|是| E[发送请求到后端] E -- F[后端验证用户信息] F -- G{验证是否成功} G --|是| H[生成 token 返回] G --|否| I[返回错误信息] H -- J[前端跳转页面] I -- K[前端显示错误]校验通过后输出{ ok: true, valid: true, config: {} }如果校验失败输出会包含具体的错误信息比如「Unknown diagram type」或者「Parse error on line 3」。这时候需要把错误信息返回给模型让它重新生成。4.4 生成可编辑链接校验通过后调用generate-link.mjs生成 Mermaid Live 可编辑链接node scripts/generate-link.mjs flowchart TD A[用户输入账号密码] -- B[前端校验格式] ...输出结果包含 token 和链接{ ok: true, token: pako:..., state: {...}, editUrl: https://mermaid.live/edit#pako:..., viewUrl: https://mermaid.live/view#pako:... }点击editUrl可以直接进入 Mermaid Live 编辑器修改节点文字、调整连线、改变布局。点击viewUrl可以查看只读版本的流程图。4.5 导出 SVG 文件最后调用export-svg.mjs导出 SVGnode scripts/export-svg.mjs flowchart TD A[用户输入账号密码] -- B[前端校验格式] ... ./output/login-flow.svg输出结果{ ok: true, svg: svg.../svg, outputPath: ./output/login-flow.svg }打开login-flow.svg文件可以看到渲染好的流程图。SVG 格式的好处是矢量图放大不会模糊可以直接插入到文档、PPT 或者网页里。4.6 实测结果整个链路跑下来从输入指令到拿到 SVG 文件耗时大约 8 秒。其中模型生成 Mermaid 代码占 5 秒校验和导出占 3 秒。生成的流程图结构正确条件分支清晰节点文字没有乱码。如果你想让流程图更美观可以在 Mermaid 代码里加样式配置比如flowchart TD A[用户输入账号密码] -- B[前端校验格式] B -- C{格式是否正确} C --|否| D[提示格式错误] C --|是| E[发送请求到后端] E -- F[后端验证用户信息] F -- G{验证是否成功} G --|是| H[生成 token 返回] G --|否| I[返回错误信息] H -- J[前端跳转页面] I -- K[前端显示错误] style A fill:#e1f5fe style H fill:#c8e6c9 style I fill:#ffcdd2加上style之后起始节点、成功节点、失败节点会有不同的背景色视觉上更容易区分。5. 常见报错排查401、local proxy failed、reading choices、OAuth 对照解决配置和验证过程中最容易遇到的报错集中在鉴权、网络、响应解析这几个环节。下面按报错类型逐一对照给出排查思路和解决方法。5.1 401 Unauthorized报错信息{ error: { code: 401, message: Unauthorized: invalid api key } }原因TaoToken 的 API Key 无效、过期或者填错了。排查步骤第一检查config/model.json里的apiKey字段是否和 TaoToken 控制台创建的 Key 一致。注意不要有多余的空格或者换行。第二确认 Key 没有过期。TaoToken 控制台的 API Keys 页面可以看到每个 Key 的创建时间和状态。第三如果用的是环境变量确认环境变量已经正确导出。可以在终端里执行echo $TAOTOKEN_API_KEY检查。第四确认 Base URL 填的是https://taotoken.net/api不要填成其他地址。5.2 local proxy failed报错信息Error: local proxy failed: connect ECONNREFUSED 127.0.0.1:7890原因OpenClaw 或者底层 HTTP 客户端配置了本地代理但代理服务没有启动。排查步骤第一检查环境变量里是否有HTTP_PROXY或HTTPS_PROXY指向本地端口。如果有确认对应的代理服务是否在运行。第二如果不需要代理直接取消这些环境变量unset HTTP_PROXY unset HTTPS_PROXY第三检查 OpenClaw 的配置文件里是否有代理相关的设置。有些版本的 OpenClaw 会在config/network.json里单独配置代理。第四确认 TaoToken 的 API 地址可以直接访问。可以在终端里执行curl -I https://taotoken.net/api测试连通性。5.3 reading choices 报错报错信息TypeError: Cannot read properties of undefined (reading choices)原因模型返回的响应结构不符合预期通常是 Base URL 或者请求路径拼错了。排查步骤第一确认 Base URL 是https://taotoken.net/api不要多加/v1或者/chat之类的路径。TaoToken 的 API 会自动处理路径拼接。第二检查请求的 model ID 是否正确。如果 model ID 填错了有些服务商会返回错误结构导致解析choices字段时失败。第三在代码里打印完整的响应内容看看实际返回的是什么const response await fetch(url, options); const data await response.json(); console.log(JSON.stringify(data, null, 2));第四如果响应里包含error字段优先处理错误信息而不是直接读choices。5.4 OAuth 相关报错报错信息Error: OAuth token expired or invalid原因如果你用的是 OAuth 方式的鉴权token 可能过期了。排查步骤第一确认你用的是 API Key 方式还是 OAuth 方式。TaoToken 支持 API Key 直接鉴权如果你在配置里填的是 OAuth token需要重新获取。第二如果确实需要用 OAuth检查 token 的有效期重新走一遍授权流程。第三建议直接改用 API Key 方式配置更简单不需要处理 token 刷新。5.5 Mermaid 语法校验失败报错信息{ ok: false, valid: false, error: Parse error on line 3: Expecting SEMI, NEWLINE, got EOF }原因模型生成的 Mermaid 代码有语法错误比如缺少换行、节点定义不完整、箭头方向写错。排查步骤第一把模型生成的 Mermaid 代码复制到 Mermaid Live 编辑器里看看具体哪一行报错。第二检查节点定义是否完整。比如A[用户输入]这种写法方括号必须成对出现。第三检查箭头方向。--表示实线箭头-.-表示虚线箭头表示粗箭头。写错了会导致解析失败。第四如果模型频繁生成错误语法可以在 prompt 里加一句「请确保生成的 Mermaid 代码符合 flowchart TD 语法规范节点定义完整箭头方向正确」。5.6 导出 SVG 时文件写入失败报错信息Error: ENOENT: no such file or directory, open ./output/login-flow.svg原因输出目录不存在。排查步骤第一确认./output/目录已经创建。可以在脚本里加一行自动创建目录的逻辑import { mkdir } from fs/promises; await mkdir(./output, { recursive: true });第二检查文件路径是否有写权限。如果是在服务器上运行确认当前用户对目标目录有写入权限。第三如果路径里包含特殊字符建议用绝对路径代替相对路径。6. 长期编码与 Agent 工作流TaoToken Coding Plan 与接入文档把 OpenClaw xfc-mermaid 跑通之后你可能会想把这套能力扩展到更多场景。比如让 Agent 自动生成时序图、甘特图、状态图或者把绘图能力集成到 CI/CD 流程里每次代码合并自动更新架构图。这些扩展场景对模型调用的稳定性和额度要求更高单次按量付费的方式可能不够划算。TaoToken 的 Coding Plan 就是为这种长期编码和 Agent 工作流设计的。它提供固定的月度额度适合需要频繁调用模型能力的场景。你可以把 OpenClaw 的多个 Agent 都接到同一个 Coding Plan 下统一管理额度不用每个 Agent 单独充值。如果你需要查看完整的 API 接入文档包括支持的模型列表、请求参数说明、错误码对照可以访问 TaoToken 的接入文档页面。文档里详细列出了每个接口的请求格式和响应结构方便你在自定义脚本里直接调用。对于需要验证模型效果的场景比如你想对比不同模型生成 Mermaid 代码的质量可以用 TaoToken 的模型对话页面快速测试。输入同样的 prompt切换不同的模型看看哪个生成的流程图结构更准确、排版更清晰。如果你打算把绘图 Agent 的能力开放给团队成员使用建议在 TaoToken 控制台里为每个成员创建独立的 API Key这样既能追踪每个人的调用量又能在出现问题时快速定位到具体的 Key。控制台的 API Keys 管理页面支持创建、禁用、删除 Key操作起来比较灵活。回到 OpenClaw xfc-mermaid 这套方案本身它的核心价值不在于「画一张图」而在于把「自然语言生成业务图」这项能力沉淀成了一个可复用的 Skill。你可以把这个 Skill 挂到不同的 Agent 上让写作 Agent 自动生成文章配图让运维 Agent 自动生成架构图让产品 Agent 自动生成流程图。每次调用都走 TaoToken 的统一通道Key 管理集中额度监控清晰切换模型不用改多处配置。实际用下来这套方案最适合的场景是需要频繁生成业务图、但不想在绘图工具上花太多时间的团队。如果你只是偶尔画一两张图手动拖拽可能更快。但如果你每天都要输出流程图、架构图、时序图把这件事交给 Agent 自动化省下来的时间足够你多写几篇技术方案。
