Drawio MCP Server

🚀 Draw.io MCP Server

Leverage the widely-used diagramming tool, Draw.io (Diagrams.net), to create immersive diagrams.

🚀 Quick Start

Let's use Draw.io (Diagrams.net), the most widely used diagramming tool, to create some atmospheric diagrams.

✨ Features

The Draw.io MCP Server is an implementation compliant with the Model Context Protocol (MCP), bringing powerful diagramming capabilities into AI functional systems. This integration enables:

• Seamless Draw.io Integration: Connect your MCP applications with Draw.io through rich diagramming features.
• Programmatic Diagram Control: Use MCP commands to create, modify, and manage diagram content.
• Intelligent Diagram Analysis: Retrieve detailed information about diagrams and their components for AI processing.
• Build Functional Systems: Generate architectural diagrams, visualize complex relationships, annotate technical documents, and programmatically create flowcharts and process maps.

As an MCP-compliant tool, it is compatible with any MCP client. This implementation is particularly suitable for AI systems that need to:

• Generate architectural diagrams.
• Visually decouple relationships.
• Annotate technical documents.
• Programmatically create flowcharts and process maps.

The tool supports two-way communication, allowing control of Draw.io instances and extraction of diagram information for further processing.

📦 Installation

Using the Draw.io MCP Server requires the following components:

Core Components

• Node.js (v18 or higher) - Runtime environment.
• Draw.io MCP Browser Extension - Enables communication between Draw.io and the MCP Server.

MCP Ecosystem

• MCP Client (e.g., MCP Inspector) - For testing and debugging the integration.
• LLM Supporting the Tool - Any language model capable of handling MCP tool calls (e.g., GPT-4, Claude 3, etc.).

Optional Development Components

• pnpm - Recommended package manager (npm/yarn are also supported).
• Chrome DevTools - Debugging tool when using the --inspect flag.

Note: The desktop application or web version of Draw.io must be available on the system running the MCP Server.

Connect to Claude Desktop

1. Install Claude Desktop.
2. Open the configuration file.
3. Add the following content:

{
  "architectures": {
    "default": "x64"
  },
  "proxies": {}
}

Connect to oterm

1. Run the following command in the terminal:

   npm install -g mcp-server
   

2. Start the server:

   mcp-server start
   

💻 Usage Examples

Basic Usage

• add-cell-of-shape: Add a cell of a specific shape.
  • Parameters:
    • shape_name - Name of the shape.
    • x, y - Coordinates (optional).
    • width, height - Dimensions (optional).
    • text - Text content (optional).
    • style - Additional style attributes (optional).

Advanced Usage

• add-edge: Create a connection between two cells.
  • Parameters:
    • source_id - ID of the source cell.
    • target_id - ID of the target cell.
    • text - Text label for the edge (optional).
    • style - Style attributes for the edge (optional).

📚 Documentation

Architecture

Development Guide