Allows AI agents to generate and edit draw.io (diagrams.net) diagrams with real-time browser preview, version history, and export to .drawio files.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Next AI Draw.io MCP Server Create a flowchart for user authentication."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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"]
}
}
}Related MCP server: Excalidraw MCP Server
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"]
}
}
}Click the MCP Servers icon in Cline's top menu bar
Select the Configure tab
Click Configure MCP Servers to edit cline_mcp_settings.json
Add the drawio server:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latestUse the standard MCP configuration with:
Command: npx
Args: ["@next-ai-drawio/mcp-server@latest"]
Restart your MCP client after updating config
Ask the AI to create a diagram:
"Create a flowchart showing user authentication with login, MFA, and session management"
The diagram appears in your browser in real-time!
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)
Tool | Description |
| Opens browser with real-time diagram preview |
| Create a new diagram from XML (requires |
| Edit diagram by ID-based operations (update/add/delete cells) |
| Get the current diagram XML |
| Save diagram to a |
┌─────────────────┐ stdio ┌─────────────────┐
│ Claude Desktop │ <───────────> │ MCP Server │
│ (AI Agent) │ │ (this package) │
└─────────────────┘ └────────┬────────┘
│
┌────────▼────────┐
│ Embedded HTTP │
│ Server (:6002) │
└────────┬────────┘
│
┌────────▼────────┐
│ User's Browser │
│ (draw.io embed) │
└─────────────────┘MCP Server receives tool calls from Claude via stdio
Embedded HTTP Server serves the draw.io UI and handles state
Browser shows real-time diagram updates via polling
Variable | Default | Description |
|
| Port for the embedded HTTP server |
|
| Base URL for the draw.io embed. Set this to use a self-hosted draw.io instance for private deployments. |
For security-sensitive environments that require private deployment of draw.io:
{
"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:
docker run -d -p 8080:8080 jgraph/drawioThen set DRAWIO_BASE_URL=http://localhost:8080 (or your server's URL).
If port 6002 is in use, the server will automatically try the next available port (up to 6020).
Or set a custom port:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"],
"env": { "PORT": "6003" }
}
}
}Call start_session first to open the browser window.
Check that the browser URL has the ?mcp= query parameter. The MCP session ID connects the browser to the server.
Apache-2.0
Create a NEW diagram from mxGraphModel XML. Use this when creating a diagram from scratch or replacing the current diagram entirely.
CRITICAL: You MUST provide the 'xml' argument in EVERY call. Do NOT call this tool without xml.
When to use this tool:
Creating a new diagram from scratch
Replacing the current diagram with a completely different one
Major structural changes that require regenerating the diagram
When to use edit_diagram instead:
Small modifications to existing diagram
Adding/removing individual elements
Changing labels, colors, or positions
XML FORMAT - Full mxGraphModel structure:
LAYOUT CONSTRAINTS:
Keep all elements within x=0-800, y=0-600 (single page viewport)
Start from margins (x=40, y=40), keep elements grouped closely
Use unique IDs starting from "2" (0 and 1 are reserved)
Set parent="1" for top-level shapes
Space shapes 150-200px apart for clear edge routing
EDGE ROUTING RULES:
Never let multiple edges share the same path - use different exitY/entryY values
For bidirectional connections (A↔B), use OPPOSITE sides
Always specify exitX, exitY, entryX, entryY explicitly in edge style
Route edges AROUND obstacles using waypoints (add 20-30px clearance)
Use natural connection points based on flow (not corners)
COMMON STYLES:
Shapes: rounded=1; fillColor=#hex; strokeColor=#hex
Edges: endArrow=classic; edgeStyle=orthogonalEdgeStyle; curved=1
Text: fontSize=14; fontStyle=1 (bold); align=center
| Name | Required | Description | Default |
|---|---|---|---|
| xml | Yes | REQUIRED: The complete mxGraphModel XML. Must always be provided. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It clearly states that the tool replaces the current diagram entirely and requires the xml argument in every call. It also discloses layout constraints, ID conventions, and edge routing rules, which are critical behavioral details for the agent to invoke correctly.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Despite length, the description is well-structured with clear headers (When to use, XML Format, Layout Constraints, Edge Routing, Common Styles) and critical content front-loaded with a CRITICAL warning. Every section earns its place, providing necessary detail for correct usage.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has high complexity (mxGraphModel XML, layout rules, edge routing), and the description covers all these aspects comprehensively. It provides a full XML example, constraints, styles, and even routing logic. While there is no output schema or return value description, for a create operation this is sufficient. It fully enables an agent to use the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Although schema coverage is 100% for the xml parameter, the description goes far beyond the schema by providing a complete mxGraphModel XML example, mandatory argument warning, and detailed layout/edge/styling constraints. This adds substantial meaning that the schema alone does not convey.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a clear verb+resource: "Create a NEW diagram from mxGraphModel XML." It explicitly distinguishes from edit_diagram by stating this tool is for creating from scratch or replacing entirely, versus small modifications. This directly addresses sibling differentiation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description has explicit "When to use" and "When to use edit_diagram instead" sections. It provides concrete use cases (creating new, replacing, major structural changes) and explicitly names the alternative tool for smaller edits. This is exemplary guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Edit the current diagram by ID-based operations (update/add/delete cells).
⚠️ REQUIRED: You MUST call get_diagram BEFORE this tool! This fetches the latest state from the browser including any manual user edits. Skipping get_diagram WILL cause user's changes to be LOST.
Workflow:
Call get_diagram to see current cell IDs and structure
Use the returned XML to construct your edit operations
Call edit_diagram with your operations
Operations:
add: Add a new cell. Provide cell_id (new unique id) and new_xml.
update: Replace an existing cell by its id. Provide cell_id and complete new_xml.
delete: Remove a cell by its id. Only cell_id is needed.
For add/update, new_xml must be a complete mxCell element including mxGeometry.
Example - Add a rectangle: {"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id="rect-1" value="Hello" style="rounded=0;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>"}]}
Example - Update a cell: {"operations": [{"operation": "update", "cell_id": "3", "new_xml": "<mxCell id="3" value="New Label" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>"}]}
Example - Delete a cell: {"operations": [{"operation": "delete", "cell_id": "rect-1"}]}
| Name | Required | Description | Default |
|---|---|---|---|
| operations | Yes | Array of operations to apply |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full transparency burden. It discloses a critical behavioral trait: skipping get_diagram WILL cause user's changes to be LOST. It also explains that new_xml must be a complete mxCell element including mxGeometry, and clarifies requirements for each operation (e.g., delete only needs cell_id). This goes beyond the schema and provides essential side-effect awareness.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with clear sections: warning, workflow, operations, and examples. Despite its length, every part contributes necessary information—no filler or redundancy. The warning is prominent, and the examples are efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (three operations, XML structure, prerequisite dependency), the description is thoroughly complete. It covers the required get_diagram call, operation semantics, exact XML format, and illustrative examples. No output schema exists, but for a mutation tool the return value is not essential; the description fully equips an agent to use it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but the description adds substantial meaning: it explains the three operation enum values, that new_xml is required for add/update, that cell_id must be unique for add, and provides full valid XML examples. This goes well beyond the schema's bare property descriptions and gives the agent precise construction guidance.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb+resource+scope: 'Edit the current diagram by ID-based operations (update/add/delete cells).' It clearly distinguishes itself from sibling tools by focusing on the current diagram and the ID-based nature, while get_diagram is for fetching and create_new_diagram for creating new diagrams.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states a mandatory prerequisite: '⚠️ REQUIRED: You MUST call get_diagram BEFORE this tool!' and provides a step-by-step workflow. It also includes detailed operation semantics and three concrete examples covering each operation type, making usage conditions explicit and actionable.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Export the current diagram to a .drawio file.
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | File path to save the diagram (e.g., ./diagram.drawio) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It only states the export action without disclosing whether existing files are overwritten, if a session is required, or how errors are handled. This is a significant gap for a write operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence with no fluff. It efficiently conveys the action and target format, making it concise and well-structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the simplicity of the tool (one parameter, no output schema, no annotations), the description is minimally adequate. However, it assumes the existence of a 'current diagram' without stating prerequisites like an active session or open diagram, leaving some context incomplete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single 'path' parameter, which includes a clear description and example. The tool description adds no additional meaning beyond the schema, so the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool exports the current diagram to a .drawio file, specifying the verb and resource. It is distinct from siblings like start_session, create_new_diagram, edit_diagram, and get_diagram, which cover session management and diagram CRUD operations.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies clear usage context: use when you need to save the current diagram as a .drawio file. However, it does not explicitly mention alternatives or when not to use it, such as when trying to load a diagram (which would use get_diagram).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get the current diagram XML (fetches latest from browser, including user's manual edits). Call this BEFORE edit_diagram if you need to update or delete existing elements, so you can see the current cell IDs and structure.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full transparency burden. It discloses that the tool fetches the latest state from the browser, includes manual edits, and that the output contains cell IDs and structure. However, it doesn't mention potential prerequisites (e.g., active session) or error behavior, which would make it more complete.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise, consisting of two purposeful sentences. The first sentence states the primary function and an important behavioral detail, while the second gives a targeted usage instruction. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter tool with no output schema, the description is exceptionally complete. It explains what the tool returns (diagram XML), the freshness guarantee (latest from browser, manual edits), and when to call it relative to edit_diagram. The only minor omission is potential session requirements, but this is not critical given the simplicity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the schema is trivially 100% covered. The description adds value by explaining what the output contains (XML with cell IDs and structure), which helps the agent understand the result even though there are no inputs to clarify.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Get the current diagram XML.' It specifically distinguishes this from sibling tools like edit_diagram by emphasizing it fetches the latest state including manual edits, which is a unique read-only function.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It provides explicit usage guidance: 'Call this BEFORE edit_diagram if you need to update or delete existing elements, so you can see the current cell IDs and structure.' This tells the agent exactly when to use this tool relative to an alternative.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Start a new diagram session and open the browser for real-time preview. Starts an embedded server and opens a browser window with draw.io. The browser will show diagram updates as they happen.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full behavioral burden. It discloses key traits: starts an embedded server, opens a browser window, and shows live diagram updates. However, it omits lifecycle details like how to stop the session and what happens to the server afterwards, and does not mention the return value.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences, front-loaded with the primary action. Each sentence adds a distinct piece of useful information: the session start, the embedded server/browser, and the real-time update behavior. No redundant or unnecessary text.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description accurately explains what happens during the session but leaves gaps around the return value (e.g., session ID or URL) and session termination/cleanup. Given the lack of an output schema and annotations, these omissions mean an agent may not know what to expect back or how to manage the session lifecycle. Adequate for a simple tool but with clear gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the baseline score is 4. The description adds context about the session's behavior but no parameter-specific details are needed since there are none.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly specifies the action 'Start a new diagram session' and the key feature 'real-time preview', distinguishing it from sibling tools like create_new_diagram or export_diagram. The mention of an embedded server and browser window adds specific context that clearly identifies this as a session-launching tool.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. It does not reference sibling tools, state prerequisites, or mention when not to use it. The usage context is implied (when real-time preview is needed) but never explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v1.0.2create_new_diagramedit_diagramexport_diagramget_diagramstart_sessionEach tool targets a distinct phase of the diagram workflow: session startup, creation, modification, retrieval, and export. The descriptions explicitly clarify the boundary between create_new_diagram and edit_diagram, preventing misselection.
All tool names follow a verb_noun pattern in snake_case (start_session, edit_diagram, get_diagram, export_diagram; create_new_diagram includes an adjective but still starts with a verb). There is no mixed case or inconsistent verb tense.
With 5 tools covering the complete lifecycle of a draw.io diagram, the count is well-scoped. It is not too small to be limiting nor too large to be confusing.
The tool set covers the full workflow: start a session, create a new diagram, read the current state, apply modifications (including add/update/delete operations), and export. No critical gaps are apparent for the stated purpose of diagram creation and editing.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Create, read and live-edit visual boards, Kanban plans, Gantt timelines and diagrams with AI agents.
Create diagrams in chat, rendered as live interactive draw.io diagrams. 10,000+ searchable shapes.
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/hj1003862396/draw-flow-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
