Next AI Draw.io

Next AI Draw.io

用自然语言生成和修改 draw.io 图表的 AI 画图工具。

Next AI Draw.io 是一个可以用 AI 生成 draw.io 图表的工具。你可以用一句话让它生成流程图、系统架构图、云服务架构图、产品流程图，也可以继续用聊天的方式修改图里的节点和连线。

这篇教程只做一件事：把 Next AI Draw.io 里的 AI 接口改成 TokenMix。改完以后，Next AI Draw.io 调模型时会走 TokenMix，你可以用同一个 TokenMix API Key 调用 TokenMix 支持的模型。

另外，Next AI Draw.io 还提供 MCP Server。配置后，Claude Code、Cursor、VS Code 等支持 MCP 的 Agent 工具也可以调用它来创建或修改 draw.io 图表。普通用户先按下面步骤在网页里接入 TokenMix 即可，MCP 可以等网页跑通以后再配置。

你需要先准备好

  1. 一个 TokenMix 账号。
  2. 一个 TokenMix API Key。
  3. 一个可用模型的模型 ID。

如果还没有 API Key，先登录 TokenMix，进入控制台，打开 API Key 页面，新建一个 Key。复制时要复制完整，通常以 sk-tm- 开头。

模型 ID 不要随便填上游厂商的名字，建议到 TokenMix 的模型列表里复制页面展示的模型 ID。下面教程里用 <model-short-id> 表示你要替换的模型 ID。

第一步：打开 Next AI Draw.io

你可以使用官方在线版，也可以使用自己部署的版本。

在线版地址：

https://next-ai-drawio.jiang.jp/

打开页面后，你会看到左侧聊天区和右侧 draw.io 画布。我们要改的是聊天区里的模型设置。

第二步：进入模型设置

在聊天面板里找到设置按钮。通常它会显示在输入框附近，或者在模型选择区域旁边。

进入设置后，找到 AI Provider、API Key、Base URL、Model 这几个配置项。

如果页面里有很多 Provider，不要选 OpenRouter，也不要选 AWS Bedrock。这里选择：

OpenAI

或者：

OpenAI Compatible

原因是 Next AI Draw.io 的 OpenAI Provider 支持自定义 Base URL，刚好可以接 TokenMix 的 OpenAI 兼容接口。

第三步：填写 TokenMix 参数

按下面这样填写：

Provider: OpenAI 或 OpenAI Compatible
Base URL: https://api.tokenmix.ai/v1
API Key: sk-tm-你的TokenMix密钥
Model: <model-short-id>

注意这几个细节：

  1. Base URL 填 https://api.tokenmix.ai/v1，不要在后面再加 /chat/completions。
  2. API Key 前后不要有空格。
  3. Model 必须填 TokenMix 支持的模型 ID。
  4. 如果有 Organization、Project 之类的可选项，可以留空。

填写完成后保存设置。

第四步：发送测试提示词

保存后，在聊天框里输入下面这段中文测试：

生成一个经典的前后端分离架构图，包含用户、浏览器、前端应用、API 网关、后端服务、数据库、Redis 缓存、对象存储和第三方 API，并用箭头表示请求流向。

如果你使用的是英文界面，或者想让模型更稳定地理解图表结构，也可以用英文提示词：

Generate a classic frontend-backend separated architecture diagram. Include users, browser, frontend app, API gateway, backend services, database, Redis cache, object storage, and third-party APIs. Use arrows to show the request flow.

如果配置正确，Next AI Draw.io 会开始调用模型，并在画布里生成图表。第一次生成可能需要等一会儿，因为模型要输出 draw.io XML，内容会比普通聊天更长。

第五步：确认是否成功

成功时你会看到：

  1. 聊天区开始输出内容。
  2. 右侧画布出现图表。
  3. 图里有用户、前端、API 服务、数据库、缓存、对象存储和第三方 API 等节点。
  4. TokenMix 控制台的请求记录里能看到对应调用。

如果看到这些现象，说明 Next AI Draw.io 已经接入 TokenMix。

推荐怎么选模型

Next AI Draw.io 不是普通聊天应用。它需要模型生成结构完整的 draw.io XML，所以模型要有比较强的长文本生成能力、结构化输出能力和指令遵循能力。

建议优先选择适合复杂推理、长输出和结构化输出的模型。如果只是测试，可以先用便宜模型试通接口。正式画复杂架构图时，建议换成更强的模型。

常见问题

提示 401 或认证失败

通常是 API Key 填错了。请检查 Key 是否完整复制、是否以 sk-tm- 开头、前后是否多了空格，以及 TokenMix 账号是否还有余额。

提示模型不存在

通常是 Model 填错了。请回到 TokenMix 模型列表，复制模型页展示的模型 ID。

提示请求失败或无响应

先检查 Base URL。正确写法是：

https://api.tokenmix.ai/v1

不要写成：

https://api.tokenmix.ai
https://api.tokenmix.ai/v1/chat/completions
https://api.tokenmix.ai/api/v1

图表只生成了一半

这通常不是 API 地址问题，而是模型能力或输出长度不够。可以换一个更强的模型，或者把需求拆成更小的步骤。

可选：自部署时怎么接 TokenMix

如果你是自己部署 Next AI Draw.io，可以用环境变量直接指定 TokenMix。

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=<model-short-id> \
  -e OPENAI_API_KEY=sk-tm-你的TokenMix密钥 \
  -e OPENAI_BASE_URL=https://api.tokenmix.ai/v1 \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

一句话总结

在 Next AI Draw.io 里选择 OpenAI 或 OpenAI Compatible，把 Base URL 改成 https://api.tokenmix.ai/v1，把 API Key 改成 TokenMix 的 sk-tm-...，再填一个 TokenMix 支持的模型 ID，就可以通过 TokenMix 生成 draw.io 图表。