Eraser MCP Server

An MCP (Model Context Protocol) server that provides tools for creating diagrams on Eraser.io.

Features

Create diagrams on Eraser.io using their API
Support for multiple diagram types (sequence-diagram, flowchart-diagram, cloud-architecture-diagram, entity-relationship-diagram)
Returns direct links to view and edit diagrams
Validate diagram syntax before creating
Automatically fix common syntax errors
Simple Docker-based integration with Claude Desktop

Quick Setup

1. Get an Eraser.io API Key

2. Build the Docker Image

Clone this repository and build the Docker image:

git clone <repository-url>
cd eraser-mcp
./scripts/build-claude-docker.sh

3. Configure Claude Desktop

Add this configuration to your Claude Desktop settings file:

Configuration File Location:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

Configuration:

{
  "mcpServers": {
    "eraser": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e", "ERASER_API_KEY=yourapikey",
        "eraser-mcp:claude"
      ]
    }
  }
}

4. Restart Claude Desktop

After saving the configuration file, completely quit and restart Claude Desktop.

5. Test the Integration

In Claude Desktop, try asking:

"Create a sequence diagram showing a login process"
"Can you validate this flowchart syntax?"

6. Create a Claude Desktop Project (Optional)

For better organization and persistent access to diagram syntax references, create a dedicated project:

Create a new project in Claude Desktop by clicking the "+" icon in the sidebar
Name your project (e.g., "Eraser Diagrams" or "System Architecture")
Add the syntax guide by uploading or copying the diagram syntax documentation to your project knowledge base

Benefits of using a project:

Persistent access to diagram syntax documentation
Context-aware assistance for diagram creation
Organized workspace for all your architecture diagrams
Custom instructions ensure consistent diagram formatting

Now you can chat with Claude in this project and it will automatically use the Eraser MCP tools with full knowledge of the proper syntax for all diagram types.

Available Tools

create_diagram

Creates a new diagram on Eraser.io and returns links to view and edit it.

Parameters:

content (required): Diagram content in Eraser DSL format
diagramType (optional): Type of diagram (sequence-diagram, cloud-architecture-diagram, entity-relationship-diagram, flowchart-diagram). Default: sequence-diagram
theme (optional): Theme for the diagram (light, dark). Default: dark
background (optional): Whether to include background in the rendered image. Default: true

Returns:

Image URL: Direct link to view/download the rendered diagram image
Edit URL: Link to open and edit the diagram in Eraser

validate_diagram

Validates Eraser diagram syntax and returns any errors found.

Parameters:

content (required): Diagram content in Eraser DSL format to validate
diagramType (optional): Type of diagram to validate. Default: sequence-diagram

Returns:

Validation result indicating if the diagram syntax is valid
List of errors and warnings found (if any)

fix_diagram

Validates and attempts to fix common syntax errors in Eraser diagrams.

Parameters:

content (required): Diagram content in Eraser DSL format to fix
diagramType (optional): Type of diagram to fix. Default: sequence-diagram

Returns:

List of applied fixes
Fixed diagram content
Validation status after fixes

Examples

Creating a Sequence Diagram

Create a sequence diagram with this content:
Client > Server: Request
Server > Database: Query
Database --> Server: Results
Server --> Client: Response

Creating a Flowchart

Create a flowchart:
Start [shape: oval]
Start > Process
Process > Decision [shape: diamond]
Decision > End [shape: oval]

Validation Features

The server includes built-in validation for all supported diagram types:

Sequence Diagrams: Validates message formats, activation blocks, and control structures
Flowcharts: Validates node definitions, connections, shapes, and groups
Entity Relationship Diagrams: Validates entity definitions, attributes, and relationships
Cloud Architecture Diagrams: Validates service definitions, icons, and connections

Common fixes applied automatically:

Arrow syntax corrections (e.g., => to >)
Missing brackets and quotes
Trailing whitespace removal
Missing colons in sequence messages
Shape name corrections (e.g., circle to oval)

Troubleshooting

Docker Image Not Found

Error: Unable to find image 'eraser-mcp:claude'
Solution: Run the build script: ./scripts/build-claude-docker.sh

API Key Issues

Error: Server reports API key errors
Solution: Check that your API key is correct in the configuration

Permission Issues

Error: Docker permission denied
Solution: Ensure Docker is running and your user has Docker permissions

Development

For development, you can use the included Dev Container:

Open in VS Code with Dev Containers extension
Make changes to the code
Rebuild the Docker image: ./scripts/build-claude-docker.sh

Development Commands

npm install - Install dependencies
npm run dev - Run with hot reload
npm run build - Build TypeScript to JavaScript
npm run lint - Run ESLint
npm run typecheck - Run TypeScript type checking

Testing

cd tests
./run-tests.sh

Diagram Syntax Documentation

For detailed syntax information for each diagram type, visit:

License

MIT

