DrawIO AI Editor
A modern DrawIO editor application. AI-Powered, Human-AI Collaboration | AI 加持，人机共绘drawio
What is DrawIO AI Editor?
DrawIO AI Editor is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to modern drawio editor application. ai-powered, human-ai collaboration | ai 加持，人机共绘drawio
A modern DrawIO editor application. AI-Powered, Human-AI Collaboration | AI 加持，人机共绘drawio
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A modern DrawIO editor application. AI-Powered, Human-AI Col
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx drawio2goConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use DrawIO AI Editor
Drawio2Go is an AI-powered DrawIO editor that exposes an MCP server so AI assistants can create, modify, and export diagrams through natural language instructions. It supports a full range of diagram types — UML, flowcharts, architecture diagrams, neural network visualizations — and uses XPath-based precise element manipulation for surgical edits without rewriting the whole diagram. The application runs either as an Electron desktop app or a local web server, and connects to the LLM provider of your choice (OpenAI, Anthropic, DeepSeek, or Gemini).
Prerequisites
- Node.js 22.x or higher and npm installed (for web deployment)
- API key for your chosen LLM provider (OpenAI, Anthropic, DeepSeek, or Gemini)
- An MCP-compatible client (Claude Desktop, Claude Code, or similar)
- Optional: Electron runtime if using the desktop application instead of the web server
Clone the repository
Clone the Drawio2Go repository to your local machine. The project is not published to npm, so you must build from source.
git clone https://github.com/Menghuan1918/drawio2go.git
cd drawio2goInstall dependencies
Install all Node.js dependencies using npm.
npm installStart the development server
Launch the local web server. The DrawIO editor and MCP service will be available at http://localhost:3000.
npm run devConfigure your LLM provider in the application
Open http://localhost:3000 in your browser and navigate to Settings. Enter your API key and select your LLM provider (OpenAI, Anthropic/Claude, DeepSeek, or Gemini). The application stores this configuration locally.
Add the MCP server to your client configuration
With the local server running, register the Drawio2Go MCP endpoint in your Claude Desktop or MCP client config. The server must be running before your client connects.
{
"mcpServers": {
"drawio2go": {
"command": "npx",
"args": ["mcp-remote", "http://localhost:3000/mcp"]
}
}
}Test diagram creation
Restart your MCP client and ask the AI to create a simple diagram. The Drawio2Go editor in your browser should update in real time as the AI generates and modifies the diagram.
DrawIO AI Editor Examples
Client configuration
Claude Desktop configuration for Drawio2Go running as a local web server on port 3000, bridged via mcp-remote.
{
"mcpServers": {
"drawio2go": {
"command": "npx",
"args": ["mcp-remote", "http://localhost:3000/mcp"]
}
}
}Prompts to try
Example prompts that demonstrate the diagram creation and editing capabilities of Drawio2Go.
- "Create a UML class diagram for an e-commerce system with Product, Order, and Customer classes"
- "Draw a system architecture diagram showing a React frontend, Node.js API, and PostgreSQL database"
- "Generate a flowchart for a user authentication flow with OAuth2"
- "Add a new service called 'Cache Layer' between the API and database in my diagram"
- "Convert this image of a whiteboard sketch into a clean DrawIO diagram"
- "Export the current diagram as a PNG file"Troubleshooting DrawIO AI Editor
MCP client cannot connect to the Drawio2Go server
Ensure `npm run dev` is running and http://localhost:3000 is accessible in your browser before restarting the MCP client. The server must be running first. If using a different port, update the mcp-remote URL accordingly.
AI diagram generation fails or returns errors
Check that your LLM API key is entered correctly in the Settings panel. Verify the key has sufficient credits and that you selected the correct provider. Try a simple test prompt in the application's built-in chat before using it through MCP.
npm install fails with Node.js version errors
Drawio2Go requires Node.js 22.x or higher. Check your version with `node --version` and upgrade via nvm (`nvm install 22 && nvm use 22`) or the official Node.js installer.
Frequently Asked Questions about DrawIO AI Editor
What is DrawIO AI Editor?
DrawIO AI Editor is a Model Context Protocol (MCP) server that modern drawio editor application. ai-powered, human-ai collaboration | ai 加持，人机共绘drawio It connects AI assistants to external tools and data sources through a standardized interface.
How do I install DrawIO AI Editor?
Follow the installation instructions on the DrawIO AI Editor GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with DrawIO AI Editor?
DrawIO AI Editor works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is DrawIO AI Editor free to use?
Yes, DrawIO AI Editor is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
DrawIO AI Editor Alternatives — Similar Developer Tools Servers
Looking for alternatives to DrawIO AI Editor? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up DrawIO AI Editor in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use DrawIO AI Editor?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.