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 SVG 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
validateMermaidtool that accepts Mermaid diagram syntax
- Uses the Mermaid CLI to validate and render diagrams
- Returns validation results and rendered SVG (if valid)
- Handles error cases with appropriate error messages
Data Flow
- Input: Mermaid diagram syntax as a string
- Processing:
- Output:
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 SVG if valid
Parameters:
diagram(string): The Mermaid diagram syntax to validate
Return Value:
- Success:
- Failure:
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:
- Error Handling Strategy: The implementation uses a nested try-catch structure to:
- Simple Project Structure: The project uses a straightforward TypeScript project structure for:
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
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 SVG 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
validateMermaidtool that accepts Mermaid diagram syntax
- Uses the Mermaid CLI to validate and render diagrams
- Returns validation results and rendered SVG (if valid)
- Handles error cases with appropriate error messages
Data Flow
- Input: Mermaid diagram syntax as a string
- Processing:
- Output:
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 SVG if valid
Parameters:
diagram(string): The Mermaid diagram syntax to validate
Return Value:
- Success:
- Failure:
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:
- Error Handling Strategy: The implementation uses a nested try-catch structure to:
- Simple Project Structure: The project uses a straightforward TypeScript project structure for:
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