Усильте агента
Установка от издателя. Не эндпоинт PlugMCP.
Host a copy with our keys and logs.
В реестре пока нет пакетного релиза. Следуйте README репозитория.
Удалённый URL или команда на вашем компьютере? Чем различаются два способа установки
Запустить на PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
ЗапускОт издателя
A Model Context Protocol (MCP) server that provides programmatic tools for creating and managing draw.io diagrams using mxgraph. Generate architecture diagrams, flowcharts, and other visualizations through a clean API that works with Claude Desktop and other MCP-compatible clients.
MCP server for generating draw.io diagrams using mxgraph. Create and manage diagrams programmatically or with AI and VSCode extension.
This server enables you to build diagrams incrementally by providing stateless tools that operate on .drawio.svg files. Each operation specifies the target file, making it compatible with VSCode's draw.io extension while maintaining a clean separation between diagram state and server operations.
.drawio.svg files that work seamlessly with VSCode draw.io extension
Add this configuration to your MCP client (e.g., Claude Desktop, Cursor):
{
"mcpServers": {
"drawio-diagrams": {
"command": "npx",
"args": ["drawio-mcp"]
}
}
}
The server supports both absolute and relative file paths:
/Users/username/project/diagrams/architecture.drawio.svg./diagrams/architecture.drawio.svg (when cwd is configured)All diagram files should use the .drawio.svg extension for proper VSCode integration.
All primary tools support batch operations, allowing you to perform multiple actions in a single MCP call for improved efficiency:
add_nodes: Create multiple nodes simultaneouslyedit_nodes: Update multiple nodes/edges simultaneouslylink_nodes: Create multiple connections simultaneouslyremove_nodes: Remove multiple nodes simultaneouslyThis approach reduces network overhead and provides atomic operations - either all changes succeed or none are applied.
Create a new empty diagram file.
Parameters:
file_path (string, required): Path for the new diagram fileExample:
{
"file_path": "./diagrams/system-architecture.drawio.svg"
}
Add one or more nodes to an existing diagram in a single operation. Optionally run an automatic layout after insertion.
Parameters:
file_path (string, required): Path to the diagram filelayout (object, optional): Automatic layout configuration
algorithm (string, required if layout is provided): One of hierarchical, circle, organic, compact-tree, radial-tree, partition, stackoptions (object, optional): Algorithm-specific options
hierarchical only: direction ∈ "top-down" | "left-right" (default: "top-down")nodes (array, required): Array of node objects to add, each containing:
id (string, required): Unique identifier for the nodetitle (string, required): Display label (supports newlines with \n)x (number, required): X coordinate positiony (number, required): Y coordinate positionkind (string, required): Node shape typeparent (string, optional): Parent node ID (default: "root")width (number, optional): Custom widthheight (number, optional): Custom heightcorner_radius (integer, optional): Corner radius in pixels (≥ 1). Only applies to RoundedRectangle. Default is 12 when kind is RoundedRectangle and corner_radius is omitted. The effective visual radius is capped by draw.io/mxGraph to at most half of the shorter side of the node.Available Node Types:
Rectangle: Standard rectangular nodeEllipse: Oval-shaped nodeCylinder: Database/storage representationCloud: Cloud service representationSquare: Square with fixed aspect ratioCircle: Circular nodeStep: Process step shapeActor: UML actor (stick figure)Text: Text-only nodeRoundedRectangle: Rectangle with rounded corners (supports corner_radius in pixels)Example (Single Node):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"nodes": [
{
"id": "user-service",
"title": "User Service\nAPI Layer",
"kind": "Rectangle",
"x": 100,
"y": 150,
"width": 120,
"height": 80
}
]
}
Example (Multiple Nodes):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"nodes": [
{
"id": "user-service",
"title": "User Service",
"kind": "Rectangle",
"x": 100,
"y": 150
},
{
"id": "database",
"title": "Primary DB",
"kind": "Cylinder",
"x": 300,
"y": 150
},
{
"id": "cache",
"title": "Redis Cache",
"kind": "Cylinder",
"x": 200,
"y": 300
}
]
}
Example (With Layout):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"layout": {
"algorithm": "hierarchical",
"options": { "direction": "left-right" }
},
"nodes": [
{ "id": "api", "title": "API", "kind": "Rectangle", "x": 40, "y": 40 },
{ "id": "service", "title": "Service", "kind": "Rectangle", "x": 200, "y": 40 },
{ "id": "db", "title": "DB", "kind": "Cylinder", "x": 360, "y": 40 }
]
}
Note: The layout runs once after all insertions and considers existing edges in the diagram file. For best results when edges are created or modified later, a dedicated layout_diagram tool is recommended (to be added).
Create one or more connections between existing nodes in a single operation.
Parameters:
file_path (string, required): Path to the diagram fileedges (array, required): Array of edge objects to create, each containing:
from (string, required): Source node IDto (string, required): Target node IDtitle (string, optional): Connection labeldashed (boolean, optional): Whether to use dashed line stylereverse (boolean, optional): Whether to reverse arrow directionundirected (boolean, optional): Create an undirected edge (no arrows). Overrides reverse.Example (Single Connection):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"edges": [
{
"from": "user-service",
"to": "database",
"title": "queries",
"dashed": true
}
]
}
Example (Multiple Connections):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"edges": [
{
"from": "user-service",
"to": "database",
"title": "queries"
},
{
"from": "user-service",
"to": "cache",
"title": "cache lookup",
"dashed": true
},
{
"from": "database",
"to": "cache",
"title": "invalidate",
"reverse": true
}
]
}
Example (Undirected Connection):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"edges": [
{
"from": "service-a",
"to": "service-b",
"title": "peering",
"undirected": true
}
]
}
Notes on undirected behavior:
undirected is true, the edge is rendered without arrowheads (no arrow at either end). The reverse parameter is ignored; dashed is still respected.${min(from,to)}-2-${max(from,to)} when a new edge is created.link_nodes again will update that existing edge’s label and style rather than creating a duplicate. The existing edge ID is preserved (no renaming).Modify properties of one or more existing nodes or edges in a single operation.
Parameters:
file_path (string, required): Path to the diagram filenodes (array, required): Array of node/edge objects to update, each containing:
id (string, required): Node or edge ID to updatetitle (string, optional): New display labelkind (string, optional): New shape type (nodes only)x (number, optional): New X coordinate (nodes only)y (number, optional): New Y coordinate (nodes only)width (number, optional): New width (nodes only)height (number, optional): New height (nodes only)corner_radius (integer, optional): Corner radius in pixels (≥ 1). Applies when the node is RoundedRectangle. If switching kind to RoundedRectangle and omitted, default 12 is applied. Ignored for other kinds.Example (Single Node):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"nodes": [
{
"id": "user-service",
"title": "Updated User Service",
"x": 200,
"y": 100
}
]
}
Example (Multiple Nodes):
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"nodes": [
{
"id": "user-service",
"title": "Auth Service",
"kind": "Rectangle",
"x": 200,
"y": 100
},
{
"id": "database",
"title": "Updated Database",
"x": 400,
"y": 200
},
{
"id": "connection-1",
"title": "secure connection"
}
]
}
Remove one or more nodes from a diagram.
Parameters:
file_path (string, required): Path to the diagram fileids (array, required): Array of node IDs to removeExample:
{
"file_path": "./diagrams/system-architecture.drawio.svg",
"ids": ["old-service", "deprecated-db"]
}
Retrieve information about a diagram including nodes and connections.
Parameters:
file_path (string, required): Path to the diagram fileExample:
{
"file_path": "./diagrams/system-architecture.drawio.svg"
}
Diagrams are saved as .drawio.svg files with embedded metadata:
src/
├── Graph.ts # Core graph data structure
├── GraphFileManager.ts # File I/O operations
├── Logger.ts # Logging utilities
├── index.ts # MCP server entry point
├── mcp/ # MCP tool implementations
│ ├── McpServer.ts # Server framework
│ ├── NewDiagramTool.ts
│ ├── AddNodeTool.ts # Supports batch operations (add_nodes)
│ ├── LinkNodesTools.ts # Supports batch operations (link_nodes)
│ ├── EditNodeTool.ts # Supports batch operations (edit_nodes)
│ ├── RemoveNodesTool.ts # Supports batch operations (remove_nodes)
│ └── GetDiagramInfoTool.ts
└── mxgraph/ # mxgraph integration
├── index.ts
└── jsdom.ts
# Install dependencies
npm install
# Run TypeScript compilation
npm run build
# Start development server
npm start
# Run linting
npm run lint
MCP server for generating draw.io diagrams using mxgraph. Create and manage diagrams programmatically or with AI and VSCode extension.
Инструменты
Списка инструментов пока нет. У удалённых серверов он появляется после первой проверки состояния.
FAQ
Скопируйте на этой странице конфигурацию stdio для Cursor, Claude Desktop, Claude Code или VS Code. Она использует установку издателя, а не прокси PlugMCP.
В этой записи не указано обязательных переменных окружения.
Drawio работает локально через stdio.
Последняя проверка: 2026-10-27. MCP server for generating draw.io diagrams using mxgraph. Create and manage diagrams programmatically or with AI and VSCode extension.
