mermaid-diagram-generator (MCP adapter)

Servidor MCP compatible que genera imágenes SVG a partir de diagramas Mermaid (.mmd). Ideal para integración con Copilot, VSCode y herramientas JetBrains.

Versión: 0.2.0 | Licencia: MIT | Autor: jdug | Repositorio: GitHub

Instalación local / Desarrollo

Desde el repositorio:

npm install
npm start
# Servidor MCP disponible en http://localhost:3456

API endpoints

• GET /.well-known/mcp — Manifiesto MCP con información del servidor y endpoints disponibles
• POST /generate — Genera diagrama SVG desde Mermaid. Acepta:
  • Texto plano Mermaid (text/plain)
  • JSON: { "source": "...", "filename": "..." } (filename opcional)
• GET /diagram — Devuelve el SVG generado (image/svg+xml)
  • Parámetro query: ?name= para especificar archivo SVG
• GET /health — Healthcheck del servidor

Parámetros POST /generate

• source (obligatorio) — Código Mermaid en string
• mmd (alternativa) — Código Mermaid en string
• prompt (opcional) — Descripción adicional del diagrama
• filename (opcional) — Nombre personalizado para el SVG (sin extensión)

Ejemplos de uso

Con curl - Generar desde Mermaid

curl -X POST http://localhost:3456/generate \
  -H "Content-Type: application/json" \
  -d ''{"source":"graph TD; A-->B;","filename":"diagrama-login"}''

Con curl - Descargar SVG

curl http://localhost:3456/diagram -o diagrama.svg

Desde archivo .mmd

curl -X POST http://localhost:3456/generate --data-binary @mi-diagrama.mmd

Distribución

Publicar en npm

npm login
npm publish --access public

El paquete estará disponible como mermaid-diagram-generator en npm.

Instalar globalmente

npm install -g mermaid-diagram-generator
mermaid-mcp  # Inicia el servidor

Integración con entornos

VSCode / Copilot

1. Navega a %APPDATA%\Code\User\mcp.json (Windows) o ~/.config/Code/User/mcp.json (Linux/Mac)
2. Añade la configuración:

{
  "servers": {
    "mermaid-mcp": {
      "url": "http://localhost:3456",
      "type": "http"
    }
  }
}

IntelliJ / JetBrains

Usa el mismo archivo mcp.json si el plugin lo soporta, o configura la URL a través de la UI del plugin.

Flujo de operación

1. Copilot/Studio descubre el servidor accediendo a GET /.well-known/mcp
2. El usuario solicita "genera un diagrama de flujo"
3. Copilot genera el código Mermaid y envía POST /generate con { "source": "..." }
4. El servidor genera el SVG y lo guarda en el workspace
5. El cliente descarga el SVG desde GET /diagram o especifica el nombre con ?name=diagrama-login

Cambios recientes (v0.2.0)

• ✨ Soporte para JSON payload con source, mmd, prompt
• ✨ Parámetro filename para personalizar nombres de SVG
• ✨ Endpoint /.well-known/mcp con manifiesto MCP
• ✨ Query parameter ?name= en GET /diagram
• ✨ Binary mermaid-mcp registrado en npm
• 🔧 Refactor de scripts/generate-diagram.js
• ✅ Mejor manejo de errores

Scripts disponibles

npm start                 # Inicia el servidor MCP
npm run generate-diagram  # Genera un diagrama desde CLI
npm run serve-diagram     # Sirve diagrama en HTTP
npm publish              # Publica en npm (requiere npm login)

Requisitos

• Node.js >= 14
• npm

Licencia

MIT