MCP Server for AI Agents — WebSequenceDiagrams

What is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI assistants call external tools and services. When you connect an AI agent to the WebSequenceDiagrams MCP server, the agent can generate professional sequence diagrams as part of a conversation — no copy-pasting required.

Our MCP server exposes two tools:

generate_sequence_diagram — render diagram text into a PNG, SVG, or PDF image
list_diagram_styles — enumerate all available rendering styles

Automatic discovery via .well-known WebSequenceDiagrams also publishes $HOSTURL/.well-known/mcp.json following the draft .well-known MCP discovery specification. Clients can discover the MCP endpoint there and then connect to $HOSTURL/mcp using the normal MCP protocol flow.

How it works Your AI assistant sends a JSON-RPC 2.0 request to $HOSTURL/mcp. The server renders the diagram and returns the result to the client. The protocol follows the MCP 2025-03-26 specification.

Quick Start — Three Steps

1

Add the server URL

Point your MCP client at $HOSTURL/mcp.

2

Ask your AI

"Draw a sequence diagram of the OAuth2 authorization code flow."

3

Get the image

The AI calls generate_sequence_diagram and shows you the result.

Configure Your AI Client

Each AI assistant has its own way of registering MCP servers. Below are setup instructions for the most popular clients.

claude_desktop_config.json

{ "mcpServers": { "websequencediagrams": { "url": "$HOSTURL/mcp" } } }

Open Claude Desktop → Settings → Developer → Edit Config, paste the snippet above, and restart Claude.

.cursor/mcp.json

{ "mcpServers": { "websequencediagrams": { "url": "$HOSTURL/mcp" } } }

Create or edit .cursor/mcp.json in your project root (or ~/.cursor/mcp.json for global config), paste the snippet, and restart Cursor.

.vscode/mcp.json

{ "servers": { "websequencediagrams": { "type": "http", "url": "$HOSTURL/mcp" } } }

Create .vscode/mcp.json in your workspace. GitHub Copilot Chat will discover the server and surface its tools automatically.

HTTP

POST $HOSTURL/mcp Content-Type: application/json { "jsonrpc": "2.0", "id": 1, "method": "initialize", "params": { "protocolVersion": "2025-03-26", "capabilities": {}, "clientInfo": { "name": "my-app", "version": "1.0" } } }

For any MCP-compatible client, set the server URL to $HOSTURL/mcp using the Streamable HTTP transport. The endpoint accepts JSON-RPC 2.0 POST requests.

Premium Features via MCP To access premium styles, PDF/SVG export, and watermark removal, include your API key in the apikey parameter when calling generate_sequence_diagram. Get your key at websequencediagrams.com/users/getapikey.

generate_sequence_diagram

Render a sequence diagram from text notation and return the generated diagram inline, typically as a base64-encoded image result that MCP clients can display directly.

Parameters

message (string, required) — the diagram source text in WebSequenceDiagrams notation. Use \n for newlines.
style (string, optional) — rendering style. Default: modern-blue. See styles below.
format (string, optional) — output format: png, svg, or pdf. Default: png. SVG/PDF require a premium API key.
apikey (string, optional) — your premium API key for premium styles and formats.

Example Request

JSON-RPC

{ "jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": { "name": "generate_sequence_diagram", "arguments": { "message": "Alice->Bob: Authentication Request\nBob-->Alice: Authentication Response", "style": "modern-blue", "format": "png" } } }

Example Response

JSON-RPC Response

{ "jsonrpc": "2.0", "id": 2, "result": { "content": [ { "type": "text", "text": "This tool result includes the final diagram as an inline image for the user. Render or present that image directly in the conversation whenever the client supports inline images; do not treat it as a generic file attachment unless inline display is impossible." }, { "type": "image", "mimeType": "image/png", "data": "iVBORw0KGgoAAAANSUhEUgAA..." } ] } }

Available Styles

default

earth

magazine

modern-blue

mscgen

napkin

omegapple

patent

qsd

rose

roundgreen

list_diagram_styles

Returns a list of all available rendering styles. Takes no parameters.

