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:

mkdir mcp-sequence-diagram-server
cd mcp-sequence-diagram-server

2. Install dependencies:

npm install

3. Make the script executable:

chmod +x index.js

Usage

As MCP Server

Add to your MCP client configuration:

{
  "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:

{
  "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:

{
  "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

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

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

{
  "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

{
  "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

npm run dev

Testing the Server

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

node index.js

Troubleshooting

Common Issues

1. Puppeteer Installation: If Puppeteer fails to install, try:

npm install puppeteer --unsafe-perm=true --allow-root

2. Linux Dependencies: On Linux, you may need additional packages:

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:

node --max-old-space-size=4096 index.js

License

MIT License