Dayuan Jiang
07f3e3c2a3
* feat(mcp-server): optional screenshot attached to create_new_diagram and edit_diagram results Both write tools take an optional boolean `screenshot`; the default comes from DRAWIO_AUTO_SCREENSHOT. The body of screenshot_diagram moved into captureScreenshot so the write tools can append the PNG and checklist to their result, or a "Screenshot skipped" note when the preview tab is not available. The preview page delays the PNG export by 600 ms right after loading a new version so icon images finish loading. * fix(mcp-server): review fixes for screenshot attached to create and edit results * fix(mcp-server): Codex review fixes for the screenshot on write results - A cleared canvas also gets the screenshot note when one was asked for - The note for a tab that never polled says it may not have connected yet * docs: list undo and custom drawing rules among the MCP features * test(mcp-server): truncation check with named styles and compact cells after the merge
8.0 KiB
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
用一句话描述想要的图，AI 就在真正的 draw.io 画布上把它画出来。你可以像编辑任何 draw.io 文件一样手动修改，也可以选中几个图形、告诉 AI 要改什么。AI 的每次修改都是一个版本，可以对比、恢复或撤销；结果可以导出为 .drawio、.png 或 .svg。
提供网页版、Windows / macOS / Linux 桌面版，以及供 Claude Code、Cursor、VS Code 等 AI 代理调用的 MCP 服务器。
亮点
画
- 一句话生成架构图、流程图、时序图等，内置 AWS、Azure、GCP、Kubernetes 等图标库
- 连接线可以带流动动画
- 上传截图或手绘图，让 AI 照着画；上传 PDF、Markdown、代码等文本文件，从内容生成图
改
- 用对话修改：改动流式呈现，刚改过的图形在画布上高亮
- 选中图形提问：在画布上选中几个图形，AI 只改这几个
- 版本与撤销：每次 AI 修改都是一张带缩略图的版本卡片，可以和画布对比、恢复、撤销；画布上按 Ctrl+Z 也能一步撤回 AI 的修改
- 它就是普通的 draw.io：双击改名、拖动、调样式、多页，随时导出
.drawio、.png、.svg、.drawio.svg
用
- 支持 24 家模型服务商，可以在浏览器里填自己的 API Key，Key 只保存在本地
- 支持推理的模型会显示思考过程
- 深色模式；界面有英文、简体中文、繁体中文、日文
示例
|
带动画连接线的 Transformer 架构 Prompt: Give me a animated connector diagram of transformer's architecture. 
|
|
|
RAG 架构图 Prompt: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion 
|
React 加 AWS 的认证流程 Prompt: Generate authentication process using React with AWS. Use Serverless architecture. 
|
|
开放式创新模型 Prompt: Create visualization of Henry Chesbrough's Open Innovation model. 
|
猫咪素描 Prompt: Draw a cute cat for me. 
|
使用方式
在线体验
打开 next-ai-drawio.jiang.jp 即可使用，无需安装。演示站有用量限制；点击聊天面板里的设置图标，填入自己的服务商和 API Key 就不受限制。Key 只保存在浏览器本地，不会上传到服务器。
桌面应用
在 Releases 页面 下载 Windows、macOS 或 Linux 安装包。
在 AI 代理里使用（MCP）
通过 MCP（Model Context Protocol，让 AI 代理调用外部工具的协议），Claude Desktop、Cursor、VS Code 等都能直接画 draw.io 图。在客户端的 MCP 配置里加上：
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Claude Code 用一行命令：
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
然后对 AI 说"画一个用户认证流程图，包含登录、MFA 和会话管理"，图会实时出现在浏览器里。MCP 服务器包含网页版的大部分画图能力：
- 同一套画图规则和图标库（AWS、Azure、GCP、Kubernetes 等）
- 截图工具，AI 可以看一眼画好的图并自行修正
- 版本历史、多页图表，下载为
.drawio、.png、.svg或.drawio.svg - 自动保存到
~/.next-ai-drawio/，重启后接着画 - 可以让 AI 撤销修改，也可以在
~/.next-ai-drawio/instructions.md里写下自己的画图规则
VS Code、Cursor 等客户端的配置见 MCP 服务器 README。
自己部署
本地运行
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local # 填入服务商和 API Key，见下文"模型与服务商"
npm run dev
一键部署
| 平台 | 方式 |
|---|---|
| 腾讯云 EdgeOne Pages |  部署后还能获得每日免费的 DeepSeek 模型额度 |
| Vercel | .env.local 相同的环境变量 |
| Cloudflare Workers | Cloudflare 部署指南 |
| Docker | Docker 指南 |
| 离线或内网 | 离线部署说明 |
模型与服务商
支持 AWS Bedrock（默认）、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、SGLang、Vercel AI Gateway、腾讯云 EdgeOne、字节跳动豆包、ModelScope、智谱 GLM、通义千问、七牛云、Kimi、MiniMax、Novita、小米 MiMo、Atlas Cloud 共 24 家。各家的环境变量和注意事项见服务商配置指南。
选哪个模型：这项任务要生成格式严格的长文本（draw.io XML），请选能力较强的模型，小模型容易画出错误的图。
多模型与管理面板：在 AI_MODEL 里用逗号列出多个模型 ID，或用 AI_MODELS_CONFIG 环境变量 / ai-models.json 文件配置多家服务商的模型，所有用户无需自带 Key 即可使用。设置 ADMIN_PASSWORD 后访问 /admin，可以在网页里管理模型、访问码、功能开关、可观测性和配额，见管理面板指南。
支持
- 问题和建议：提交 GitHub Issue，或发邮件到 me[at]jiang.jp
- 常见问题：FAQ
- 如果这个项目对你有用，欢迎赞助，帮助我维持演示站点的运行