Example Request

JSON-RPC

{ "jsonrpc": "2.0", "id": 3, "method": "tools/call", "params": { "name": "list_diagram_styles", "arguments": {} } }

MCP Protocol Flow

The WebSequenceDiagrams MCP server implements the MCP 2025-03-26 specification using the Streamable HTTP transport.

Discovery Endpoint

GET $HOSTURL/.well-known/mcp.json

This discovery document follows the draft .well-known MCP specification and advertises the same server and tool list exposed by POST $HOSTURL/mcp.

Endpoint

POST $HOSTURL/mcp

All requests use Content-Type: application/json and follow JSON-RPC 2.0.

Supported Methods

initialize — handshake; returns server capabilities and info
notifications/initialized — client acknowledgement (no response body)
tools/list — enumerate available tools
tools/call — invoke a tool
ping — health check

Full Lifecycle Example

Bash / cURL

#!/usr/bin/env bash # Full MCP lifecycle: initialize → list tools → generate diagram BASE="$HOSTURL/mcp" # Step 1: Initialize curl -s -X POST "$BASE" \ -H "Content-Type: application/json" \ -d '{ "jsonrpc": "2.0", "id": 1, "method": "initialize", "params": { "protocolVersion": "2025-03-26", "capabilities": {}, "clientInfo": {"name": "demo", "version": "1.0"} } }' echo "" # Step 2: List tools curl -s -X POST "$BASE" \ -H "Content-Type: application/json" \ -d '{"jsonrpc":"2.0","id":2,"method":"tools/list"}' echo "" # Step 3: Generate a diagram RESPONSE=$(curl -s -X POST "$BASE" \ -H "Content-Type: application/json" \ -d '{ "jsonrpc": "2.0", "id": 3, "method": "tools/call", "params": { "name": "generate_sequence_diagram", "arguments": { "message": "Client->Server: POST /login\nServer-->Client: 200 OK + JWT\nClient->Server: GET /api/data (Bearer JWT)\nServer-->Client: 200 OK + JSON", "style": "modern-blue" } } }') echo "$RESPONSE" | python3 -m json.tool

Diagram Expiry Generated images are temporary and may be cleaned up after a period. If you need a permanent copy, download the image immediately after generation.

Quick Syntax Reference

Pass these text patterns as the message parameter. For the full language reference, see the complete documentation.

Signals (Messages)

Diagram Text

title Authentication Flow Alice->Bob: Synchronous request Bob-->Alice: Dashed response Alice->>Bob: Open arrowhead note right of Bob: Bob thinks about it Bob-->>Alice: Dashed open response

Participants & Aliases

Diagram Text

participant "Web Browser" as Browser participant "API Gateway" as GW participant "Auth Service" as Auth Browser->GW: GET /dashboard GW->Auth: Validate token Auth-->GW: Token valid GW-->Browser: 200 OK

Groups & Conditions

Diagram Text

Client->Server: Login request alt successful case Server-->Client: 200 OK else authentication failed Server-->Client: 401 Unauthorized end opt retry on failure Client->Server: Retry login Server-->Client: 200 OK end

Notes

Diagram Text

Alice->Bob: Hello note left of Alice: Alice waves note right of Bob: Bob smiles note over Alice,Bob: They become friends

Tested AI Clients

Any MCP-compatible client can use the WebSequenceDiagrams server. Here are some that have been tested:

Claude Desktop

Anthropic's desktop app has native MCP support. Add the server URL to your config and Claude can generate diagrams on request.

Cursor

The AI-powered code editor supports MCP servers through .cursor/mcp.json. Great for generating architecture diagrams while coding.

VS Code + GitHub Copilot

Configure via .vscode/mcp.json to let Copilot Chat generate sequence diagrams in your workspace.

Windsurf

Codeium's AI IDE supports MCP. Add the server in the MCP configuration panel.

Custom Clients

Build your own using the MCP SDK in Python, TypeScript, or any language with HTTP support.

ChatGPT (via plugin)

Use a bridge tool or custom GPT action to connect ChatGPT to any MCP server, including this one.