一句就能生成可编辑图表,AI 画图工具来了!

画架构图、流程图、系统设计图时，你可能也遇到过这种情况：系统关系明明已经想清楚了，一打开空白画布，还得手动拖形状、调连线、对齐层级，半小时很快就过去。

最近看到一个 GitHub 项目：next-ai-draw-io。它将 AI 大模型和经典的 draw.io（diagrams.net）结合，让你通过聊天就能生成、修改和优化各种图表！

GitHub（32.2K+ Stars）：https://github.com/DayuanJiang/next-ai-draw-io

项目简介

next-ai-draw-io 是一个基于 Next.js 开发的 Web 应用（支持在线版和桌面端，提供 MCP Server），它在 draw.io 的基础上深度集成了 AI 能力。

可以直接用自然语言描述需求，AI 会生成 draw.io 格式的 XML 图表，并在画布里实时渲染出来。生成结果会进入 draw.io 体系，后续可以方便地编辑、调整和导出。

已关注

关注

重播分享赞

视频详情

除了文本提示，还可以上传图片、PDF 或文本文件，让 AI 理解现有内容并生成或优化图表。

核心亮点

自然语言生成图表：直接描述系统、流程或架构，AI 就能生成 draw.io 图。
对话式改图：生成后可以继续让 Agent 调整，比如加缓存层、改数据流、拆分模块。
上传资料生成：支持上传 PDF 和文本文件，从已有文档里提取内容，再整理成图。
旧图复刻增强：上传已有图表或图片后，可以让 AI 复刻结构、补充说明、优化布局。
版本历史：每次修改都有记录，方便回看，也方便恢复到之前的版本。
多模型和 MCP：支持 OpenAI、Anthropic（Claude）、Google、AWS Bedrock、DeepSeek、ByteDance Doubao、Ollama 等模型来源，也支持第三方供应商，并能接入 Claude Desktop、Cursor、VS Code 等客户端。

安装过程

在线版、桌面版和本地运行看到的是同一套页面，只是使用入口不同。

在线版

可以直接打开在线体验：

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

桌面版

不熟悉代码的话，可以直接下载桌面版使用

https://github.com/DayuanJiang/next-ai-draw-io/releases

本地项目运行

如果想研究项目实现，或者自己部署，可以把代码下载到本地运行。

git clone https://github.com/DayuanJiang/next-ai-draw-iocd next-ai-draw-ionpm installcp env.example .env.localnpm run dev

启动后打开：

http://localhost:6002

MCP 接入

如果你平时在 Claude、Cursor、VS Code 里写方案，可以把它接成 MCP Server，让 AI 客户端直接创建和编辑 draw.io 图。

{"mcpServers": {"drawio": {"command": "npx","args": ["@next-ai-drawio/mcp-server@latest"]    }  }}

Claude Code CLI 可以这样添加：

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

配置后，可以直接让 AI 创建图表：

Create a flowchart showing user authentication with login, MFA, and session management.

如何使用

使用之前，需要先配置 Agent 模型：

方法一：自然语音描述

比如你可以这样写：

绘制：腾讯TRTC 音视频通话流程默认绘图规则：视觉风格青春明亮，使用清爽浅色系配色，避免沉重色彩。所有元素不使用阴影，不显示最小化按钮，整体保持简洁清晰。布局紧凑但不拥挤，所有元素必须在单页视口内完整展示。同等级元素保持相同大小、相同图形样式、相同边距和对齐方式。分组/阶段背景框之间的间距保持一致，内部元素与边框之间也保持一致边距。文字必须完整可读，不得与元素边框或连线重叠。连线使用正交折线或清晰路径，开启动画效果。连线不得穿过、覆盖或压住任何元素块和文字。优先按从左到右、从上到下的流程组织内容，减少交叉线。整体呈现为清晰、专业、易读的架构图。

生成效果：