Generates sequence diagrams from Mermaid syntax or natural language descriptions, with support for multiple output formats (SVG, PNG), customizable themes, and syntax validation.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP Sequence Diagram Servercreate a sequence diagram showing user login flow with participants User, Server, and Database"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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
Clone or create the project directory:
mkdir mcp-sequence-diagram-server
cd mcp-sequence-diagram-serverInstall dependencies:
npm installMake the script executable:
chmod +x index.jsUsage
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 syntaxformat(optional): Output format ('svg' or 'png', default: 'svg')filename(optional): Custom filename for outputwidth(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 descriptionparticipants(optional): Array of participant namesformat(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
endExamples
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 devTesting the Server
You can test the server using any MCP client or by running it directly:
node index.jsTroubleshooting
Common Issues
Puppeteer Installation: If Puppeteer fails to install, try:
npm install puppeteer --unsafe-perm=true --allow-rootLinux 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 wgetMemory Issues: For large diagrams, you may need to increase Node.js memory:
node --max-old-space-size=4096 index.jsLicense
MIT License
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.