Next AI Draw.io

An MCP server that enables AI agents to generate and edit draw.io diagrams with real-time browser previews.

javascript

0

GitHub Stars

javascript

Language

4 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "hj1003862396-draw-flow-mcp-server": {
      "command": "npx",
      "args": [
        "@next-ai-drawio/mcp-server@latest"
      ],
      "env": {
        "PORT": "6002",
        "DRAWIO_BASE_URL": "https://embed.diagrams.net"
      }
    }
  }
}

You have a self-contained MCP server that lets AI agents generate and edit draw.io diagrams with real-time browser previews. It runs embedded in a local HTTP server and requires no external dependencies beyond the MCP client you use to communicate with it.

How to use

You connect an MCP client to the draw.io MCP server by configuring the client to run the MCP launcher command provided here. After restarting your MCP client, you can ask the AI to create or edit diagrams and see updates in your browser in real time. Typical workflows include creating a new diagram from a natural-language description, editing an existing diagram by natural-language instructions, and exporting diagrams as .drawio files. The embedded HTTP server serves the UI and maintains state for your browser-based previews.

How to install

Prerequisites: you need Node.js installed on your system. Ensure you have a recent version of Node and npm or npx available in your shell.

# Install the MCP server using the standard MCP launcher
npx @next-ai-drawio/mcp-server@latest

Configuration and usage notes

You can customize how the MCP server runs by wiring it into your MCP client configuration. The server supports an embedded HTTP interface on port 6002 by default and can point the draw.io UI to a self-hosted instance if needed.

Additional configuration and deployment

Default port and base URL for the embedded draw.io UI can be adjusted via environment variables when starting the server. The following environment variables are commonly used.

Troubleshooting and tips

If you encounter issues starting the server, ensure your MCP client is restarted after updating the configuration. If the browser does not reflect updates, confirm that the browser URL includes the correct MCP session identifier in the query string. In private deployments, ensure the DRAWIO_BASE_URL points to your self-hosted draw.io instance.

Security and deployment notes

The server is self-contained and can run offline, except for the draw.io UI which loads from a public embed domain by default. You can configure this to point to a private draw.io deployment for added security.

Glossary of features

Real-time preview, version history with visual thumbnails, natural language description and editing, and export capabilities to .drawio files are supported.

Notes on tools and endpoints

The server exposes a set of tools that enable starting sessions, creating and editing diagrams, retrieving current diagram XML, and exporting diagrams. Use these through your MCP client as you would with other MCP services.

Available tools

start_session

Opens a browser window and starts the real-time diagram preview session.

create_new_diagram

Creates a new diagram from XML input and initializes the editor state.

edit_diagram

Applies updates to an existing diagram by ID-based operations, including updating, adding, or deleting cells.

get_diagram

Retrieves the current diagram as XML for inspection or export.

export_diagram

Exports the current diagram to a .drawio file on disk.