MCP Mermaid Validator

🚀 MCP Server: Mermaid Validator

A Model Context Protocol (MCP) server for validating and rendering Mermaid diagrams. This server enables large language models to validate and render Mermaid diagrams.

🚀 Quick Start

You can add the Mermaid validator to your MCP server configuration by configuring the MCP client to use it:

{
  "mcpServers": {
    "mermaid-validator": {
      "command": "npx",
      "args": [
        "-y",
        "@rtuin/mcp-mermaid-validator"
      ]
    }
  }
}

✨ Features

Overall Architecture

This project is a simple TypeScript Node.js application with the following structure:

1. Main Application: A Node.js service that validates Mermaid diagrams and returns rendered SVG output.
2. MCP Integration: Utilizes the Model Context Protocol SDK to expose functions compatible with MCP clients.
3. Mermaid CLI Integration: Employs the Mermaid CLI tool to perform diagram validation and rendering.

Code Structure

mcp-mermaid-validator/
├── dist/                   # Compiled JavaScript output
│   └── main.js             # Main application entry file
├── src/                    # TypeScript source code
│   └── main.ts             # Main application entry point
├── node_modules/           # Dependencies
├── package.json            # Project dependencies and scripts
├── package-lock.json       # Dependency lock file
├── tsconfig.json           # TypeScript configuration
├── eslint.config.js        # ESLint configuration
├── .prettierrc             # Prettier configuration
└── README.md               # Project documentation

💻 Usage Examples

MCP Server (Core Component)

The main functionality is implemented in src/main.ts. This component:

1. Creates an MCP server instance.
2. Registers a validateMermaid tool that accepts Mermaid diagram syntax.
3. Uses the Mermaid CLI to perform diagram validation and rendering.
4. Returns the validation result and the rendered SVG (if valid).
5. Handles error cases.

Data Flow

1. Receive Input: Receives Mermaid diagram code via standard input.
2. Parse and Validate: Parses the code using the Mermaid interpreter to check for correct syntax.
3. Render Output: Converts valid Mermaid code into an SVG graphic.
4. Return Result: Outputs the generated SVG to standard output.

🔧 Technical Details

Build Tools

• TypeScript: Used to write and compile TypeScript source code.
• Babel: Used for JavaScript transpilation to ensure compatibility.
• Webpack: Used to package modular code.
• TSC: TypeScript compiler for type checking.

Development Tools

• npm scripts: Manages build, formatting, and testing tasks.
• Prettier: A code formatting tool to maintain a consistent coding style.
• ESLint: A static code analysis tool to ensure code quality.
• Git: A version control system for project management and collaboration.

Runtime Dependencies

• Mermaid CLI: Performs Mermaid diagram rendering.
• Node.js: The runtime environment.

📚 Documentation

Input Format

{
  "code": "```mermaid\ngraph LR\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Process]\n    C --> D[End]\n    B -->|No| E[End]\n```\n"
}

Output Format

{
  "result": "<svg>...</svg>",
  "error": null
}

Building and Execution

The application can be built and run using npm scripts:

# Install dependencies
npm install

# Build the application
npm run build

# Run locally (development)
npx @modelcontextprotocol/inspector node dist/main.js

# Format the code
npm run format

# Check the code
npm run lint

# Monitor changes (development)
npm run watch

This application runs as an MCP server, communicating via standard input and output, making it suitable for integration with MCP-compatible clients.

📄 License

To release a new version, follow these steps:

• npm run build
• npm run bump
• npm run changelog
• npm publish --access public