Next AI Draw.io

Next AI Draw.io is an open-source web and desktop application that lets you create, edit, and refine draw.io diagrams through conversational AI. You describe what you want — a GCP architecture, a transformer neural network, a user authentication flow — and the AI generates the draw.io XML, renders it instantly, and iterates on your feedback. No manual dragging of boxes required.

The app integrates with over a dozen AI providers through the Vercel AI SDK, including Claude, GPT, Gemini, DeepSeek, AWS Bedrock, Google Vertex AI, Ollama, and more. All API keys are stored locally in the browser — nothing is sent to the server. For teams, administrators can configure server-side model pools accessible to all users without requiring individual API keys.

Beyond the web app, Next AI Draw.io ships as a native Electron desktop application for Windows, macOS, and Linux with offline draw.io support. It also publishes an MCP server package, letting you trigger diagram generation directly from Claude Code, Cursor, or VS Code. A VLM-based validation layer automatically reviews generated diagrams as images and retries up to three times when visual issues are detected.

The project is entirely Apache 2.0 licensed, actively maintained with weekly releases, and deployable on Vercel, Cloudflare Workers, EdgeOne Pages, or Docker — making it a practical self-hosting option for individuals and organizations alike.

What You Get

• LLM-Powered Diagram Creation - Generate draw.io XML from natural language prompts like ‘Create a GCP Kubernetes cluster with load balancer and Cloud SQL’ using any of 15+ supported AI providers
• Image-Based Diagram Replication - Upload a PNG or SVG screenshot and the AI reconstructs it as editable draw.io XML, preserving layout and element relationships
• PDF and Text File Upload - Extract architecture details from uploaded PDFs or text documents and auto-generate corresponding diagrams without manual transcription
• VLM Visual Validation - After each diagram is generated, a Vision Language Model inspects it as an image for layout errors and automatically retries up to three times to correct issues before showing the result
• MCP Server Integration - Connect AI coding agents (Claude Code, Cursor, VS Code) via the published @next-ai-drawio/mcp-server package so diagrams appear in the browser in real time as the agent works
• Native Desktop App - Download an Electron app for Windows, macOS, or Linux with bundled offline draw.io support, no internet required for the editor itself
• Server-Side Multi-Model Admin Panel - Administrators set AI_MODELS_CONFIG or visit /admin to configure multiple server-hosted models available to all users without personal API keys
• Animated Connectors and Cloud Icons - Built-in shape library support for AWS, GCP, Azure, Kubernetes, and more, with animated flowing connectors for visualizing data pipelines and system interactions
• Diagram Version History - The app snapshots the diagram before every AI edit, letting users browse and restore any prior state via the history timeline
• Multi-Language UI - Interface and AI system prompts are localized in English, Japanese, and Chinese, including locale-aware menu rendering in the Electron desktop app

Common Use Cases

• Cloud infrastructure diagramming - A DevOps engineer describes an AWS serverless architecture in plain English and gets a correctly labeled diagram with Lambda, API Gateway, and DynamoDB icons in seconds
• Documenting existing systems from screenshots - A platform team uploads screenshots of legacy architecture diagrams and uses the AI to convert them into editable draw.io files for their runbook
• IDE-driven diagram generation - A developer asks Claude Code via the MCP server to ‘draw the OAuth flow for this service’ and sees the diagram appear in their browser without leaving the editor
• Teaching technical concepts - An instructor creates animated transformer architecture diagrams from text prompts to illustrate attention mechanisms in lectures, exporting them as SVG for slides
• Client deliverable prototyping - A solutions architect describes a proposed system to a client in a recorded session, iterating the diagram live via chat until both parties align on the design
• Converting PDFs to diagrams - A business analyst uploads a requirements PDF and asks the AI to extract the process flow as a BPMN diagram, saving hours of manual interpretation

Under The Hood

