The MCP Mermaid Validator server validates and renders Mermaid diagrams, integrating with MCP-compatible clients.
Validate Mermaid Syntax: Accepts Mermaid diagram syntax as input and validates its correctness.
Render Diagrams: Returns a rendered PNG image in base64-encoded format for valid diagrams.
Error Handling: Provides detailed error messages for invalid diagrams or system errors.
Validation Status: Returns the validation result (valid or invalid).
Integration with MCP: Uses the Model Context Protocol to standardize interactions with compatible clients.
Usage in AI Tools: Enables LLMs to validate and render Mermaid diagrams seamlessly.
Validates and renders Mermaid diagrams, returning validation results and rendered SVG/PNG output when valid, enabling LLMs to create and verify diagram syntax.
MCP Server: Mermaid Validator
A Model Context Protocol server that validates and renders Mermaid diagrams. This server enables LLMs to validate and render Mermaid diagrams.
Usage
Quick Start
You can configure your MCP client to use the Mermaid Validator by adding it to your mcp servers file:
Architecture
High-Level Architecture
This project is structured as a simple TypeScript Node.js application that:
Main Application: A Node.js service that validates Mermaid diagrams and returns rendered PNG output
MCP Integration: Uses the Model Context Protocol SDK to expose functionality to MCP-compatible clients
Mermaid CLI Integration: Leverages the Mermaid CLI tool to perform diagram validation and rendering
Code Structure
Component Functionality
MCP Server (Main Component)
The core functionality is implemented in src/main.ts
. This component:
Creates an MCP server instance
Registers a
validateMermaid
tool that accepts Mermaid diagram syntaxUses the Mermaid CLI to validate and render diagrams
Returns validation results and rendered PNG (if valid)
Handles error cases with appropriate error messages
Data Flow
Input: Mermaid diagram syntax as a string
Processing:
The diagram is passed to the Mermaid CLI via stdin
The CLI validates the syntax and renders a PNG if valid
Output and errors are captured from stdout/stderr
Output:
Success: Text confirmation + rendered PNG as base64-encoded image
Failure: Error message with details about the validation failure
Dependencies
External Libraries
@modelcontextprotocol/sdk: SDK for implementing Model Context Protocol
@mermaid-js/mermaid-cli: CLI tool for validating and rendering Mermaid diagrams
zod: Schema validation library for TypeScript
Development Dependencies
typescript: TypeScript compiler
eslint: Linting utility
prettier: Code formatting
API Specification
validateMermaid Tool
Purpose: Validates a Mermaid diagram and returns the rendered PNG if valid
Parameters:
diagram
(string): The Mermaid diagram syntax to validate
Return Value:
Success:
{ content: [ { type: "text", text: "Mermaid diagram is valid" }, { type: "image", data: string, // Base64-encoded PNG mimeType: "image/png" } ] }Failure:
{ content: [ { type: "text", text: "Mermaid diagram is invalid" }, { type: "text", text: string // Error message }, { type: "text", text: string // Detailed error output (if available) } ] }
Technical Decisions
MCP Integration: The project uses the Model Context Protocol to standardize the interface for AI tools, allowing seamless integration with compatible clients.
PNG Output Format: The implementation uses PNG as the default output format to ensure better compatibility with most MCP clients, particularly Cursor, which doesn't support SVG.
Child Process Approach: The implementation uses Node.js child processes to interact with the Mermaid CLI, which provides:
Isolation between the main application and the rendering process
Ability to capture detailed error information
Proper handling of the rendering pipeline
Error Handling Strategy: The implementation uses a nested try-catch structure to:
Distinguish between validation errors (invalid diagram syntax) and system errors
Provide detailed error information to help users fix their diagrams
Ensure the service remains stable even when processing invalid input
Simple Project Structure: The project uses a straightforward TypeScript project structure for:
Easy maintenance and understanding
Direct dependency management
Simplified build process
Build and Execution
The application can be built and run using npm scripts:
The application runs as an MCP server that communicates via standard input/output, making it suitable for integration with MCP-compatible clients.
Release
To release a new version, the following steps in order:
npm run build
npm run bump
npm run changelog
npm publish --access public
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Tools
A Model Context Protocol server that validates and renders Mermaid diagrams.
- Usage
- Architecture
- Component Functionality
- Dependencies
- API Specification
- Technical Decisions
- Build and Execution
- Release
Related Resources
Related MCP Servers
- AsecurityAlicenseAqualityA Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.Last updated -1149186MIT License
- -securityFlicense-qualityEnables programmatic creation of Whimsical diagrams from Mermaid markup generated by AI models like Claude through the Model Context Protocol.Last updated -26
- -securityAlicense-qualityA server that implements the Model Context Protocol (MCP), providing an interface for LLM applications to generate mermaid.js visualizations and diagrams.Last updated -MIT License
- -securityAlicense-qualityAn MCP server that converts text inputs into visualized flowcharts, enabling AI clients to generate high-quality Mermaid diagrams directly from natural language descriptions or structured text.Last updated -8MIT License