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
访问服务器

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

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选