rtuin_mcp_mermaid_validator
by rtuinMermaid Diagram Validator MCP Server
Overview
The Mermaid Diagram Validator MCP Server is a Model Context Protocol (MCP) server designed to validate and render Mermaid diagrams. It enables Language Learning Models (LLMs) to validate and render Mermaid diagrams seamlessly. This server leverages the Mermaid CLI tool for diagram validation and rendering, providing a robust solution for diagram processing.
Tools
- Mermaid CLI: Used for validating and rendering Mermaid diagrams.
- Model Context Protocol SDK: Facilitates integration with MCP-compatible clients.
- Zod: Schema validation library for TypeScript.
Configuration
To configure your MCP client to use the Mermaid Validator, add the following to your MCP servers file:
{
"mcpServers": {
"mermaid-validator": {
"command": "npx",
"args": [
"-y",
"@rtuin/mcp-mermaid-validator"
]
}
}
}
Usage
Quick Start
- Install dependencies:
shell npm install - Build the application:
shell npm run build - Run the server:
shell npx @modelcontextprotocol/inspector node dist/main.js
Architecture
High-Level Architecture
The project is structured as a simple TypeScript Node.js application that:
1. Main Application: A Node.js service that validates Mermaid diagrams and returns rendered SVG output.
2. MCP Integration: Uses the Model Context Protocol SDK to expose functionality to MCP-compatible clients.
3. Mermaid CLI Integration: Leverages the Mermaid CLI tool to perform diagram validation and rendering.
Code Structure
mcp-mermaid-validator/
├── dist/ # Compiled JavaScript output
│ └── main.js # Compiled main application
├── 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
Component Functionality
MCP Server (Main Component)
The core 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 validate and render diagrams.
4. Returns validation results and rendered SVG (if valid).
5. 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 an SVG if valid.
- Output and errors are captured from stdout/stderr.
- Output:
- Success: Text confirmation + rendered SVG 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 SVG if valid.
Parameters:
- diagram (string): The Mermaid diagram syntax to validate.
Return Value:
- Success:
ts
{
content: [
{
type: "text",
text: "Mermaid diagram is valid"
},
{
type: "image",
data: string, // Base64-encoded SVG
mimeType: "image/svg+xml"
}
]
}
- Failure:
ts
{
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: Standardizes the interface for AI tools, allowing seamless integration with compatible clients.
- Child Process Approach: Uses Node.js child processes to interact with the Mermaid CLI, providing isolation and detailed error information.
- Error Handling Strategy: Uses a nested try-catch structure to distinguish between validation errors and system errors.
- Simple Project Structure: Ensures easy maintenance, direct dependency management, and a simplified build process.
Build and Execution
The application can be built and run using npm scripts:
# 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
Release
To release a new version, follow these steps:
1. npm run build
2. npm run bump
3. npm run changelog
4. npm publish --access public
About
A Model Context Protocol server that validates and renders Mermaid diagrams.
Invite Gmail Contacts