Architecture Next AI Draw.io is structured as a Next.js App Router application where server components handle provider authentication, quota enforcement, and AI streaming, while client components manage the interactive draw.io editor and conversational chat interface. The AI layer is abstracted behind a unified provider pattern using the Vercel AI SDK, allowing any of the fifteen-plus supported models to be swapped without changing the diagram generation logic. A dedicated SSRF protection module validates all outbound URLs before any LLM calls, and a quota manager using AWS DynamoDB handles rate limiting with timezone-aware daily resets for hosted deployments. The Electron desktop build reuses the same Next.js output with a bundled draw.io asset, making the architecture genuinely multi-target without divergent codebases.

Tech Stack The frontend runs on Next.js 16 with React 19, styled with Tailwind CSS v4 and a suite of Radix UI primitives for dialogs, selects, and tooltips. AI integration goes through the Vercel AI SDK v6 with first-class adapters for Anthropic, OpenAI, Google Generative AI, Google Vertex AI, AWS Bedrock, Azure OpenAI, DeepSeek, Ollama, OpenRouter, and several regional providers. Diagrams are rendered by react-drawio embedded in an iframe, with diagram state stored as draw.io XML. Client-side persistence uses IndexedDB via the idb library for template storage and chat session history. The Electron wrapper uses esbuild and electron-builder for cross-platform distribution. Biome handles linting and formatting, and observability is instrumented via OpenTelemetry and Langfuse for AI trace evaluation.

Code Quality The project ships with comprehensive Vitest unit tests covering AI provider configuration, SSRF protection, admin settings parsing, diagram validation helpers, and chat message utilities — over two thousand lines of unit test code. Playwright end-to-end tests cover chat flows, file uploads, diagram history, keyboard shortcuts, and theme switching. TypeScript strict mode is enforced throughout, with Zod schemas defining validation rules for AI responses and configuration. Error handling favors user-visible feedback through toast notifications rather than silent failures, with explicit retry logic in the VLM validation loop. Biome and husky pre-commit hooks enforce consistent formatting.

What Makes It Unique The combination of a streaming AI chat interface directly coupled to an embedded draw.io editor — with diagram snapshots before every AI mutation — creates an undo-safe iteration loop that most dedicated diagramming tools lack. The VLM-based visual validation pass is technically distinctive: after the LLM produces XML, a second multimodal model inspects the rendered diagram as a bitmap and issues structured correction feedback, closing the loop without human review. Publishing the tool as both a web app and an installable MCP server package means it bridges the chat interface and the IDE in a single project. The admin panel for server-side model pools and the multi-target deployment strategy (Vercel, Cloudflare Workers, EdgeOne, Docker, Electron) make it viable for self-hosted team deployments, not just personal use.

Self-Hosting

Next AI Draw.io is released under the Apache License 2.0, which permits unrestricted commercial use, modification, and redistribution provided the license notice is preserved. There are no copyleft implications for self-hosters — you can run it internally, modify the code, and integrate it into proprietary workflows without being required to open-source your changes. No enterprise license tier or paid version exists; everything in the repository is available to all users under the same terms.

Running Next AI Draw.io yourself requires a Node.js environment for the web app or Docker for containerized deployment. You are responsible for configuring API keys or server-side model credentials, managing your own hosting infrastructure (Vercel, Cloudflare Workers, a VPS, or on-premises), and handling updates by pulling new releases from GitHub. The project releases approximately weekly, so keeping current involves a pull-and-redeploy cadence. The optional DynamoDB-backed quota manager requires an AWS account and appropriate IAM configuration; without it, there is no built-in rate limiting for self-hosted instances.

Compared to the hosted demo at next-ai-drawio.jiang.jp — which is maintained by the project author and sponsored for API costs — a self-hosted deployment gives you full control over which models are available and how API spend is allocated, but you absorb the infrastructure and API cost yourself. There is no official SLA, managed upgrade path, or enterprise support channel. Community support happens through GitHub Issues, and the project’s active contributor base has kept release cadence high, but production uptime and incident response remain entirely in your hands.