Skip to main content
Glama
README.md
# MCP Sequence Diagram Server

A Model Context Protocol (MCP) server that generates sequence diagram images using Mermaid syntax.

## Features

- Generate sequence diagrams from Mermaid syntax
- Convert natural language descriptions to sequence diagrams
- Support for multiple output formats (SVG, PNG)
- Customizable themes and dimensions
- Syntax validation
- File output with custom naming

## Installation

1. Clone or create the project directory:
```bash
mkdir mcp-sequence-diagram-server
cd mcp-sequence-diagram-server
```

2. Install dependencies:
```bash
npm install
```

3. Make the script executable:
```bash
chmod +x index.js
```

## Usage

### As MCP Server

Add to your MCP client configuration:

```json
{
  "mcpServers": {
    "sequence-diagram": {
      "command": "node",
      "args": ["index.js"],
      "cwd": "/path/to/your/mcp-sequence-diagram-server"
    }
  }
}
```

### Available Tools

#### 1. `generate_sequence_diagram`
Generate a sequence diagram from Mermaid syntax.

**Parameters:**
- `diagram` (required): Mermaid sequence diagram syntax
- `format` (optional): Output format ('svg' or 'png', default: 'svg')
- `filename` (optional): Custom filename for output
- `width` (optional): Image width in pixels (default: 800)
- `height` (optional): Image height in pixels (default: 600)
- `theme` (optional): Mermaid theme ('default', 'dark', 'forest', 'neutral')

**Example:**
```javascript
{
  "diagram": "sequenceDiagram\n    Alice->>Bob: Hello Bob, how are you?\n    Bob-->>Alice: Great!",
  "format": "svg",
  "filename": "greeting_sequence"
}
```

#### 2. `create_diagram_from_description`
Create a sequence diagram from natural language description.

**Parameters:**
- `description` (required): Natural language description
- `participants` (optional): Array of participant names
- `format` (optional): Output format ('svg' or 'png')
- `filename` (optional): Custom filename

**Example:**
```javascript
{
  "description": "User logs in. Server validates credentials. Server returns authentication token.",
  "participants": ["User", "Server"],
  "format": "png"
}
```

#### 3. `validate_mermaid_syntax`
Validate Mermaid sequence diagram syntax.

**Parameters:**
- `diagram` (required): Mermaid syntax to validate

## Mermaid Sequence Diagram Syntax

### Basic Syntax
```mermaid
sequenceDiagram
    participant A as Alice
    participant B as Bob
    
    A->>B: Hello Bob, how are you?
    B-->>A: Great!
    A-)B: See you later!
```

### Message Types
- `A->>B: message` - Solid arrow (synchronous)
- `A-->>B: message` - Dashed arrow (asynchronous response)
- `A-)B: message` - Open arrow (asynchronous)
- `A-xB: message` - Cross arrow (lost message)

### Advanced Features
```mermaid
sequenceDiagram
    participant C as Client
    participant S as Server
    participant D as Database
    
    C->>S: Login Request
    
    alt successful case
        S->>D: Query User
        D-->>S: User Data
        S-->>C: Login Success
    else failure case
        S-->>C: Login Failed
    end
    
    Note over C,S: Session established
    
    loop every minute
        C->>S: Heartbeat
        S-->>C: ACK
    end
```

## Examples

### Example 1: API Authentication Flow
```javascript
{
  "diagram": `sequenceDiagram
    participant Client
    participant API
    participant Auth
    participant Database
    
    Client->>API: POST /login
    API->>Auth: Validate credentials
    Auth->>Database: Query user
    Database-->>Auth: User data
    Auth-->>API: Token
    API-->>Client: 200 OK + JWT`,
  "format": "svg",
  "filename": "auth_flow"
}
```

### Example 2: Natural Language
```javascript
{
  "description": "Customer places order. System checks inventory. Payment is processed. Order confirmation is sent.",
  "participants": ["Customer", "System", "Payment", "Inventory"],
  "format": "png"
}
```

## Development

### Running in Development Mode
```bash
npm run dev
```

### Testing the Server
You can test the server using any MCP client or by running it directly:

```bash
node index.js
```

## Troubleshooting

### Common Issues

1. **Puppeteer Installation**: If Puppeteer fails to install, try:
```bash
npm install puppeteer --unsafe-perm=true --allow-root
```

2. **Linux Dependencies**: On Linux, you may need additional packages:
```bash
sudo apt-get install -y libgbm-dev gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
```

3. **Memory Issues**: For large diagrams, you may need to increase Node.js memory:
```bash
node --max-old-space-size=4096 index.js
```

## License

MIT License