drawio-mcp

# DrawIO MCP Server An MCP (Model Context Protocol) server for generating systems design visuals with draw.io. ## Overview This project implements an MCP server that can be integrated with AI assistants like Claude Desktop to generate system design diagrams using draw.io. ## Features - Generate system diagrams based on textual descriptions - Support for different diagram types (simple, detailed, cloud architecture) - Integration with draw.io for diagram creation and editing ## Prerequisites - Node.js (v18+) - npm or yarn - Claude Desktop or another MCP-compatible host (optional for testing) ## Installation 1. Clone this repository: ``` git clone https://github.com/yourusername/drawio-mcp.git cd drawio-mcp ``` 2. Install dependencies: ``` npm install ``` 3. Build the project: ``` npm run build ``` ## Usage ### Running the MCP Server To start the MCP server: ``` npm start ``` ### Integration with Claude Desktop To use this MCP server with Claude Desktop: 1. Create/edit a file called `claude_desktop_config.json` in the appropriate location for your OS: - MacOS: `~/Library/Application Support/Claude Desktop/claude_desktop_config.json` - Windows: `%APPDATA%\Claude Desktop\claude_desktop_config.json` - Linux: `~/.config/Claude Desktop/claude_desktop_config.json` 2. Add the following configuration to the file: ```json { "mcpServers": { "drawio-mcp": { "command": "node", "args": ["/path/to/drawio-mcp/build/index.js"] } } } ``` 3. Restart Claude Desktop. ### Using the Tools In Claude Desktop, you can now use the `generate_system_diagram` tool: 1. Ask Claude to create a system diagram based on your description 2. Claude will request permission to use the MCP tool 3. After approval, Claude will generate a diagram and provide a link to view it in draw.io Example prompt: ``` Generate a system diagram for a three-tier web application with a React frontend, Node.js backend, and PostgreSQL database. ``` ## Available Tools ### generate_system_diagram Generates a system diagram based on a textual description. Parameters: - `description` (required): Textual description of the system to diagram - `diagramType` (optional): Type of diagram to generate - Values: `simple` (default), `detailed`, `cloudArchitecture` ## Demo Web Interface A basic demo web interface is provided in `src/public/index.html`. This interface allows you to generate diagrams directly in your browser. To use the demo interface: 1. Serve the public directory using any static web server 2. Open the interface in your browser 3. Enter a system description and click "Generate Diagram" ## Project Structure - `src/index.ts`: Main entry point for the MCP server - `src/tools/index.ts`: Tool definitions and implementations - `src/drawio/index.ts`: Integration with draw.io API - `src/public/index.html`: Demo web interface ## Limitations The current implementation has several limitations: - Basic diagram generation without advanced analysis of descriptions - Simplified integration with draw.io using URL parameters - No diagram storage or retrieval ## Future Enhancements - Improved diagram generation with better parsing of system descriptions - More diagram types and templates - Proper integration with draw.io using the HTML5 Messaging API - Proper storage and retrieval of diagrams - Additional tools for modifying existing diagrams ## License MIT