Next AI Draw.io — Claude Code MCP server for diagrams
This MCP server lets an agent build draw.io diagrams from project files and show them on a browser canvas you can edit. Useful when you and the agent share diagram work.
claude mcp add next-ai-drawio -- npx -y @next-ai-drawio/mcp-serverWhat Next AI Draw.io does
The agent uses its own tools to read project code and documents, then creates a diagram on a draw.io canvas in your browser. You can edit the canvas yourself, and the server reads those changes before the agent makes another edit. Existing .drawio and .drawio.svg files can be loaded; diagrams can be saved as .drawio, .png, .svg, or .drawio.svg.
Agent changes are briefly marked on the canvas, and Ctrl+Z reverts them. The server can inspect a diagram screenshot for overlaps and restore earlier versions. Add your own drawing guidance in ~/.next-ai-drawio/instructions.md. It runs through npx, with the draw.io editor bundled in the package, and needs an MCP-capable client. Codex asks for approval before tools that modify a diagram run.
What it helps with
- Draw a project architecture from its code and documents
- Load and revise an existing
.drawiodiagram - Ask the agent to change shapes selected on the canvas
- Inspect a diagram screenshot and fix overlaps
- Export a diagram as
.pngor.svg
Example prompts for the agent
- Read this project and draw its architecture on the draw.io canvas.
- Open
architecture.drawioand rearrange the selected shapes. - Check a screenshot of the diagram and fix overlapping elements.
How to install Next AI Draw.io
Platform CLI
claude mcp add next-ai-drawio -- npx -y @next-ai-drawio/mcp-serverPlatform CLI
codex mcp add mcp-server -- npx -y @next-ai-drawio/mcp-serverConfig file
{
"mcpServers": {
"mcp-server": {
"command": "npx",
"args": [
"-y",
"@next-ai-drawio/mcp-server"
]
}
}
}Config file
{
"servers": {
"mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@next-ai-drawio/mcp-server"
]
}
}
}Platform CLI
gemini mcp add mcp-server npx -y @next-ai-drawio/mcp-serverStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Next AI Draw.io
How do I install Next AI Draw.io in Claude Code?
Run claude mcp add next-ai-drawio -- npx -y @next-ai-drawio/mcp-server. This registers the MCP server as next-ai-drawio.
What does Next AI Draw.io do?
It lets an agent create and edit draw.io diagrams using project materials, while you work on the same browser canvas. You can also load existing diagrams and export them in several formats.
Can I reopen a saved diagram in a later conversation?
Yes. The server keeps diagrams and their versions. The agent can find a saved diagram with list_saved_diagrams and reopen it using start_session.
