Mermaid Validator

A Model Context Protocol server that validates and renders Mermaid diagrams.

javascript

53

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can deploy a Mermaid Validator MCP server that validates and renders Mermaid diagrams for MCP clients. It accepts Mermaid syntax, uses the Mermaid CLI to verify correctness, and returns a rendered PNG when valid, enabling seamless diagram validation and visualization within your tooling.

How to use

Configure your MCP client to include the Mermaid Validator as an MCP server. This server exposes a tool named validateMermaid that accepts Mermaid diagram syntax and returns a validation result along with a rendered PNG when the input is valid. You can integrate it into your workflows to automatically verify diagrams and obtain image outputs for display or further processing.

How to install

Prerequisites: you need Node.js and npm installed on your system. Ensure you have access to run npx to execute the Mermaid Validator package.

Add the Mermaid Validator MCP server to your client configuration using the following snippet.

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

Install dependencies for your project if needed and verify the server can be discovered by your MCP client. Use npm to install dependencies and then build if your setup requires a build step.
Build and run locally if you want to test directly. The typical run flow is to install dependencies, build the project, and start the server when provided by the project’s tooling.

# Install dependencies
npm install

# Build the application
npm run build

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

# Format code
npm run format

# Lint code
npm run lint

# Watch for changes (development)
npm run watch

Notes on usage

When you provide a Mermaid diagram as input, the server passes the diagram to the Mermaid CLI via standard input. It validates the syntax and renders a PNG if valid. The output includes a textual confirmation and a base64-encoded PNG image when successful, or a detailed error message when validation fails.

Available tools

validateMermaid

Validates a Mermaid diagram and returns a rendered PNG if valid; provides detailed error output if invalid.