Servidor MCP: Validador de sirena

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: Mermaid MCP Server

Arquitectura

Arquitectura de alto nivel

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

1. Aplicación principal : un servicio Node.js que valida los diagramas de Mermaid y devuelve la salida PNG renderizada

2. Integración con MCP : utiliza el SDK del protocolo de contexto de modelo para exponer la funcionalidad a clientes compatibles con MCP

3. 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:

1. Crea una instancia de servidor MCP

2. Registra una herramienta validateMermaid que acepta la sintaxis del diagrama Mermaid

3. Utiliza la CLI de Mermaid para validar y renderizar diagramas

4. Devuelve los resultados de la validación y el PNG renderizado (si es válido)

5. Maneja casos de error con mensajes de error apropiados

Flujo de datos

1. Entrada : Sintaxis del diagrama de sirena como cadena

2. 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

3. 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

1. 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.

2. 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.

3. 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

4. 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

5. 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.

Liberar

Para lanzar una nueva versión, siga estos pasos en orden:

• npm run build

• npm run bump

• npm run changelog

• npm publish --access public