别再让 AI 只会出“不能改”的图了：Draw.io 官方 MCP 上手实战（TaoToken 配置版）

1. 为什么 AI 画的图总是“改不动”先说一个我踩过的坑。早些年做技术方案评审我图省事直接让大模型生成一张“系统架构图”。它很快给了一张看起来挺像样的图几个方块、几条箭头、配色也还行。我把它贴进文档评审会上大家点头。结果第二天产品经理说“把网关拆成两个再加一条旁路”我盯着那张图看了半天只能打开 Draw.io 从头重画。问题不在于 AI 不会画图而在于它画出来的东西本质上是一张图片不是一份图稿。图片可以看、可以截图、可以贴文档但你没法拖动里面的节点没法改一条连线的走向没法给某个模块加个子容器。技术场景里真正需要的恰恰是后者系统架构图、业务流程图、模块关系图、时序图、寄存器读写波形图这些东西几乎不可能一次定稿今天搭框架明天补模块后天改连线。所以真正有价值的命题不是“AI 帮我生成一张图”而是“AI 帮我生成一张能在 Draw.io 里继续编辑的图”。Draw.io 官方提供的 MCP Server 就是冲着这件事来的。它把 Draw.io 的制图能力包装成 AI 可以直接调用的工具让模型不再只给你一段“你可以这样画”的说明而是把结构、节点、关系真正送进 Draw.io 编辑器产出一份可打开、可拖拽、可继续迭代的图稿。这篇就聚焦一条最容易落地的路线用npx drawio/mcp启动 Draw.io 官方 Tool Server把它接进 Codex再用 TaoToken 统一 Key 管好模型调用最后跑通“Mermaid 转 Draw.io 可编辑图”并验证节点真的能拖。适合平时要写技术文档、做方案汇报、画流程图和时序图的开发者也适合刚接触 MCP、想找一个具体场景练手的小白。2. TaoToken 前置把模型 Key 统一管起来在接 Draw.io MCP 之前得先解决一个现实问题Codex 这类 coding agent 要调用大模型你得给它配 Key。如果你同时用多个模型、多个工具Key 散落在各处改一次配置要翻好几个文件很容易乱。我的做法是用 TaoToken 做统一入口一个 Key 管住模型调用Codex 这边只认一个地址。TaoToken 的定位很简单它是一个模型调用的统一接入层你拿到一个 Key就能在兼容的客户端里调用背后的模型能力。对这篇的场景来说它的价值在于——Codex 负责“调工具、跑 MCP”TaoToken 负责“供模型”两边解耦配置清爽。你需要先拿到两样东西一个 API Key在控制台的 API Keys 页面创建形如sk-开头的一串字符。接入地址https://taotoken.net/api这是给程序调用的 base URL注意它和官网首页不是一回事。创建 Key 的入口在这里https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite如果你对模型对话能力还不熟想先在网页里试一句 prompt 看看返回可以用模型对话入口https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite而如果你打算长期用 Codex 做编码和 Agent 任务建议直接看 Coding Plan它更适合这种持续调用的场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite注意https://taotoken.net/api是接口地址不要在后面拼 UTM 参数UTM 只加在官网和 deep link 上。Key 属于敏感信息别写进会提交到 Git 的配置文件里用环境变量或本地私有配置。拿到 Key 之后先别急着接 MCP用一条最朴素的请求验证它通不通。这一步能帮你把“Key 问题”和“MCP 问题”分开后面排障会省很多事。3. 可复制配置Codex 接 Draw.io MCP TaoToken这一节是全文的核心配置分两块一块是 Codex 怎么启动 Draw.io 的 MCP 服务另一块是 Codex 怎么通过 TaoToken 调模型。两块都写进~/.codex/config.tomlCLI 和 IDE 扩展共享这份配置。3.1 先理解 Draw.io 官方 MCP 的两条路线Draw.io 官方目前提供两条 MCP 路线别搞混App Server适合支持 MCP Apps 的宿主环境图形可以直接内联渲染在对话里体验顺但依赖宿主能力。Tool Servernpm 包是drawio/mcp用npx drawio/mcp启动交给兼容的 MCP 客户端调用。它支持三种输入原生 Draw.io XML、CSV、Mermaid。对本地 Codex 工作流来说Tool Server 这条更直接也更像工程接入。它对应的工具名有三个后面 prompt 里会用到工具名输入形式适用场景open_drawio_mermaidMermaid 语法流程图、简单架构图上手最快open_drawio_csvCSV组织图、层级/表驱动结构open_drawio_xmlDraw.io XML需要精细控制图元、容器、连线3.2 注册 Draw.io MCP 服务最省事的方式是用 Codex 的命令行直接加codex mcp add drawio -- npx -y drawio/mcp这行的意思是注册一个叫drawio的 MCP 服务它通过本地命令npx -y drawio/mcp启动。-y是为了让 npx 自动确认安装避免卡在交互提示上。如果你习惯手改配置就在~/.codex/config.toml里写[mcp_servers.drawio] command npx args [-y, drawio/mcp]配完先检查服务有没有挂上codex mcp list进入 Codex 交互界面后也可以用/mcp看当前激活的 MCP 服务。能看到drawio在列表里说明注册这步成了。3.3 用 TaoToken 统一 Key 供模型Codex 调模型这部分把 base URL 指向 TaoToken 的接口地址Key 用你创建的那串。写进同一份config.tomlmodel_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY然后在你的 shell 环境里导出 Key别硬编码进文件export TAOTOKEN_API_KEYsk-你的KeyWindows PowerShell 用$env:TAOTOKEN_API_KEYsk-你的Key这样 Codex 启动时会从环境变量读 Key配置文件里不出现明文安全一些。到这里模型通道和 MCP 通道就都配好了。4. 验证请求从 Mermaid 到可拖拽的 Draw.io 图配置对不对跑一个最小例子就知道。别一上来就画复杂云架构图先拿一个五行节点的小图把链路打通。4.1 用 Mermaid 跑通第一条链路在 Codex 里提交这样的 promptUse the drawio MCP tool to create a Mermaid flowchart. The diagram should show: User - Codex - draw.io MCP - draw.io Editor - Editable Diagram Keep the layout horizontal and simple.如果 MCP 接好了Codex 会调用open_drawio_mermaid把 Mermaid 内容送进 Draw.io 编辑器并返回一个可继续打开和编辑的结果。你会看到浏览器里弹出 Draw.io 编辑器里面是五个横向排列的节点和箭头。关键验证动作用鼠标拖动其中一个节点。如果能拖动连线跟着走说明你拿到的是可编辑图稿不是一张死图。这一步是整个流程的验收标准别跳过。4.2 换成更贴近工作的登录流程图最小例子通了换一个真实点的Use open_drawio_mermaid to create a user login flow. Include these nodes: Start, Enter Username and Password, Validate Credentials, Login Success, Login Failed, Retry Connect them as a standard flowchart. Keep labels concise and make the diagram editable in draw.io.4.3 用 CSV 画组织图如果你的结构更像层级关系走 CSV 更自然Use open_drawio_csv to create an org chart. CEO manages CTO and CFO. CTO manages Engineer 1, Engineer 2, Engineer 3. CFO manages Finance Manager.4.4 时序图AI 出图真正省时间的地方时序图最能体现这套流程的价值。结构不复杂但手动画特别费时间——时钟要对齐片选要拉低读写使能要错开地址和数据要卡在采样窗口里。一个简单的寄存器读写时序纯手工在 Draw.io 里拉也得花不少功夫。下面这个例子主控先向地址0x10的寄存器写入0x000000A5再从同一地址读回相同数据。信号包括clk、cs_n、wr_en、rd_en、addr[7:0]、wdata[31:0]、rdata[31:0]、ready。Use the drawio MCP tool to create a digital timing diagram for a simple register write and read transaction. Signals: - clk - cs_n - wr_en - rd_en - addr[7:0] - wdata[31:0] - rdata[31:0] - ready Scenario: 1. Idle state: cs_n high, wr_en low, rd_en low, ready low. 2. Write transaction: - cs_n goes low - wr_en goes high - rd_en stays low - addr[7:0] 0x10 - wdata[31:0] 0x000000A5 - after one clock cycle, ready goes high for one cycle - then cs_n returns high and wr_en returns low 3. Read transaction: - after a short idle gap, cs_n goes low again - rd_en goes high - wr_en stays low - addr[7:0] 0x10 - after one clock cycle, rdata[31:0] 0x000000A5 - ready goes high for one cycle - then cs_n returns high and rd_en returns low Requirements: - Draw it as a clean waveform timing diagram - Keep signals aligned in rows - Use clear labels for the address and data values - Show write phase and read phase clearly - Keep the style simple, technical, and editable in draw.io实测下来生成的波形图时钟和边沿基本对齐写阶段和读阶段分得清楚地址和数据值也标了出来。后面你只需要微调电平长度和标注文字比从零手画省太多。对做芯片、FPGA、驱动验证的同学来说交付文档时这个效率提升很实在。4.5 怎么写出让 AI 画得准的 prompt很多人写 prompt 就一句“帮我画个系统架构图”这不够。图特别依赖结构信息你不给结构模型只能自由发挥结果就是“看起来像但不够准”。我建议按五层来写第一层说清图的类型。是流程图、架构图、时序图还是组织图不同图类型的组织逻辑完全不同。第二层列清节点。别只说“大概几个模块”直接把名字列出来User、Web Frontend、API Gateway、Auth Service、Database、Logging System。节点一明确图就稳。第三层说清连接关系。谁连谁、数据怎么走、调用顺序怎样都要写出来。第四层给布局偏好。横向还是纵向哪些放左、哪些放中、哪些放右哪些要分组。这一步很多人漏掉但它非常实用讲清楚之后图会立刻规整。第五层强调“可编辑”和“简洁”。加上Keep labels concise、Avoid unnecessary decorative elements、Make the diagram editable in draw.io防止模型为了好看做过度装饰。如果你想让模型稳定调用 Draw.io MCP而不是转头去生成别的图像可以把工具名写进 prompt或者在系统指令里写一句“Always use the draw.io MCP tools to create diagrams.”一个可以直接复用的模板Use the drawio MCP tool to create a [diagram type]. Include these components: [list all nodes clearly] Relationships: [describe how each node connects to others] Layout: [describe left-right / top-down arrangement] [group related components if needed] Constraints: Keep labels concise. Keep the structure clean. Avoid unnecessary decorative elements. Make the result editable in draw.io. If appropriate, prefer Mermaid for simple flow-based diagrams. If the structure is tabular or hierarchical, prefer CSV. If precise control is needed, use draw.io XML.5. 本篇常见错排查配置和调用过程中最容易卡在下面几个地方。按顺序排查基本能定位。第一个codex mcp list里看不到 drawio。多半是config.toml的 TOML 语法写错了比如[mcp_servers.drawio]下面command和args缩进或引号有问题。TOML 对格式敏感args是数组必须用方括号。改完重启 Codex 再看。第二个npx 卡住不动。通常是没加-ynpx 在等你确认安装drawio/mcp。命令里补上-y或者先手动跑一次npx -y drawio/mcp让它把包拉下来。第三个模型不调用 Draw.io 工具自己编了一段 Mermaid 文本给你。这是 prompt 没约束住。把工具名写进 prompt比如Use open_drawio_mermaid to ...或者在系统指令里明确要求只用 Draw.io MCP 工具。第四个图出来了但拖不动。说明你拿到的可能是渲染后的静态结果而不是可编辑图稿。检查是不是走错了路线——本地 Codex 场景应该用 Tool Servernpx drawio/mcp而不是依赖宿主内联渲染的 App Server。另外确认浏览器里打开的是 Draw.io 编辑器本身不是一张预览图。第五个模型请求报鉴权错误。检查TAOTOKEN_API_KEY环境变量有没有在当前 shell 生效base_url是不是https://taotoken.net/api注意别多加路径也别拼 UTM。Key 失效或额度问题去控制台重新确认。第六个Mermaid 语法报错。Mermaid 对箭头和节点命名有要求节点名里带空格或特殊字符容易解析失败。把节点名简化或者改用open_drawio_xml走原生 XML控制力更强。提示排障时把“模型通道”和“MCP 通道”分开验证。先用一条普通对话确认 TaoToken 的 Key 通再单独确认codex mcp list里有 drawio两个都通再跑画图 prompt定位会快很多。6. 把 AI 出图接进你真正的工作流回到最开始那个问题AI 画的图为什么改不动因为它给的是一张图片而不是一份图稿。Draw.io 官方 MCP 加 Codex 这条路径把“内容生成”和“图形编辑”接了起来——模型负责把结构搭出来Draw.io 负责让你继续拖、继续改、继续迭代。如果你只是偶尔做一张宣传图普通图片生成也许够了。但如果你经常写技术文档、做项目汇报、整理系统设计甚至只是画一张能给同事接着改的流程图那“可编辑”这件事的重要性远远大于“第一眼好不好看”。配置上记住三件事Draw.io 的 Tool Server 用npx -y drawio/mcp启动并注册进 Codex模型调用统一走 TaoToken 的https://taotoken.net/apiKey 放环境变量prompt 里把工具名、节点、关系、布局、可编辑约束写清楚。跑通之后你手里就多了一条从一句话到可编辑图稿的完整链路。需要接着往下做的按场景选入口接入和排障相关的配置去 API Keys 和接入文档想先验证模型对话能力用模型对话打算长期用 Codex 做编码和 Agent 任务直接上 Coding Plan。API Keys: https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 接入文档: https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 模型对话: https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite Coding Plan: https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite