用嘴画图：TaoToken 一句话生成架构图流程图（Draw.io/Mermaid）

1. 为什么我放弃了手动拖拽画架构图如果你写过技术方案、交付过项目、维护过 PRD大概率经历过这样的循环打开 Draw.io拖几个方框调对齐改连线导出 PNG过两天需求变了再打开源文件重来一遍。图越复杂返工成本越高最后干脆在文档里写一句“架构见附件”附件还是三个月前的版本。“用嘴画图”要解决的就是这个循环。它的核心不是让 AI 直接吐一张 PNG而是让 AI 生成图表的代码中间态——Mermaid 文本或 Draw.io 的 XML再由渲染器出图。这样做有三个直接好处图表可以进 Git 做版本管理改需求时改的是几行文本而不是拖半小时的框同一段描述还能同时输出流程图、时序图、架构图。适合谁上手后端和全栈开发者画系统架构、部署图、时序图产品经理画业务流程图和功能结构图技术写作者给文档配图。你不需要会写 Mermaid 语法但需要一条稳定的模型调用通道把“一句话描述”变成“可渲染的图表代码”。这篇就以 TaoToken 作为统一 Key/API 通道把 Mermaid 和 Draw.io 两条落地路径走通从描述到出图完整复现一遍。2. TaoToken 前置一条 Key 打通画图链路画图这件事对模型的要求和写代码不太一样它需要模型稳定输出结构化文本Mermaid 的缩进、箭头方向、节点 ID 一旦错一个字符渲染就报错。所以通道的稳定性比“模型多聪明”更关键。TaoToken 在这里的角色是统一入口。你不需要为不同工具分别配 Key也不用在多个客户端之间来回切换配置。它的 API 地址是https://taotoken.net/api兼容常见的 OpenAI 风格调用方式模型对话、Coding Plan、API Keys 管理都在同一个控制台里完成。具体来说画图链路里你会用到三块模型对话用于快速试提示词把“帮我画个登录流程图”调成能稳定出 Mermaid 的表述API Keys 用于把 Key 填进本地脚本或编辑器插件Coding Plan 适合长期做图表自动化、把出图接进 CI 或文档流水线的场景。注册和拿 Key 的入口在这里官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content控制台在https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 管理页在https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite。拿到 Key 之后下面所有配置都围绕它展开。注意Key 只存在本地环境变量或客户端的密钥管理里不要写进会提交到仓库的配置文件。图表代码可以进 GitKey 不行。3. 可复制配置Mermaid 骨架与 Draw.io 导入3.1 用 curl 验证通道能出 Mermaid先不急着配编辑器用一条命令确认通道通、模型能按格式返回。把 Key 放进环境变量export TAOTOKEN_API_KEY你的Key然后发一个最小请求让它只输出 Mermaid 代码不要解释curl https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: claude-sonnet-4-20250514, messages: [ { role: user, content: 只输出 Mermaid 代码不要任何解释和 markdown 围栏。画一个用户登录流程图用户输入账号密码 - 前端校验格式 - 请求后端 - 后端验证 - 成功生成 token 跳转失败返回错误。 } ] }模型名按你控制台里可用的填。实测下来把“只输出代码、不要围栏”写进提示词能省掉后面手动删mermaid的步骤。返回内容里应该是一段以flowchart TD或graph TD开头的文本。3.2 Mermaid 代码骨架把返回的文本存成login.mmd标准骨架长这样你可以直接对照检查结构flowchart TD A[用户输入账号密码] -- B[前端校验格式] B --|格式通过| C[发送请求到后端] B --|格式错误| F[前端提示错误] C -- D[后端验证用户信息] D --|验证成功| E[生成 token] D --|验证失败| F E -- G[前端跳转首页] F -- H[前端报错提示]节点 IDA、B、C和方括号里的文案是两回事AI 有时会把中文直接当 ID渲染就崩。检查时重点看箭头方向和分支标签有没有丢。3.3 Draw.io 导入配置Draw.io 吃的是 XML。让模型输出 Draw.io 的 XML 时提示词要明确“输出 mxGraphModel 格式的 XML”curl https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: claude-sonnet-4-20250514, messages: [ { role: user, content: 只输出 Draw.io 可导入的 mxGraphModel XML不要解释。画一个分层架构图终端层手机和电脑接入层 Nginx业务层三个服务数据层 MySQL 和 Redis。 } ] }拿到 XML 后在 Draw.io 里走Extras - Edit Diagram把 XML 粘进去确认或者直接File - Import from - XML。导入后如果节点重叠用Arrange - Layout - Vertical Tree一键重排比手动拖快得多。提示Draw.io 的 XML 对坐标敏感AI 生成的x、y经常挤在一起。导入后先全选再执行一次自动布局基本能救回来。4. 验证请求从描述到出图的完整动作配置通了走一遍端到端。目标用一句话生成一张订单系统时序图并在本地渲染出来。第一步把描述写清楚。差的描述是“画个订单流程”好的描述包含参与者和交互顺序只输出 Mermaid 代码不要围栏和解释。画订单创建时序图参与者用户、订单服务、库存服务、支付服务。顺序用户提交订单 - 订单服务校验库存 - 库存服务锁定库存 - 订单服务创建订单 - 支付服务发起支付 - 返回结果。第二步把返回存成order.mmd用 Mermaid CLI 渲染成 SVGnpm install -g mermaid-js/mermaid-cli mmdc -i order.mmd -o order.svg成功的话终端会输出Generating single mermaid chart当前目录出现order.svg。打开确认参与者泳道和箭头顺序对不对。第三步同一段描述再让模型输出 Draw.io XML导入后对比两种载体的效果。Mermaid 适合快速迭代和嵌 MarkdownDraw.io 适合精修样式和交付给非技术同学。两条链路共用同一个 Key不用改任何认证配置。如果你只是想先看看模型对某段描述的理解对不对可以直接在模型对话里贴描述试不用每次都跑脚本https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite。确认提示词稳定了再固化到脚本里。5. 本篇常见错排查渲染报 “Parse error on line X”九成是节点文案里有特殊字符比如括号、冒号、引号没转义。Mermaid 里中文文案带括号要用引号包起来写成A[用户(已登录)]。让模型输出时加一句“节点文案含特殊字符时用双引号包裹”。Draw.io 导入后一片空白XML 根节点不是mxGraphModel或者被模型包了一层 markdown 围栏。检查返回内容第一个字符是不是不是就说明围栏没去干净在提示词里强调“不要 markdown 围栏”。401 或鉴权失败Key 没进环境变量或者Authorization头拼错。用echo $TAOTOKEN_API_KEY确认变量有值头格式是Bearer 空格 Key。如果是在编辑器插件里配注意别把https://taotoken.net/api写成带路径的完整 endpoint插件通常只需要 base URL。模型返回一堆解释不出代码提示词约束不够。把“只输出代码”放在开头并明确“不要任何解释、不要围栏、不要前后缀”。如果还不行在请求里加temperature: 0.2降低发散。Mermaid 渲染出来方向乱flowchart TD是上下LR是左右。时序图用sequenceDiagram别用 flowchart 硬画。让模型先声明图类型再写内容。长时间批量出图想省事如果要把出图接进文档流水线、每次提交自动更新架构图单次对话调用不够用可以看下 Coding Plan 的额度方案https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite适合这种持续调用的场景。6. 把画图接进你的工作流走到这里你已经有了两条可复制的链路Mermaid 负责快速迭代和版本管理Draw.io 负责精修和交付。真正让“用嘴画图”产生复利的是把提示词模板固化下来。我自己的做法是建一个prompts/目录把“登录流程图”“分层架构图”“订单时序图”各存一个模板文件脚本读模板加变量出图命令一行跑完。下一步可以试的方向把 Mermaid 渲染接进 CI每次合并请求自动更新docs/下的 SVG或者用 API 批量把老项目的架构描述转成图表代码一次性补齐文档。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有完整的接口说明和参数列表配 Key 和调模型时对着看能少踩不少坑。画图这件事从拖拽到说话省下的不只是时间更是让图表重新变得可维护。