a3814f702d
Extends the declarative engine past cloud architecture. The tool routing was
divided by icon library — AWS through the engine, everything else hand-written
XML — which is the wrong axis. What matters is the LAYOUT SHAPE.
Measured first: a six-step approval flow declared in its natural order comes out
as one column, because the layout only arranges what nesting tells it to and
never looked at the arrows. That forces the arrow from the decision to its second
branch to jump over the first branch.
graph.ts computes what the layout should have looked at: layer assignment by
longest path, cycle breaking so a loop is drawn without setting the order, and
barycentre sweeping to cut edge crossings. It emits ordinary container
operations, so layout, routing and round-tripping are unchanged — reaching zero
arrows-through-boxes on a 14-node pipeline and zero crossings on a bipartite
graph whose declared order forces three.
Three new container kinds, each because one layout rule cannot serve them all:
pool — swimlanes. Lanes are real cells and each step is parented to its
band, so dragging a step to another role records the change.
sequence — participants across the top, one lifeline cell per participant so
head and line stay together on a drag. Messages bypass the router:
a message's height IS its order.
radial — mind maps and org charts. Children are a flat list and the
hierarchy comes from the links, because a branch is a box and a box
cannot hold children.
Flowchart box shapes (diamond, stadium, parallelogram, document) so a reader can
tell a branch from a step.
Two bugs the new tests caught: the duplicate-link guard blocked a sequence
diagram from having two messages between the same pair, and the fallback message
numbering was shared across containers, pushing a second diagram's messages off
its own lifelines.
523 unit tests and 17 diagram e2e tests pass. Every kind verified round-trip
stable to a fixed point, and rendered in a real browser — draw.io keeps the
lifeline shape and the lane markers.
11 KiB
Next AI Draw.io
一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
注：感谢
字节跳动豆包 的赞助支持，本项目的 Demo 现已接入强大的 glm-4.7 模型！
https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
目录
示例
以下是一些示例提示词及其生成的图表：
|
动画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. 
|
功能特性
- LLM驱动的图表创建：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
- 基于图像的图表复制：上传现有图表或图像，让AI自动复制和增强
- PDF和文本文件上传：上传PDF文档和文本文件，提取内容并从现有文档生成图表
- AI推理过程显示：查看支持模型的AI思考过程（OpenAI o1/o3、Gemini、Claude等）
- 图表历史记录：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
- 交互式聊天界面：与AI实时对话来完善您的图表
- 云架构图支持：专门支持生成云架构图（AWS、GCP、Azure）
- 自动计算布局：画架构图、流程图、泳道图/BPMN、时序图、思维导图和组织架构图时，AI 只描述结构——谁包含谁，或者谁指向谁——所有坐标、尺寸和连线路径都由程序计算。容器一定装得下里面的内容，同层元素不会重叠，连线会绕开本来会穿过的图形。之后您手动移动或改色的部分会被当作图表的一部分读回来，所以后续修改不会覆盖掉您的调整。
- 动画连接器：在图表元素之间创建动态动画连接器，实现更好的可视化效果
MCP服务器
通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next 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
然后让Claude创建图表：
"创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
图表会实时显示在浏览器中！
详情请参阅MCP服务器README，了解VS Code、Cursor等客户端配置。
快速开始
在线试用
无需安装！直接在我们的演示站点试用：
使用自己的 API Key：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。
桌面应用
从 Releases 页面 下载适用于您平台的原生桌面应用：
支持的平台：Windows、macOS、Linux。
使用Docker运行
安装
- 克隆仓库：
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
详细设置说明请参阅提供商配置指南。
- 运行开发服务器：
npm run dev
- 在浏览器中打开 http://localhost:6002 查看应用。
部署
部署到腾讯云EdgeOne Pages
您可以通过腾讯云EdgeOne Pages一键部署。
直接点击此按钮一键部署：
查看腾讯云EdgeOne Pages文档了解更多详情。
同时，通过腾讯云EdgeOne Pages部署，也会获得每日免费的DeepSeek模型额度。
部署到Vercel
部署Next.js应用最简单的方式是使用Next.js创建者提供的Vercel平台。请确保在Vercel控制台中设置环境变量，就像您在本地 .env.local 文件中所做的那样。
查看Next.js部署文档了解更多详情。
部署到Cloudflare Workers
多提供商支持
- 字节跳动豆包
- AWS Bedrock（默认）
- OpenAI
- Anthropic
- Google AI
- Google Vertex AI
- Azure OpenAI
- Ollama
- OpenRouter
- AIHubMix
- DeepSeek
- SiliconFlow
- ModelScope
- SGLang
- Vercel AI Gateway
除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。
📖 详细的提供商配置指南 - 查看各提供商的设置说明。
服务端多模型配置
管理员可以配置多个服务端模型，让所有用户无需提供个人 API Key 即可使用。通过 AI_MODELS_CONFIG 环境变量（JSON 字符串）或 ai-models.json 文件配置。如果只需要单 provider 下的多个模型，也可以直接在 AI_MODEL 中用逗号分隔模型 ID。
模型要求：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
注意：claude 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。
管理面板
设置 ADMIN_PASSWORD 环境变量并访问 /admin，即可在 Web 面板中管理服务端设置（模型、访问码、功能开关、可观测性、配额），无需手动编辑 .env。
📖 管理面板指南 — 启用方法、优先级规则和注意事项。
工作原理
本应用使用以下技术：
- Next.js：用于前端框架和路由
- Vercel AI SDK（
ai+@ai-sdk/*）：用于流式AI响应和多提供商支持 - react-drawio：用于图表表示和操作
图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
支持与联系
特别感谢字节跳动豆包赞助演示站点的 API Token 使用！ 注册火山引擎 ARK 平台即可获得50万免费Token！
如果您觉得这个项目有用，请考虑赞助来帮助我托管在线演示站点！
如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：
- 邮箱：me[at]jiang.jp
常见问题
请参阅 FAQ 了解常见问题和解决方案。