What can you do with this server?

This MCP server enables AI assistants to generate professional Draw.io diagrams from natural language prompts, outputting valid Draw.io XML files (.drawio) that can be opened directly in Draw.io. **Key capabilities:** * **Flowcharts** - Create sequential flowcharts with process boxes, decision diamonds, terminators, data, documents, and delays, with automatic hierarchical layout and optional connection labels * **Sequence Diagrams** - Generate UML sequence diagrams showing interactions between participants with lifelines, activation bars, and support for solid and dashed lines (return messages) * **Network Diagrams** - Build network and architecture diagrams with custom-positioned nodes (rectangles, cylinders, databases, clouds, hexagons, ellipses) and labeled connections * **Entity Relationship Diagrams** - Create database schemas with entities, attributes, and relationship labels * **Custom Diagrams** - Design any diagram type with full control over 17+ shape types (including actors, notes, geometric shapes), precise positioning (x, y coordinates), dimensions, and connectors * **Unified Interface** - Single `create_diagram` tool with type-specific data structures for all diagram types * **File Management** - Automatically saves diagrams with customizable output directory via `DRAWIO_OUTPUT_DIR` environment variable * **Integration** - Works with Claude Desktop via Model Context Protocol (MCP) configuration

Which integrations are available for this server?

Generates Draw.io compatible diagrams (flowcharts, sequence diagrams, network diagrams, and custom diagrams) from natural language prompts, outputting XML files that can be opened directly in Draw.io Creates [UML](/mcp/servers/integrations/uml) sequence diagrams showing interactions between participants with support for messages and return flows

MCP Draw.io Diagram Server

A Model Context Protocol (MCP) server that generates Draw.io compatible diagrams from natural language prompts. This server enables AI assistants to create professional diagrams in XML format that can be opened directly in Draw.io.

Features

Unified Interface: Single tool (create_diagram) for all diagram types
Flowchart Generation: Create sequential flowcharts with automatic hierarchical layout and branching support
Sequence Diagrams: Generate professional UML sequence diagrams with lifelines and activation bars
Entity Relationship Diagrams (ERD): Create database schemas with entities and relationships
Network Diagrams: Build network and architecture diagrams with custom node positioning
Custom Diagrams: Full control over shapes, positions, and connections for any diagram type
Draw.io Compatible: Outputs valid Draw.io XML format that can be imported directly

Star History

Installation

Clone or download this repository
Install dependencies:

npm install

Configuration

Environment Variables

DRAWIO_OUTPUT_DIR: (Optional) Specifies the directory where diagram files will be saved. If not set, files are saved to the current working directory.

Example:

export DRAWIO_OUTPUT_DIR=/path/to/diagrams # Linux/macOS set DRAWIO_OUTPUT_DIR=C:\diagrams # Windows

Usage with Claude Desktop

Add this server to your Claude Desktop configuration file:

Windows: %APPDATA%\Claude\claude_desktop_config.json macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Basic Configuration

{ "mcpServers": { "diagram-master": { "command": "node", "args": ["D:\\TopSecret\\diagram-master\\index.js"] } } }

With Custom Output Directory

{ "mcpServers": { "diagram-master": { "command": "node", "args": ["D:\\TopSecret\\diagram-master\\index.js"], "env": { "DRAWIO_OUTPUT_DIR": "C:\\Users\\YourName\\Documents\\Diagrams" } } } }

Make sure to update the paths to match your actual installation directory and desired output location.

Available Tools

create_diagram

Creates a diagram of the specified type and saves it to a file.

Parameters:

filename: Name for the output .drawio file (extension added automatically)
type: Type of diagram to generate (flowchart, sequence, network, erd, custom)
data: Object containing diagram-specific data

1. Flowchart

Data Structure:

steps: Array of steps (id, label, type)
connections: Array of connections (from, to, label)

Example:

{ "type": "flowchart", "filename": "login-flow", "data": { "steps": [ { "id": "start", "label": "Start", "type": "terminator" }, { "id": "input", "label": "Input Credentials", "type": "data" }, { "id": "check", "label": "Valid?", "type": "decision" }, { "id": "end", "label": "End", "type": "terminator" } ], "connections": [ { "from": "start", "to": "input" }, { "from": "input", "to": "check" }, { "from": "check", "to": "end", "label": "Yes" }, { "from": "check", "to": "input", "label": "No" } ] } }

2. Sequence Diagram

Data Structure:

participants: Array of participant names
interactions: Array of interactions (from, to, message, dashed)

Example:

{ "type": "sequence", "filename": "api-call", "data": { "participants": ["Client", "Server", "DB"], "interactions": [ { "from": "Client", "to": "Server", "message": "Request" }, { "from": "Server", "to": "DB", "message": "Query" }, { "from": "DB", "to": "Server", "message": "Result", "dashed": true }, { "from": "Server", "to": "Client", "message": "Response", "dashed": true } ] } }

3. Entity Relationship Diagram (ERD)

Data Structure:

entities: Array of entities (id, name, attributes)
relationships: Array of relationships (from, to, label)

Example:

{ "type": "erd", "filename": "schema", "data": { "entities": [ { "id": "users", "name": "Users", "attributes": ["id", "email", "password"] }, { "id": "posts", "name": "Posts", "attributes": ["id", "user_id", "title"] } ], "relationships": [ { "from": "users", "to": "posts", "label": "1:N" } ] } }

4. Network Diagram

Data Structure:

nodes: Array of nodes (id, label, type, x, y)
connections: Array of connections (from, to, label)

5. Custom Diagram

Data Structure:

shapes: Array of shapes (id, label, type, x, y, width, height)
connectors: Array of connectors (from, to, label)

Output Format

The server automatically saves diagrams as .drawio files in the configured output directory. Open these files directly in Draw.io.

Development

Project Structure

diagram-master/ ├── index.js # MCP server implementation ├── drawio-generator.js # Draw.io XML generation utilities ├── package.json # Project dependencies ├── README.md # This file ├── CHANGELOG.md # Version history └── LICENSE # MIT License

License

MIT

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

Roadmap

Future enhancements:

Class diagrams and State machines
Style customization (colors, fonts, line styles)
Export to multiple formats (PNG, SVG, PDF)

Draw.io Diagram Server

MCP Draw.io Diagram Server

Features

Star History

Installation

Configuration

Environment Variables

Usage with Claude Desktop

Basic Configuration

With Custom Output Directory

Available Tools

create_diagram

1. Flowchart

2. Sequence Diagram

3. Entity Relationship Diagram (ERD)

4. Network Diagram

5. Custom Diagram

Output Format

Development

Project Structure

License

Contributing

Roadmap

Resources

Tools

Appeared in Searches

New MCP Servers

Latest Blog Posts

MCP directory API