Servidor MCP: Validador de sirena

Name: mcp-mermaid-validator
Author: rtuin

Un servidor de Protocolo de Contexto de Modelo que valida y renderiza diagramas de sirena . Este servidor permite a los LLM validar y renderizar diagramas de sirena.

Uso

Inicio rápido

Puede configurar su cliente MCP para utilizar Mermaid Validator agregándolo a su archivo de servidores mcp:

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

Related MCP server: Whimsical MCP Server

Arquitectura

Arquitectura de alto nivel

Este proyecto está estructurado como una sencilla aplicación TypeScript Node.js que:

Aplicación principal : un servicio Node.js que valida los diagramas de Mermaid y devuelve la salida PNG renderizada
Integración con MCP : utiliza el SDK del protocolo de contexto de modelo para exponer la funcionalidad a clientes compatibles con MCP
Integración de Mermaid CLI : aprovecha la herramienta Mermaid CLI para realizar la validación y representación de diagramas

Estructura del código

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

Funcionalidad del componente

Servidor MCP (Componente principal)

La funcionalidad principal se implementa en src/main.ts . Este componente:

Crea una instancia de servidor MCP
Registra una herramienta validateMermaid que acepta la sintaxis del diagrama Mermaid
Utiliza la CLI de Mermaid para validar y renderizar diagramas
Devuelve los resultados de la validación y el PNG renderizado (si es válido)
Maneja casos de error con mensajes de error apropiados

Flujo de datos

Entrada : Sintaxis del diagrama de sirena como cadena
Procesando :
- El diagrama se pasa a la CLI de Mermaid a través de la entrada estándar.
- La CLI valida la sintaxis y genera un PNG si es válido
- La salida y los errores se capturan desde stdout/stderr
Producción :
- Éxito: Confirmación de texto + PNG renderizado como imagen codificada en base64
- Error: Mensaje de error con detalles sobre el error de validación

Dependencias

Bibliotecas externas

@modelcontextprotocol/sdk : SDK para implementar el Protocolo de Contexto de Modelo
@mermaid-js/mermaid-cli : herramienta CLI para validar y renderizar diagramas de Mermaid
zod : Biblioteca de validación de esquemas para TypeScript

Dependencias de desarrollo

typescript : compilador de TypeScript
eslint : utilidad de pelusa
Más bonito : Formato de código

Especificación API

Herramienta validateMermaid

Propósito : Valida un diagrama de sirena y devuelve el PNG renderizado si es válido

Parámetros :

diagram (cadena): La sintaxis del diagrama de sirena para validar

Valor de retorno :

Éxito:
{ content: [ { type: "text", text: "Mermaid diagram is valid" }, { type: "image", data: string, // Base64-encoded PNG mimeType: "image/png" } ] }
Falla:
{ content: [ { type: "text", text: "Mermaid diagram is invalid" }, { type: "text", text: string // Error message }, { type: "text", text: string // Detailed error output (if available) } ] }

Decisiones técnicas

Integración MCP : el proyecto utiliza el Protocolo de Contexto de Modelo para estandarizar la interfaz de las herramientas de IA, lo que permite una integración perfecta con clientes compatibles.
Formato de salida PNG : la implementación utiliza PNG como formato de salida predeterminado para garantizar una mejor compatibilidad con la mayoría de los clientes MCP, particularmente Cursor, que no admite SVG.
Enfoque de proceso secundario : la implementación utiliza procesos secundarios de Node.js para interactuar con la CLI de Mermaid, que proporciona:
- Aislamiento entre la aplicación principal y el proceso de renderizado
- Capacidad de capturar información detallada de errores
- Manejo adecuado del pipeline de renderizado
Estrategia de manejo de errores : La implementación utiliza una estructura try-catch anidada para:
- Distinguir entre errores de validación (sintaxis de diagrama no válida) y errores del sistema
- Proporcionar información detallada sobre errores para ayudar a los usuarios a corregir sus diagramas
- Asegúrese de que el servicio permanezca estable incluso al procesar entradas no válidas
Estructura de proyecto simple : el proyecto utiliza una estructura de proyecto TypeScript sencilla para:
- Fácil mantenimiento y comprensión.
- Gestión directa de dependencias
- Proceso de construcción simplificado

Construcción y ejecución

La aplicación se puede crear y ejecutar utilizando scripts npm:

# 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

La aplicación se ejecuta como un servidor MCP que se comunica a través de entrada/salida estándar, lo que la hace adecuada para la integración con clientes compatibles con MCP.