# next-ai-draw-io: AI-driven draw.io Diagrams via MCP Client

> next-ai-draw-io enables AI agents to draw and edit draw.io diagrams through chat. This MCP Client integrates directly with tools like Claude Desktop, Cursor, and VS Code, allowing developers to generate and modify complex diagrams using natural language. It streamlines diagram creation and editing within existing AI-powered workflows.

**Published:** 2026-10-20T12:16:33.966+00:00

**Keywords:** next-ai-draw-io,mcp-client,drawio-ai,diagram-generation

# next-ai-draw-io: AI-driven draw.io Diagrams via MCP Client

The `next-ai-draw-io` project provides an MCP Client that allows AI agents to create and modify draw.io diagrams through conversational prompts. This means your AI assistant in Claude Desktop, Cursor, or VS Code can generate architecture diagrams, flowcharts, and more, directly on a canvas, using a natural language interface.

## Integrating `next-ai-draw-io` with Your AI Agent

The core utility of `next-ai-draw-io` for developers lies in its MCP integration, which exposes its diagramming capabilities to various AI clients. The project ships with an MCP server that your AI agent can call as an external tool.

For clients like VS Code and Cursor, installation is streamlined. A single click on the provided badges will add the `drawio` server to your client's MCP configuration.

Alternatively, you can manually add the server to your MCP configuration. For example, in a generic MCP client, you'd add this JSON snippet:

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}
```

Claude Code offers two methods for integration. You can add the server via a command-line instruction, making it available across all your projects:

```bash
claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest
```

Additionally, for Claude Code versions 2.1.275 or later, `next-ai-draw-io` is available as a plugin in the Claude Code community marketplace:

```text
/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community
```

Once integrated, you can prompt your AI agent, for instance, with "a flowchart of user authentication with login, MFA and session management." The AI will then draw the diagram, which appears in your browser as it's being generated.

## AI-Powered Diagram Creation and Editing

The MCP server for `next-ai-draw-io` brings many of the web application's drawing features directly into your AI agent's workflow. The AI operates on a canvas that supports the same drawing rules and icon libraries as the standalone web app, including AWS, Azure, GCP, and Kubernetes.

Key capabilities include:

*   **Generative Drawing:** Create architecture diagrams, flowcharts, and sequence diagrams from single-sentence prompts.
*   **Contextual Editing:** Select specific shapes on the canvas, and the AI will focus its edits only on that selection. Changes stream onto the canvas, with newly modified shapes highlighted.
*   **Visual Feedback:** The AI's changes are outlined, and a single `Ctrl+Z` on the canvas reverts the last AI modification.
*   **Diagram Understanding:** The AI can "look" at the rendered diagram using a built-in screenshot tool, enabling it to fix or refine existing diagrams based on visual context.
*   **Input Flexibility:** Upload screenshots or sketches for the AI to redraw, or provide PDF, Markdown, or code files to generate diagrams of their content.
*   **Version Control:** Every AI-driven change is captured as a version card with a thumbnail, allowing comparison, restoration, or undo operations.
*   **Standard draw.io Functionality:** Diagrams remain standard draw.io files, supporting double-click renaming, dragging, restyling, multiple pages, and export options like `.drawio`, `.png`, `.svg`, or `.drawio.svg`.

The client also supports 25 model providers, including an OpenAI-compatible preset for custom URLs, allowing users to enter their own API keys which remain client-side.

## References

*   [next-ai-draw-io on GitHub](https://github.com/DayuanJiang/next-ai-draw-io)
*   [Model Context Protocol Documentation](https://modelcontextprotocol.io/introduction)
*   [next-ai-draw-io on model-context-protocol.com](https://model-context-protocol.com/clients/)

## Related Repository

- [next-ai-draw-io](https://model-context-protocol.com/clients/next-ai-draw-io)

**Source:** https://model-context-protocol.com/blog/next-ai-draw-io-ai-driven-drawio-diagrams-via-mcp-client-mcp-client-guide