Eraser MCP Server

An MCP (Model Context Protocol) server that provides tools for creating diagrams on Eraser.io.

Features

Create diagrams on Eraser.io using their API
Support for multiple diagram types (sequence-diagram, flowchart-diagram, cloud-architecture-diagram, entity-relationship-diagram)
Returns direct links to view and edit diagrams
Validate diagram syntax before creating
Automatically fix common syntax errors
Simple Docker-based integration with Claude Desktop

Quick Setup

1. Get an Eraser.io API Key

2. Build the Docker Image

Clone this repository and build the Docker image:

git clone <repository-url>
cd eraser-mcp
./scripts/build-claude-docker.sh

3. Configure Claude Desktop

Add this configuration to your Claude Desktop settings file:

Configuration File Location:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

Configuration:

{
  "mcpServers": {
    "eraser": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e", "ERASER_API_KEY=yourapikey",
        "eraser-mcp:claude"
      ]
    }
  }
}

4. Restart Claude Desktop

After saving the configuration file, completely quit and restart Claude Desktop.

5. Test the Integration

In Claude Desktop, try asking:

"Create a sequence diagram showing a login process"
"Can you validate this flowchart syntax?"

6. Create a Claude Desktop Project (Optional)

For better organization and persistent access to diagram syntax references, create a dedicated project:

Create a new project in Claude Desktop by clicking the "+" icon in the sidebar
Name your project (e.g., "Eraser Diagrams" or "System Architecture")
Add the syntax guide by uploading or copying the diagram syntax documentation to your project knowledge base

Benefits of using a project:

Persistent access to diagram syntax documentation
Context-aware assistance for diagram creation
Organized workspace for all your architecture diagrams
Custom instructions ensure consistent diagram formatting

Now you can chat with Claude in this project and it will automatically use the Eraser MCP tools with full knowledge of the proper syntax for all diagram types.

Available Tools

create_diagram

Creates a new diagram on Eraser.io and returns links to view and edit it.

Parameters:

content (required): Diagram content in Eraser DSL format
diagramType (optional): Type of diagram (sequence-diagram, cloud-architecture-diagram, entity-relationship-diagram, flowchart-diagram). Default: sequence-diagram
theme (optional): Theme for the diagram (light, dark). Default: dark
background (optional): Whether to include background in the rendered image. Default: true

Returns:

Image URL: Direct link to view/download the rendered diagram image
Edit URL: Link to open and edit the diagram in Eraser

validate_diagram

Validates Eraser diagram syntax and returns any errors found.

Parameters:

content (required): Diagram content in Eraser DSL format to validate
diagramType (optional): Type of diagram to validate. Default: sequence-diagram

Returns:

Validation result indicating if the diagram syntax is valid
List of errors and warnings found (if any)

fix_diagram

Validates and attempts to fix common syntax errors in Eraser diagrams.

Parameters:

content (required): Diagram content in Eraser DSL format to fix
diagramType (optional): Type of diagram to fix. Default: sequence-diagram

Returns:

List of applied fixes
Fixed diagram content
Validation status after fixes

Examples

Creating a Sequence Diagram

Create a sequence diagram with this content:
Client > Server: Request
Server > Database: Query
Database --> Server: Results
Server --> Client: Response

Creating a Flowchart

Create a flowchart:
Start [shape: oval]
Start > Process
Process > Decision [shape: diamond]
Decision > End [shape: oval]

Validation Features

The server includes built-in validation for all supported diagram types:

Sequence Diagrams: Validates message formats, activation blocks, and control structures
Flowcharts: Validates node definitions, connections, shapes, and groups
Entity Relationship Diagrams: Validates entity definitions, attributes, and relationships
Cloud Architecture Diagrams: Validates service definitions, icons, and connections

Common fixes applied automatically:

Arrow syntax corrections (e.g., => to >)
Missing brackets and quotes
Trailing whitespace removal
Missing colons in sequence messages
Shape name corrections (e.g., circle to oval)

Troubleshooting

Docker Image Not Found

Error: Unable to find image 'eraser-mcp:claude'
Solution: Run the build script: ./scripts/build-claude-docker.sh

API Key Issues

Error: Server reports API key errors
Solution: Check that your API key is correct in the configuration

Permission Issues

Error: Docker permission denied
Solution: Ensure Docker is running and your user has Docker permissions

Development

For development, you can use the included Dev Container:

Open in VS Code with Dev Containers extension
Make changes to the code
Rebuild the Docker image: ./scripts/build-claude-docker.sh

Development Commands

npm install - Install dependencies
npm run dev - Run with hot reload
npm run build - Build TypeScript to JavaScript
npm run lint - Run ESLint
npm run typecheck - Run TypeScript type checking

Testing

cd tests
./run-tests.sh

Diagram Syntax Documentation

For detailed syntax information for each diagram type, visit:

License

MIT