Adding as a Streamable HTTP MCP Server

2025-07-22 21:31:55 +00:00
parent bf088da9d5
commit 6aa7e91874
25 changed files with 5027 additions and 4797 deletions
--- a/README.md
+++ b/README.md
@ -1,317 +1,227 @@
 # Draw.io MCP Server

-An MCP (Model Context Protocol) server that enables creating and managing draw.io diagrams from Cline in VSCode using a functional programming approach.
+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
+## 🚀 Features

- ✅ **Diagram Creation**: Support for multiple diagram types (BPMN, UML, ER, Network, Architecture, Flowchart, etc.)
- ✅ **VSCode Integration**: Automatic opening of diagrams in VSCode with draw.io extension
- ✅ **Functional Programming**: Architecture based on pure functions without classes
- ✅ **Automatic Generation**: Predefined templates for different diagram types
- ✅ **File Management**: Search and listing of existing diagrams
- ✅ **Automatic Configuration**: Automatic VSCode environment setup
+- **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
+## 📋 Supported Diagram Types

 ### BPMN (Business Process Model and Notation)
- `bpmn-process`: Business processes
- `bpmn-collaboration`: Collaboration between participants
- `bpmn-choreography`: Message exchanges
+- Business processes
+- Collaborations
+- Choreographies

 ### UML (Unified Modeling Language)
- `uml-class`: Class diagrams
- `uml-sequence`: Sequence diagrams
- `uml-use-case`: Use case diagrams
- `uml-activity`: Activity diagrams
- `uml-state`: State diagrams
- `uml-component`: Component diagrams
- `uml-deployment`: Deployment diagrams
+- Class diagrams
+- Sequence diagrams
+- Use case diagrams
+- Activity diagrams
+- State diagrams
+- Component diagrams
+- Deployment diagrams

 ### Database
- `er-diagram`: Entity-Relationship diagrams
- `database-schema`: Database schemas
- `conceptual-model`: Conceptual models
+- 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`: Network topology
- `infrastructure`: System infrastructure
- `cloud-architecture`: Cloud architecture
-
-### Software Architecture
- `system-architecture`: System architecture
- `microservices`: Microservices architecture
- `layered-architecture`: Layered architecture
- `c4-context`: C4 context diagrams
- `c4-container`: C4 container diagrams
- `c4-component`: C4 component diagrams
+- Network topology
+- Infrastructure
+- Cloud architecture

 ### General
- `flowchart`: Flowcharts
- `orgchart`: Organizational charts
- `mindmap`: Mind maps
- `wireframe`: Wireframes
- `gantt`: Gantt charts
+- Flowcharts
+- Organizational charts
+- Mind maps
+- Wireframes
+- Gantt charts

-## Installation
+## 🛠️ Installation

-1. **Clone the repository**:
 ```bash
+# Clone the repository
 git clone <repository-url>
 cd drawio-mcp-server
-```

-2. **Install dependencies**:
-```bash
+# Install dependencies
 npm install
-```

-3. **Build the project**:
-```bash
+# Build the project
 npm run build
