← all repositories
DayuanJiang/next-ai-draw-io

ChatGPT meets the whiteboard: AI that actually draws architecture diagrams

A Next.js app that turns natural language into draw.io diagrams, complete with version history and an MCP server for Claude Desktop.

31.5k stars TypeScript Coding AssistantsOther AI
next-ai-draw-io
Velocity · 7d
+71
★ / day
Trend
steady
star history

What it does Next AI Draw.io is a chat interface wrapped around draw.io. You describe a diagram in plain English—“RAG architecture for a chat app,” “AWS serverless auth flow,” or even “draw a cute cat”—and an LLM generates the corresponding draw.io XML. You can also upload images, PDFs, or text files to have the AI replicate or summarize them as diagrams. The app tracks version history so you can roll back AI edits, and it exposes an MCP server so Claude, Cursor, and VS Code can create diagrams programmatically.

The interesting bit The project doesn’t just generate static boxes and arrows. It produces animated connectors and cloud-architecture-specific shapes (AWS, GCP, Azure), and the README notes that Claude models are “trained on draw.io diagrams with cloud architecture logos”—making them oddly specialized for this narrow task. The MCP integration means you can ask Claude Code to build a flowchart and watch it appear in your browser in real time.

Key highlights

  • Supports 14+ LLM providers including OpenAI, Anthropic, Google, DeepSeek, Ollama, and ByteDance Doubao (which sponsors the live demo)
  • Bring-your-own-key model: API keys stay in your browser, not the server
  • Desktop apps for Windows, macOS, and Linux via Electron
  • One-click deploy to Vercel, Cloudflare Workers, or Tencent EdgeOne Pages (which includes a free daily DeepSeek quota)
  • Server-side multi-model configuration via environment variable for team deployments

Caveats

  • The README warns that generating valid draw.io XML requires “strong model capabilities”; weaker models may struggle with the strict formatting constraints
  • AWS Bedrock and OpenRouter do not support custom endpoints, unlike the other providers
  • The demo site’s free tier is rate-limited; heavy use requires bringing your own key or sponsoring the project

Verdict Worth a look if you spend too much time in draw.io or Lucidchart and want to prototype diagrams faster. Skip it if you need pixel-perfect manual control or if your organization blocks LLM API usage entirely.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.