Draw Flow Mcp Server

io.github.hj1003862396Published by GitHub account hj1003862396v1.0.2Updated Oct 24, 2026

MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview

The publisher's own server: draw.io

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

A local MCP server that lets an AI assistant generate and edit draw.io diagrams, with live preview in the browser and export to .drawio files.

What you can do
Start a diagram session that opens a browser window with a live draw.io preview and keeps it updated as the assistant works, with version history for restoring earlier states and a session ID linking browser to server. Create a new diagram from XML supplied by the assistant. Edit an existing diagram through ID-based cell operations (update, add, delete). Read back the current diagram XML and export the diagram to a .drawio file.
When to use it
Useful when you want an assistant to turn a plain-language description into flowcharts or architecture diagrams and watch them appear and change in the browser, or to revise and export existing draw.io diagrams.
Requirements
Runs locally over stdio, typically launched with npx, so Node.js is needed. It embeds an HTTP server on port 6002 by default (falls back up to 6020) and opens a browser window. The draw.io UI loads from embed.diagrams.net unless DRAWIO_BASE_URL points to a self-hosted instance; PORT and DRAWIO_BASE_URL are optional settings. No accounts or API keys are declared.
Before you install
The browser preview loads the draw.io UI from embed.diagrams.net by default, so diagram content may reach that third party; set DRAWIO_BASE_URL to a self-hosted instance for private or security-sensitive work. The server writes .drawio files to disk when exporting and opens a local HTTP port. Diagrams are created and edited at the assistant's direction, so review generated content before relying on it.

Installation

In SourceWeft

  1. Open Draw Flow Mcp Server in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

Next AI Draw.io MCP Server

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.

Quick Start

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

Installation

Claude Desktop

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

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

VS Code

Add to your VS Code settings (.vscode/mcp.json in workspace or user settings):

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

Cursor

Add to Cursor MCP config (~/.cursor/mcp.json):

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

Cline (VS Code Extension)

  1. Click the MCP Servers icon in Cline's top menu bar
  2. Select the Configure tab
  3. Click Configure MCP Servers to edit cline_mcp_settings.json
  4. Add the drawio server:
json
{  "mcpServers": {    "drawio": {      "command": "npx",      "args": ["@next-ai-drawio/mcp-server@latest"]    }  }}

Claude Code CLI

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

Other MCP Clients

Use the standard MCP configuration with:

  • Command: npx
  • Args: ["@next-ai-drawio/mcp-server@latest"]

Usage

  1. Restart your MCP client after updating config
  2. Ask the AI to create a diagram:

    "Create a flowchart showing user authentication with login, MFA, and session management"

  3. The diagram appears in your browser in real-time!

Features

  • Real-time Preview: Diagrams appear and update in your browser as the AI creates them
  • Version History: Restore previous diagram versions with visual thumbnails - click the clock button (bottom-right) to browse and restore earlier states
  • Natural Language: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
  • Edit Support: Modify existing diagrams with natural language instructions
  • Export: Save diagrams as .drawio files
  • Self-contained: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net by default, configurable via DRAWIO_BASE_URL)

Available Tools

ToolDescription
start_sessionOpens browser with real-time diagram preview
create_new_diagramCreate a new diagram from XML (requires xml argument)
edit_diagramEdit diagram by ID-based operations (update/add/delete cells)
get_diagramGet the current diagram XML
export_diagramSave diagram to a .drawio file

How It Works

┌─────────────────┐     stdio      ┌─────────────────┐│  Claude Desktop │ <───────────> │   MCP Server    ││    (AI Agent)   │               │  (this package) │└─────────────────┘               └────────┬────────┘                                          │                                 ┌────────▼────────┐                                 │ Embedded HTTP   │                                 │ Server (:6002)  │                                 └────────┬────────┘                                          │                                 ┌────────▼────────┐                                 │  User's Browser │                                 │ (draw.io embed) │                                 └─────────────────┘
  1. MCP Server receives tool calls from Claude via stdio
  2. Embedded HTTP Server serves the draw.io UI and handles state
  3. Browser shows real-time diagram updates via polling

Configuration

VariableDefaultDescription
PORT6002Port for the embedded HTTP server
DRAWIO_BASE_URLhttps://embed.diagrams.netBase URL for the draw.io embed. Set this to use a self-hosted draw.io instance for private deployments.

Private Deployment (Self-hosted draw.io)

For security-sensitive environments that require private deployment of draw.io:

json
{  "mcpServers": {    "drawio": {      "command": "npx",      "args": ["@next-ai-drawio/mcp-server@latest"],      "env": {         "DRAWIO_BASE_URL": "https://drawio.your-company.com"      }    }  }}

You can deploy your own draw.io instance using the official Docker image:

bash
docker run -d -p 8080:8080 jgraph/drawio

Then set DRAWIO_BASE_URL=http://localhost:8080 (or your server's URL).

Troubleshooting

Port already in use

If port 6002 is in use, the server will automatically try the next available port (up to 6020).

Or set a custom port:

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

"No active session"

Call start_session first to open the browser window.

Browser not updating

Check that the browser URL has the ?mcp= query parameter. The MCP session ID connects the browser to the server.

License

Apache-2.0

Source: README.md at commit fe245b6

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v1.0.2LatestSep 16, 2026

Score

40% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

    Declare a license in the repository or the registry entry.

Other Draw integrations

draw.io

io.drawOfficial publisher

Official draw.io server that lets an assistant create interactive diagrams from Mermaid or draw.io XML and look up shapes from draw.io's stencil libraries.

Streamable HTTPWeb executable
Developer Tools3 toolsNov 7, 2026

ChemDraw MCP

Published by GitHub account glebo309

Experimental local MCP server that lets an assistant drive desktop ChemDraw on Apple Silicon Macs to draw, edit, lay out and export chemical structures.

STDIODesktop only
Developer ToolsNot validated · the package type cannot run in the sandboxNov 5, 2026

DrawOffer 职绘

Published by GitHub account ql-link

Lets an AI assistant read your DrawOffer job-search resumes, saved jobs and application records, and optionally save new jobs and applications.

STDIODesktop only
Productivity & WorkflowNot validated · the server did not startOct 30, 2026

SKETCHTALK – Draw to AI

jp.twelvetone

Mac app that lets you draw on a live web page, Simulator or Mac window and hand those marks to Claude Code.

STDIODesktop only
Developer ToolsNot validated yetOct 30, 2026

Next AI Draw.io

Published by GitHub account DayuanJiang

Lets an AI agent draw and edit draw.io diagrams on a live browser canvas that you can also edit by hand.

STDIODesktop only
Developer ToolsNot validated yetNov 7, 2026