Eraser Diagram Renderer

Eraser Diagram Renderer

Enables rendering of diagrams (sequence, flowchart, ER, cloud architecture, etc.) using the Eraser.io API with customizable themes, backgrounds, and scaling options. Returns image URLs or base64-encoded content with built-in icon validation.

Category
Visit Server

README

Eraser Diagram Renderer

A Python MCP (Model Context Protocol) server and CLI tool to render diagrams using the Eraser API.

Features

  • 📊 Multiple Diagram Types: Sequence, flowchart, ER, cloud architecture, and more
  • 🎨 Customizable: Themes, backgrounds, and scaling options
  • 📦 Flexible Output: Get image URLs or base64-encoded file content
  • 🔗 Eraser File URL: Returns link to edit diagram in Eraser
  • ✅ Icon Validation: Checks for undefined icons and provides warnings

Documentation

Basic Usage

python render_eraser_diagram.py --diagram-type sequence-diagram --code "Alice -> Bob: Hello"

This will output JSON with the image URL:

{
  "success": true,
  "message": "Diagram rendered successfully",
  "image_url": "https://app.eraser.io/workspace/...",
  "create_eraser_file_url": "https://app.eraser.io/workspace/..."
}

If undefined icons are detected:

{
  "success": true,
  "message": "Diagram rendered successfully",
  "image_url": "https://app.eraser.io/workspace/...",
  "create_eraser_file_url": "https://app.eraser.io/workspace/...",
  "warning": "Warning: The following icons are not defined in the standard Eraser icons list: custom-icon. These icons may not render correctly. You can disable this warning by setting SKIP_ICON_CHECK=true."
}

Parameters

  • --diagram-type (required): Type of diagram (e.g., sequence-diagram, cloud-architecture-diagram)
  • --code (required): Diagram code in Eraser syntax
  • --return-file: Return base64-encoded image data instead of URL (defaults to False)
  • --no-background: Disable background (defaults to background enabled)
  • --theme: Choose "light" or "dark" theme (defaults to "light")
  • --scale: Scale factor - "1", "2", or "3" (defaults to "1")

Note: Due to a bug in the Eraser API, the image cache is only invalidated when the diagram code changes. Changes to theme or background parameters alone will not generate a new image if the same code was previously rendered with different settings.

Authentication

For CLI usage, set your Eraser API token in one of these ways:

  1. Environment variable:

    export ERASER_API_TOKEN=your_token_here
    python render_eraser_diagram.py --diagram-type sequence-diagram --code "A -> B"
    
  2. .env file in the project directory:

    echo "ERASER_API_TOKEN=your_token_here" > .env
    

For MCP server usage with Claude Desktop, see the MCP Usage Guide.

Icon Validation

This tool validates icon references against the standard Eraser icons list (provided in eraser-standard-icons.csv). If you use custom icons that aren't in the standard list:

  • You'll receive a warning in the response

  • The diagram will still be generated

  • To disable icon validation, set SKIP_ICON_CHECK=true:

    SKIP_ICON_CHECK=true python render_eraser_diagram.py --diagram-type flowchart --code "custom-icon: My Service"
    

Handling Special Characters

For multi-line diagrams and special characters:

  • Use \n for line breaks
  • Use \" for quotes within the code
  • Use \\ for literal backslashes

Examples

Multi-line sequence diagram (returns URL):

python render_eraser_diagram.py --diagram-type sequence-diagram \
  --code "Alice -> Bob: Hello\nBob -> Alice: Hi there\nAlice -> Bob: How are you?"

Output:

{
  "success": true,
  "message": "Diagram rendered successfully",
  "image_url": "https://app.eraser.io/workspace/...",
  "create_eraser_file_url": "https://app.eraser.io/workspace/..."
}

With JSON data and return file:

python render_eraser_diagram.py --diagram-type sequence-diagram \
  --code "User -> API: POST /data {\"key\": \"value\"}\nAPI -> User: 200 OK" \
  --return-file

Output:

{
  "success": true,
  "message": "Diagram rendered successfully",
  "image_blob": "iVBORw0KGgoAAAANSUhEUgA..."
}

Cloud architecture with light theme:

python render_eraser_diagram.py --diagram-type cloud-architecture-diagram \
  --code "AWS S3 Bucket\n|\nAWS Lambda" --theme light

Debug mode to see processed code:

DEBUG=1 python render_eraser_diagram.py --diagram-type sequence-diagram \
  --code "A -> B: Test\nB -> C: Response"

Supported Diagram Types

Requirements

  • Python 3.10 or higher
  • Eraser API token

Installation

Using pip:

pip install -e .

Using uv (fast Python package manager):

uv pip install -e .

HTTP Transport (Streamable HTTP)

The server supports both stdio (default) and Streamable HTTP transport for remote access.

Running with HTTP Transport

# Local HTTP server
python main.py --transport http --port 8000

# Server will be available at http://localhost:8000/mcp

Environment Variables

Variable Default Description
ERASER_API_TOKEN (required) Your Eraser.io API token
MCP_TRANSPORT stdio Transport protocol: stdio or http
MCP_HOST 0.0.0.0 Host to bind for HTTP transport
MCP_PORT 8000 Port to bind for HTTP transport
MCP_AUTH_TOKEN (empty) Bearer token for HTTP authentication (optional)

Bearer Token Authentication

To enable authentication for the HTTP endpoint, set MCP_AUTH_TOKEN:

export MCP_AUTH_TOKEN=your_secret_token
python main.py --transport http

Clients must include the token in the Authorization header:

Authorization: Bearer your_secret_token

Docker Deployment

Using Docker Compose (Recommended)

  1. Copy .env.example to .env and configure:

    cp .env.example .env
    # Edit .env with your ERASER_API_TOKEN
    
  2. Start the server:

    docker-compose up -d
    
  3. The server will be available at http://localhost:8000/mcp

Using Docker Directly

# Build
docker build -t eraser-mcp .

# Run
docker run -p 8000:8000 \
  -e ERASER_API_TOKEN=your_token \
  -e MCP_AUTH_TOKEN=optional_auth_token \
  eraser-mcp

Client Configuration for HTTP

Configure your MCP client to connect via Streamable HTTP:

{
  "mcpServers": {
    "eraser": {
      "type": "streamable-http",
      "url": "http://localhost:8000/mcp",
      "headers": {
        "Authorization": "Bearer your_auth_token"
      }
    }
  }
}

Troubleshooting

  • If you get an API error, check that your token in .env is valid
  • Use DEBUG=1 to see how your code is being processed
  • Ensure proper escaping of special characters in your shell
  • If you see icon warnings, check if your icons are custom or set SKIP_ICON_CHECK=true
  • For HTTP transport issues, check that the port is not in use and firewall allows connections

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
E2B

E2B

Using MCP to run code via e2b.

Official
Featured