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.
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
- MCP Usage Guide - How to use with Claude Desktop, VS Code, Windsurf, or other environments.
- Eraser Docs - General Eraser documentation
- Eraser Diagram-as-code Documentation - Information about the syntax
- Eraser DSL API Reference - Information about the endpoints and parameters used
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:
-
Environment variable:
export ERASER_API_TOKEN=your_token_here python render_eraser_diagram.py --diagram-type sequence-diagram --code "A -> B" -
.envfile 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
\nfor 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
sequence-diagramcloud-architecture-diagramflowchart-diagramentity-relationship-diagram- And more (check Eraser Diagram-as-code documentation)
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)
-
Copy
.env.exampleto.envand configure:cp .env.example .env # Edit .env with your ERASER_API_TOKEN -
Start the server:
docker-compose up -d -
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
.envis valid - Use
DEBUG=1to 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
百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Playwright MCP Server
一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。
Magic Component Platform (MCP)
一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。
Audiense Insights MCP Server
通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。
VeyraX
一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。
graphlit-mcp-server
模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。
Kagi MCP Server
一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。
e2b-mcp-server
使用 MCP 通过 e2b 运行代码。
Neon MCP Server
用于与 Neon 管理 API 和数据库交互的 MCP 服务器
Exa MCP Server
模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。