★ FEATURED ARTICLE 1. 从“画图五分钟调格式两小时”说起如果你写过技术文档大概率经历过这种崩溃架构图画完产品经理说“这个模块往左挪一点”你打开绘图工具拖了十分钟导出图片贴进文档结果下次改需求又得重来一遍。更别提多人协作时每个人用的工具不一样有人用 Visio有人用 draw.io有人直接截图最后文档里的图风格五花八门。AI 画图这件事核心不是让 AI 替你“画”而是让 AI 把自然语言描述转成可版本控制、可二次编辑的图形代码。PlantUML、Mermaid、Graphviz、SVG 这四种文本绘图方案正好覆盖了程序员日常最高频的四类需求时序交互、快速流程图、复杂依赖关系、高定制架构图。它们共同的优点是——图形即代码改一行文字就能重新渲染配合 Git 管理 diff 清晰可见。但问题来了这些图形代码的语法各有各的坑手写效率低让 AI 生成又得反复切换模型和工具。我试过在多个平台之间来回粘贴光是配置 API Key 和环境就耗掉不少时间。所以这篇内容聚焦一件事用 TaoToken 统一 Key/API 通道把四种画图链路一次性跑通。你只需要配好一份 settings.json 和 config.toml后面无论让 AI 生成 PlantUML 还是 SVG都走同一个入口。适合谁正在写技术文档的后端、需要画架构图的架构师、以及想用 AI 提效但不想折腾多平台配置的开发者。2. TaoToken 前置统一 Key 与 API 通道TaoToken 在这里扮演的角色是模型调用的统一网关。你不需要为每个 AI 工具单独申请 Key也不用在 Cursor、VS Code 插件、命令行工具之间反复切换配置。一个 Key一套 API 地址就能让 AI 帮你生成 PlantUML、Mermaid、Graphviz 和 SVG 代码。具体来说TaoToken 提供两类入口模型对话适合临时让 AI 生成一段图形代码粘贴即用不用装任何插件。地址是https://taotoken.net/api配合对话界面。Coding Plan适合长期在编辑器里做 AI 辅助编码比如让 AI 直接往你的.puml或.mmd文件里写内容。这个方案对频繁画图的场景更划算。你需要先拿到 API Key。操作路径很简单访问官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册后在控制台创建 Key。控制台地址是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。注意API 地址统一用https://taotoken.net/api不要加 UTM 参数避免部分客户端把查询字符串当成路径的一部分导致 404。拿到 Key 之后下面进入配置环节。我会给出两份配置骨架一份是 VS Code 的settings.json一份是命令行工具用的config.toml。你可以根据自己的工具链选其中一份也可以两份都配。3. 可复制配置settings.json 与 config.toml 骨架3.1 VS Code settings.json 配置如果你用 VS Code 配合 PlantUML 插件或 Mermaid 预览插件可以在settings.json里把 AI 补全的 API 指向 TaoToken。下面这份配置以 PlantUML 插件为例核心是把模型请求地址和 Key 写对{ plantuml.server: https://www.plantuml.com/plantuml, plantuml.render: Local, aiAssistant.provider: openai-compatible, aiAssistant.baseUrl: https://taotoken.net/api, aiAssistant.apiKey: 你的_TaoToken_Key, aiAssistant.model: claude-3.7-sonnet, aiAssistant.temperature: 0.3, aiAssistant.maxTokens: 4096, editor.quickSuggestions: { other: true, comments: false, strings: true } }几个参数说明baseUrl必须写成https://taotoken.net/api不要带尾部斜杠model字段填你实际要用的模型名TaoToken 支持多种模型具体列表可以在模型对话页面查看temperature建议设低一点画图代码需要稳定输出0.2 到 0.4 之间比较合适。3.2 config.toml 配置骨架如果你用命令行工具比如aichat或自建的脚本调用config.toml的骨架如下[default] api_base https://taotoken.net/api api_key 你的_TaoToken_Key model claude-3.7-sonnet temperature 0.3 max_tokens 4096 [plantuml] prompt_template 请根据以下描述生成 PlantUML 代码只输出代码块不要解释{input} [mermaid] prompt_template 请根据以下描述生成 Mermaid 代码只输出代码块不要解释{input} [graphviz] prompt_template 请根据以下描述生成 Graphviz DOT 代码只输出代码块不要解释{input} [svg] prompt_template 请根据以下描述生成 SVG 代码要求 viewBox 为 0 0 800 600只输出 SVG 代码不要解释{input}这份配置的好处是四种画图语言各自有独立的 prompt 模板调用时只需要指定 section 名不用每次重复写“请生成 PlantUML”这类前缀。实际使用时你可以写一个简单的 shell 函数来调用draw() { local lang$1 local desc$2 aichat --config ~/.config/aichat/config.toml \ --role $lang \ $desc }然后这样用draw plantuml 画一个用户登录的时序图包含浏览器、前端、后端、Redis、数据库 draw mermaid 画一个订单状态流转的流程图 draw graphviz 画一个微服务依赖关系图 draw svg 画一个三层架构图包含网关、业务层、数据层配置完成后建议先用一个最简单的请求验证通道是否打通。4. 验证请求从自然语言到四种图形代码4.1 PlantUML 时序图验证先拿登录流程做测试。给 AI 的输入可以是这样请用 PlantUML 画一个账号密码登录的时序图参与者包括浏览器、前端、后端 API、Redis、数据库。 流程浏览器输入账号密码点击登录 - 前端加密 - 后端接收 - 限流校验 - 查 Redis 缓存 - 未命中查数据库 - 比对密码哈希 - 校验用户状态 - 生成 Token - Token 存 Redis - 返回 Token 给前端。 只输出 PlantUML 代码块。AI 返回的代码大致如下startuml actor 用户 as U participant 浏览器 as B participant 前端 as F participant 后端API as API database Redis as R database 数据库 as DB U - B: 输入账号密码 B - F: 点击登录 F - F: 前端加密 F - API: 发送登录请求 API - API: 限流校验 API - R: 查询用户缓存 alt 缓存未命中 R -- API: 无数据 API - DB: 查询用户 DB -- API: 返回用户信息 else 缓存命中 R -- API: 返回用户信息 end API - API: 比对密码哈希 API - API: 校验用户状态 API - API: 生成 Token API - R: 存储 Token API -- F: 返回 Token F - B: 持久化 Token enduml把这段代码贴进 PlantUML 预览插件或者用在线渲染器打开就能看到标准的时序图。验证成功的标志是图形正常渲染参与者之间的箭头方向正确alt分支显示为条件块。4.2 Mermaid 流程图验证同样的登录流程换成 Mermaid 的输入请用 Mermaid 画一个登录流程图从浏览器开始到返回 Token 结束。 只输出 Mermaid 代码块。返回结果flowchart TD A[浏览器] -- B[输入账号密码] B -- C[前端加密] C -- D[后端API接收] D -- E[限流校验] E -- F{Redis缓存命中?} F --|是| G[返回用户信息] F --|否| H[查询数据库] H -- G G -- I[比对密码哈希] I -- J{用户状态正常?} J --|否| K[返回错误] J --|是| L[生成Token] L -- M[Token存Redis] M -- N[返回Token给前端]Mermaid 的优势是 Markdown 原生支持很多文档平台直接渲染。验证时注意flowchart TD的方向声明以及条件分支的{}语法。4.3 Graphviz 依赖图验证Graphviz 适合画非线性的依赖关系。输入请用 Graphviz DOT 语言画一个微服务依赖图包含网关、用户服务、订单服务、支付服务、库存服务、消息队列、数据库。 只输出 DOT 代码块。返回digraph Microservices { rankdirLR; node [shapebox, stylerounded]; Gateway [labelAPI网关]; UserSvc [label用户服务]; OrderSvc [label订单服务]; PaySvc [label支付服务]; StockSvc [label库存服务]; MQ [label消息队列, shapeparallelogram]; DB [label数据库, shapecylinder]; Gateway - UserSvc; Gateway - OrderSvc; OrderSvc - PaySvc; OrderSvc - StockSvc; OrderSvc - MQ; PaySvc - DB; StockSvc - DB; UserSvc - DB; }用dot -Tpng命令渲染或者贴进 Graphviz 在线编辑器。验证点是节点形状和rankdir方向是否符合预期。4.4 SVG 架构图验证SVG 的验证稍微特殊因为它是 XML 文本需要浏览器打开。输入请生成一个 SVG 三层架构图viewBox 为 0 0 800 600包含网关层、业务层、数据层用矩形和文字表示配色简洁。 只输出 SVG 代码。返回的 SVG 代码保存为.svg文件用浏览器打开即可。验证时重点看viewBox是否正确、文字是否在矩形内居中、整体布局是否在可视区域内。四种方式都跑通后你会发现一个规律AI 生成图形代码的质量取决于你的描述是否结构化。把流程拆成“参与者 动作 条件分支”比笼统地说“画个登录图”效果好得多。5. 本篇常见错排查5.1 请求返回 401 或 403最常见的原因是 Key 没填对或者baseUrl写成了带 UTM 参数的地址。检查两点apiKey字段是否完整复制了 TaoToken 控制台里的 KeybaseUrl是否严格为https://taotoken.net/api。如果用的是环境变量确认变量名和配置文件里引用的一致。5.2 PlantUML 渲染报语法错误AI 生成的 PlantUML 代码有时会缺少startuml和enduml包裹或者参与者别名用了中文导致解析失败。解决办法是在 prompt 里明确要求“使用英文别名中文用引号包裹”例如participant 浏览器 as B。另外alt分支必须成对出现else和end缺一个就会报错。5.3 Mermaid 在 Markdown 里不渲染部分 Markdown 编辑器需要额外开启 Mermaid 支持。如果你用的是 VS Code安装 Markdown Preview Mermaid Support 插件即可。另外注意代码块语言标记要写成mermaid不要写成mmd后者很多渲染器不识别。5.4 Graphviz 中文乱码Graphviz 默认字体可能不支持中文渲染出来是方框。在 DOT 代码里加一行node [fontnameSimHei];或者graph [fontnameMicrosoft YaHei];即可。Linux 环境下需要确认系统装了中文字体否则即使指定字体名也无效。5.5 SVG 显示不全或元素重叠SVG 的viewBox决定了可视区域。如果 AI 生成的元素坐标超出了viewBox范围就会显示不全。排查方法是把viewBox临时改大比如从0 0 800 600改成0 0 1200 900看元素是否出现。如果出现说明原始坐标超界需要让 AI 重新生成或手动调整坐标。另一个常见问题是文字没有设置text-anchormiddle导致文字从矩形左上角开始绘制看起来像溢出。5.6 模型返回内容包含多余解释有些模型会在代码块前后加“好的以下是代码”之类的文字。如果你用脚本自动提取代码块需要做正则匹配。更省事的办法是在 prompt 里加一句“只输出代码块不要任何解释”并且在config.toml的模板里已经预设了这个约束。6. 把四种链路串起来我的实际工作流配置跑通之后我日常的画图流程是这样的先在草稿纸上把流程或架构用文字列出来然后根据图的类型选工具。线性流程和时序交互用 PlantUML快速原型和文档内嵌用 Mermaid复杂依赖和网状关系用 Graphviz最终要放进 PPT 或对外文档的架构图用 SVG。四种方式生成的代码都存进 Git 仓库和文档放在一起。改需求时直接改文字描述让 AI 重新生成或者手动微调代码diff 清晰可见。这样做的最大好处是图不再是黑盒而是和代码一样可追溯、可协作。如果你还没配好 TaoToken 的通道建议先从模型对话入口试一次让 AI 生成一段 Mermaid 代码贴进 Markdown 预览看看效果。确认通道没问题后再按上面的settings.json或config.toml配置到本地工具链。长期在编辑器里画图的话Coding Plan 的入口在https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite遇到配置问题可以先翻文档里的示例。最后分享一个我踩过的坑Graphviz 的rankdir参数不要随便设成TB又混用LR的子图否则布局会乱成一团。如果发现节点位置诡异先把rankdir统一成LR或TB再逐步调整。画图这件事工具是辅助清晰的逻辑描述才是核心。
阅读完成 · 觉得有帮助？
