Draw.io MCP Server

An MCP (Model Context Protocol) server for AI-powered diagram generation using draw.io. This server exposes tools to create intelligent diagrams of different types (BPMN, UML, ER, Architecture, etc.) through Streamable HTTP.

🚀 Features

• AI-powered diagram generation: Create diagrams from natural language descriptions
• Multiple diagram types: BPMN, UML, ER, Architecture, Networks, and more
• MCP over HTTP Protocol: Compatible with MCP clients using Streamable HTTP
• Session management: Support for multiple concurrent sessions
• REST API: Additional endpoints for monitoring and documentation

📋 Supported Diagram Types

BPMN (Business Process Model and Notation)

• Business processes
• Collaborations
• Choreographies

UML (Unified Modeling Language)

• Class diagrams
• Sequence diagrams
• Use case diagrams
• Activity diagrams
• State diagrams
• Component diagrams
• Deployment diagrams

Database

• ER (Entity-Relationship) diagrams
• Database schemas
• Conceptual models

Architecture

• System architecture
• Microservices
• Layered architecture
• C4 diagrams (Context, Container, Component)
• Cloud architecture

Network & Infrastructure

• Network topology
• Infrastructure
• Cloud architecture

General

• Flowcharts
• Organizational charts
• Mind maps
• Wireframes
• Gantt charts

🛠️ Installation

# Clone the repository
git clone <repository-url>
cd drawio-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Start the server
npm start

🌐 Usage with Streamable HTTP

The server exposes an MCP endpoint through Streamable HTTP at http://localhost:3000/mcp.

Available Endpoints

• POST /mcp: Client-to-server MCP communication
• GET /mcp: Server-to-client notifications via Server-Sent Events
• DELETE /mcp: Session termination
• GET /health: Server health check
• GET /: API documentation

Configuration for Cline

To use with Cline, add the following configuration to your MCP file:

{
  "mcpServers": {
    "drawio-diagram-generator": {
      "command": "node",
      "args": ["build/index.js"],
      "cwd": "/path/to/drawio-mcp-server",
      "env": {
        "HTTP_PORT": "3000"
      }
    }
  }
}

🔧 Available MCP Tools

create_diagram

Creates a new diagram with intelligent AI-based generation.

Parameters:

• name (required): Diagram file name
• type (required): Diagram type (see supported types)
• description (recommended): Natural language description for AI generation
• format (optional): File format (default: 'drawio')
• outputPath (optional): Output directory
• complexity (optional): 'simple' or 'detailed' (default: 'detailed')
• language (optional): Language for labels (default: 'es')

Example:

{
  "name": "sales-process",
  "type": "bpmn-process",
  "description": "Sales process from initial contact to closure, including follow-up and billing",
  "complexity": "detailed",
  "language": "en"
}

get_diagram_types

Gets the list of supported diagram types with their descriptions.

📚 Available MCP Resources

diagrams://types/supported

Provides information about all supported diagram types.

🧪 Usage Examples

Create a BPMN diagram

{
  "tool": "create_diagram",
  "arguments": {
    "name": "purchase-process",
    "type": "bpmn-process",
    "description": "Corporate purchasing process including request, approval, purchase order, receipt and payment"
  }
}

Create an architecture diagram

{
  "tool": "create_diagram",
  "arguments": {
    "name": "microservices-architecture",
    "type": "microservices",
    "description": "Microservices architecture for e-commerce with API Gateway, user, product, order and payment services"
  }
}

Create an ER diagram

{
  "tool": "create_diagram",
  "arguments": {
    "name": "store-data-model",
    "type": "er-diagram",
    "description": "Data model for online store with users, products, categories, orders and payments"
  }
}

🔍 Monitoring

Check server status

curl http://localhost:3000/health

View documentation

Visit http://localhost:3000/ in your browser to see the complete API documentation.

🏗️ Architecture

The server is built with:

• Express.js: HTTP server
• MCP SDK: Communication protocol with MCP clients
• TypeScript: Static typing
• AI Generators: Intelligent analysis of descriptions
• Draw.io: Compatible diagram format

Project Structure

src/
├── index.ts                 # Main server with Streamable HTTP
├── types/                   # TypeScript type definitions
├── tools/                   # MCP tools
├── ai/                      # AI analyzer for descriptions
├── generators/              # Intelligent diagram generators
└── utils/                   # Utilities for format conversion

🤝 Contributing

1. Fork the project
2. Create a feature branch (git checkout -b feature/new-functionality)
3. Commit your changes (git commit -am 'Add new functionality')
4. Push to the branch (git push origin feature/new-functionality)
5. Open a Pull Request

📄 License

This project is under the MIT License. See the LICENSE file for more details.

🆘 Support

If you encounter any issues or have questions:

1. Check the documentation at http://localhost:3000/
2. Verify server status at http://localhost:3000/health
3. Check server logs for specific errors
4. Open an issue in the project repository

---

Enjoy creating intelligent diagrams with AI! 🎨✨