mcp-sequence-diagram-server

ganeshsreedharan/mcp-sequence-diagram-server

3.2

If you are the rightful owner of mcp-sequence-diagram-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

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

Tools

  1. generate_sequence_diagram

    Generate a sequence diagram from Mermaid syntax.

  2. create_diagram_from_description

    Create a sequence diagram from natural language description.

  3. validate_mermaid_syntax

    Validate Mermaid sequence diagram syntax.

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
  1. Install dependencies:
npm install
  1. 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
  1. 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
  1. Memory Issues: For large diagrams, you may need to increase Node.js memory:
node --max-old-space-size=4096 index.js

License

MIT License