+
+# Start the server
+npm start
 ```

-4. **Configure in Cline**:
-Add to your Cline MCP configuration file:
+## 🌐 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:

 ```json
 {
  "mcpServers": {
-    "drawio-mcp-server": {
+    "drawio-diagram-generator": {
      "command": "node",
-      "args": ["/full/path/to/project/build/index.js"],
+      "args": ["build/index.js"],
+      "cwd": "/path/to/drawio-mcp-server",
      "env": {
-        "WORKSPACE_ROOT": "/path/to/your/workspace"
+        "HTTP_PORT": "3000"
      }
    }
  }
 }
 ```

-## Available Tools
+## 🔧 Available MCP Tools

 ### `create_diagram`
-Creates a new diagram of the specified type.
+Creates a new diagram with intelligent AI-based generation.

-**Parameters**:
+**Parameters:**
 - `name` (required): Diagram file name
- `type` (required): Type of diagram to create
- `format` (optional): File format (drawio, drawio.svg, drawio.png, dio, xml)
- `description` (optional): Diagram description
+- `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
- `workspaceRoot` (optional): Workspace root directory
+- `complexity` (optional): 'simple' or 'detailed' (default: 'detailed')
+- `language` (optional): Language for labels (default: 'es')

-**Type-specific parameters**:
-
-**BPMN**:
- `processName`: Process name
- `tasks`: List of tasks
- `gatewayType`: Gateway type (exclusive, parallel)
- `branches`: Gateway branches
- `beforeGateway`: Tasks before gateway
- `afterGateway`: Tasks after gateway
-
-**UML**:
- `classes`: List of classes for class diagrams
-
-**ER**:
- `entities`: List of entities
-
-**Network/Architecture**:
- `components`: List of components
-
-**Flowchart**:
- `processes`: List of processes
-
-**Example**:
+**Example:**
 ```json
 {
-  "name": "my-bpmn-process",
+  "name": "sales-process",
  "type": "bpmn-process",
-  "processName": "Approval Process",
-  "tasks": ["Request", "Review", "Approve"],
-  "format": "drawio"
+  "description": "Sales process from initial contact to closure, including follow-up and billing",
+  "complexity": "detailed",
+  "language": "en"
 }
 ```

-### `list_diagrams`
-Lists all diagram files in the workspace.
-
-**Parameters**:
- `workspaceRoot` (optional): Workspace root directory
-
-### `open_diagram_in_vscode`
-Opens a diagram in VSCode with the draw.io extension.
-
-**Parameters**:
- `filePath` (required): Path to the diagram file
- `workspaceRoot` (optional): Workspace root directory
-
-### `setup_vscode_environment`
-Sets up VSCode environment for draw.io (installs extension if needed).
-
-**Parameters**:
- `workspaceRoot` (optional): Workspace root directory
-
 ### `get_diagram_types`
-Gets the list of supported diagram types with descriptions.
+Gets the list of supported diagram types with their descriptions.

-## Available Resources
-
-### `diagrams://workspace/list`
-List of all diagram files in the workspace with metadata.
+## 📚 Available MCP Resources

 ### `diagrams://types/supported`
-List of supported diagram types with descriptions.
+Provides information about all supported diagram types.

-## Usage Examples
+## 🧪 Usage Examples

-### Create a simple BPMN diagram
-```bash
-# Through Cline, use the tool:
-create_diagram({
-  "name": "sales-process",
-  "type": "bpmn-process",
-  "processName": "Sales Process",
-  "tasks": ["Receive Order", "Check Stock", "Process Payment", "Ship Product"]
-})
-```
-
-### Create a BPMN diagram with gateway
-```bash
-create_diagram({
-  "name": "approval-process",
-  "type": "bpmn-process",
-  "processName": "Approval Process",
-  "beforeGateway": ["Receive Request"],
-  "gatewayType": "exclusive",
-  "branches": [
-    ["Auto Approve"],
-    ["Manual Review", "Approve/Reject"]
-  ],
-  "afterGateway": ["Notify Result"]
-})
-```
-
-### Create a UML class diagram
-```bash
-create_diagram({
-  "name": "user-model",
-  "type": "uml-class",
-  "classes": ["User", "Profile", "Session"]
-})
-```
-
-### Create an ER diagram
-```bash
-create_diagram({
-  "name": "store-database",
-  "type": "er-diagram",
-  "entities": ["Customer", "Product", "Order", "OrderDetail"]
-})
+### Create a BPMN diagram
+```json
+{
+  "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
-```bash
-create_diagram({
-  "name": "system-architecture",
-  "type": "system-architecture",
-  "components": ["React Frontend", "API Gateway", "Auth Service", "Product Service", "Database"]
-})
-```
-
-## Project Structure
-
-```
-src/
-├── types/
-│   └── diagram-types.ts          # Types and enums for diagrams
-├── utils/
-│   ├── file-manager.ts           # File management (functional)
-│   ├── xml-parser.ts             # XML parser for draw.io (functional)
-│   └── vscode-integration.ts     # VSCode integration (functional)
-├── generators/
-│   └── bpmn-generator.ts         # BPMN diagram generator (functional)
-├── tools/
-│   └── create-diagram.ts         # Main creation tool
-└── index.ts                      # Main MCP server
-```
-
-## Functional Architecture
-
-The project is designed following functional programming principles:
-
- **Pure functions**: No side effects, same inputs produce same outputs
- **Immutability**: Data is not modified, new versions are created
- **Composition**: Functions are combined to create complex functionality
- **No classes**: Functions and types are used instead of classes and objects
-
-### Example of pure function:
-```typescript
-export const createBPMNElement = (config: BPMNElementConfig): DiagramElement => ({
-  id: config.id || generateId(),
-  type: config.type,
-  label: config.label,
-  geometry: {
-    x: config.x,
-    y: config.y,
-    width: config.width || getDefaultWidth(config.type),
-    height: config.height || getDefaultHeight(config.type)
-  },
-  style: getBPMNElementStyle(config.type),
-  properties: config.properties || {}
-});
-```
-
-## Development
-
-### Available scripts:
- `npm run build`: Compiles the TypeScript project
- `npm run dev`: Runs in development mode with watch
- `npm start`: Runs the compiled server
-
-### Adding new diagram types:
-
-1. **Add the type in `diagram-types.ts`**:
-```typescript
-export enum DiagramType {
-  // ... existing types
-  NEW_DIAGRAM_TYPE = 'new-diagram-type'
+```json
+{
+  "tool": "create_diagram",
+  "arguments": {
+    "name": "microservices-architecture",
+    "type": "microservices",
+    "description": "Microservices architecture for e-commerce with API Gateway, user, product, order and payment services"
+  }
 }
 ```

-2. **Create generator in `generators/`**:
-```typescript
-export const generateNewDiagramType = (input: CreateDiagramInput) => {
-  // Functional generation logic
-};
+### Create an ER diagram
+```json
+{
+  "tool": "create_diagram",
+  "arguments": {
+    "name": "store-data-model",
+    "type": "er-diagram",
+    "description": "Data model for online store with users, products, categories, orders and payments"
+  }
+}
 ```

-3. **Add to switch in `create-diagram.ts`**:
-```typescript
-case DiagramType.NEW_DIAGRAM_TYPE:
-  return generateNewDiagramType(input);
+## 🔍 Monitoring
+
+### Check server status
+```bash
+curl http://localhost:3000/health
 ```

-## Requirements
+### View documentation
+Visit `http://localhost:3000/` in your browser to see the complete API documentation.

- Node.js 18+
- VSCode with draw.io extension (`hediet.vscode-drawio`)
- Cline with MCP support
+## 🏗️ Architecture

-## License
+The server is built with:

-MIT License
+- **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

-## Contributing
+### Project Structure

-Contributions are welcome. Please:
+```
+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-feature`)
-3. Commit your changes (`git commit -am 'Add new feature'`)
-4. Push to the branch (`git push origin feature/new-feature`)
-5. Create a Pull Request
+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

-## Support
+## 📄 License

-To report bugs or request features, please create an issue in the repository.
+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! 🎨✨