MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview
Config is the same across clients — only the file and path differ.
{
"mcpServers": {
"drawio": {
"args": [
"@next-ai-drawio/mcp-server@latest"
],
"command": "npx"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
MCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with real-time browser preview.
Run this in your terminal to verify the server starts. Then let us know if it worked — your result helps other developers.
npx -y '@next-ai-drawio/mcp-server' 2>&1 | head -1 && echo "✓ Server started successfully"
After testing, let us know if it worked:
Five weighted categories — click any category to see the underlying evidence.
No known CVEs.
Checked @next-ai-drawio/mcp-server against OSV.dev.
Be the first to review
Have you used this server?
Share your experience — it helps other developers decide.
Sign in to write a review.
Others in design
MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode
Official Miro MCP server - Supports context to code and creating diagrams, docs, and data tables.
AI image generation and editing with prompt optimization and quality presets. Powered by Nano Banana
Coinbase Design System - MCP Server
MCP Security Weekly
Get CVE alerts and security updates for io.github.hj1003862396/draw-flow-mcp-server and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
MCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with real-time browser preview.
Self-contained - includes an embedded HTTP server, no external dependencies required.
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Add to your VS Code settings (.vscode/mcp.json in workspace or user settings):
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Add to Cursor MCP config (~/.cursor/mcp.json):
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
cline_mcp_settings.json{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
Use the standard MCP configuration with:
npx["@next-ai-drawio/mcp-server@latest"]"Create a flowchart showing user authentication with login, MFA, and session management"
.drawio filesembed.diagrams.net by default, configurable via DRAWIO_BASE_URL)| Tool | Description |
|---|---|
start_session | Opens browser with real-time diagram preview |
create_new_diagram | Create a new diagram from XML (requires xml argument) |
edit_diagram | Edit diagram by ID-based operations (update/add/delete cells) |
get_diagram | Get the current diagram XML |
export_diagram | Save diagram to a .drawio file |
┌─────────────────┐ stdio ┌─────────────────┐
│ Claude Desktop │ <───────────> │ MCP Server │
│ (AI Agent) │ │ (this package) │
└─────────────────┘ └────────┬────────┘
│
┌────────▼────────┐
│ Embedded HTTP │
│ Server (:6002) │
└────────┬────────┘
│
┌────────▼────────┐
│ User's Browser │
│ (draw.io embed) │
└─────────────────┘
|