3041dafe2f
* feat: add PNG/SVG export support to MCP server export_diagram tool Previously export_diagram only supported .drawio XML files. This adds PNG and SVG export by leveraging the existing browser sync mechanism: the MCP tool sets an exportFormat flag on the session state, the browser detects it via polling and triggers an iframe export, then POSTs the result back as exportData which the tool reads and writes to disk. * fix: address PR review feedback for export feature - Validate exportData is a string in POST /api/state - Update lastUpdated in setExportFormat to prevent session expiry - Gate export postMessage on isReady to avoid lost messages - Remove unused fmt variable - Fix double extension when path has a different supported extension * fix: resolve high severity npm audit vulnerabilities Run npm audit fix to update @aws-sdk and @smithy transitive dependencies that had high severity advisories, which was failing the CI security audit step. * fix: address second round of PR review feedback - Add 8s timeout for pendingMcpExport to prevent permanent blocking - Move export trigger after version update in poll() to export latest diagram - Return 404 when session not found for exportData POST - Sync browser state before .drawio export to avoid stale XML - Handle URL-encoded SVG data URIs in addition to base64 * fix: address third round of PR review feedback - Sync browser state before PNG/SVG export (not just drawio) - Add 10MB body size limit on POST /api/state - Validate export response format matches request to prevent race conditions * refactor: remove over-engineered defensive code from export feature Strip unnecessary validation/guards added from Copilot review that don't make sense for a localhost-only MCP server: body size limit, type validation, 404 for missing session, lastUpdated refresh, URL-encoded SVG handling. Also deduplicate requestSync call. * refactor: keep original drawio export path unchanged Don't restructure the existing drawio logic - just add png/svg as a separate branch after it. * refactor: remove redundant helper functions, inline state access Remove setExportFormat/getExportData/clearExportData wrappers that were each called once. Access state fields directly via getState(). * chore: bump mcp-server version to 0.1.16
Next AI Draw.io
A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
Note: Thanks to
ByteDance Doubao sponsorship, the demo site now uses the powerful K2-thinking model!
https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
Table of Contents
- Next AI Draw.io
Examples
Here are some example prompts and their generated diagrams:
|
Animated transformer connectors Prompt: Give me a **animated connector** diagram of transformer's architecture. 
|
|
|
GCP architecture diagram Prompt: Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance. 
|
AWS architecture diagram Prompt: Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance. 
|
|
Azure architecture diagram Prompt: Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance. 
|
Cat sketch prompt Prompt: Draw a cute cat for me. 
|
Features
- LLM-Powered Diagram Creation: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
- Image-Based Diagram Replication: Upload existing diagrams or images and have the AI replicate and enhance them automatically
- PDF & Text File Upload: Upload PDF documents and text files to extract content and generate diagrams from existing documents
- AI Reasoning Display: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
- Diagram History: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
- Interactive Chat Interface: Communicate with AI to refine your diagrams in real-time
- Cloud Architecture Diagram Support: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
- Animated Connectors: Create dynamic and animated connectors between diagram elements for better visualization
MCP Server (Preview)
Preview Feature: This feature is experimental and may not be stable.
Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
{
"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
Then ask Claude to create diagrams:
"Create a flowchart showing user authentication with login, MFA, and session management"
The diagram appears in your browser in real-time!
See the MCP Server README for VS Code, Cursor, and other client configurations.
Getting Started
Try it Online
No installation needed! Try the app directly on our demo site:
Bring Your Own API Key: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.
Desktop Application
Download the native desktop app for your platform from the Releases page:
Supported platforms: Windows, macOS, Linux.
Run with Docker
Installation
- Clone the repository:
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
See the Provider Configuration Guide for detailed setup instructions for each provider.
- Run the development server:
npm run dev
- Open http://localhost:6002 in your browser to see the application.
Deployment
Deploy to EdgeOne Pages
You can deploy with one click using Tencent EdgeOne Pages.
Deploy by this button:
Check out the Tencent EdgeOne Pages documentation for more details.
Additionally, deploying through Tencent EdgeOne Pages will also grant you a daily free quota for DeepSeek models.
Deploy on Vercel
The easiest way to deploy is using Vercel, the creators of Next.js. Be sure to set the environment variables in the Vercel dashboard as you did in your local .env.local file.
See the Next.js deployment documentation for more details.
Deploy on Cloudflare Workers
Multi-Provider Support
- ByteDance Doubao
- AWS Bedrock (default)
- OpenAI
- Anthropic
- Google AI
- Google Vertex AI
- Azure OpenAI
- Ollama
- OpenRouter
- DeepSeek
- SiliconFlow
- ModelScope
- SGLang
- Vercel AI Gateway
All providers except AWS Bedrock and OpenRouter support custom endpoints.
📖 Detailed Provider Configuration Guide - See setup instructions for each provider.
Server-Side Multi-Model Configuration
Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via AI_MODELS_CONFIG environment variable (JSON string) or ai-models.json file.
Model Requirements: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
Note that the claude series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
How It Works
The application uses the following technologies:
- Next.js: For the frontend framework and routing
- Vercel AI SDK (
ai+@ai-sdk/*): For streaming AI responses and multi-provider support - react-drawio: For diagram representation and manipulation
Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
Support & Contact
Special thanks to ByteDance Doubao for sponsoring the API token usage of the demo site! Register on the ARK platform to get 500K free tokens for all models!
If you find this project useful, please consider sponsoring to help me host the live demo site!
For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
- Email: me[at]jiang.jp
FAQ
See FAQ for common issues and solutions.