Mermaid Render

mermaid-mcp

Un servidor MCP que renderiza diagramas Mermaid a PNG, SVG o PDF — o los convierte en archivos editables de draw.io. Dale a tu LLM la capacidad de transformar sintaxis de diagramas en imágenes y documentos reales.

Inicio rápido

Claude Code

claude mcp add mermaid -- npx -y mermaid-render-mcp

Claude Desktop

Añade a claude_desktop_config.json:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-render-mcp"]
    }
  }
}

Nota: la primera ejecución descarga Chromium sin interfaz gráfica (~150 MB), por lo que el arranque inicial tarda unos minutos. Si solo necesitas diagramas de flujo y puedes trabajar con archivos editables, la ruta rápida drawio omite Chromium por completo.

Docker

No se necesita descargar Node.js ni Chromium — la imagen incluye todo (incluidas fuentes CJK para etiquetas en japonés, chino y coreano):

claude mcp add mermaid -- docker run -i --rm tcinebula/mermaid-render-mcp

Para usar output_path, monta un directorio del host y escribe en él:

{
  "mcpServers": {
    "mermaid": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "-v", "C:\\diagrams:/out", "tcinebula/mermaid-render-mcp"]
    }
  }
}

Luego pasa output_path: "/out/figure.pdf" y el archivo aparecerá en C:\diagrams.

Remoto / autoalojado (HTTP)

El mismo servidor habla Streamable HTTP cuando PORT está configurado (o MCP_TRANSPORT=http), por lo que se puede desplegar en cualquier contenedor — Railway, Fly.io, etc. — directamente desde el Dockerfile:

• Endpoint: POST /mcp (verificación de salud en /healthz)
• Configura AUTH_TOKEN para requerir Authorization: Bearer <token>
• output_path está deshabilitado en modo HTTP; solo respuestas base64/XML

Desde el código fuente

git clone https://github.com/tci-nebula/mermaid-mcp.git
cd mermaid-mcp
npm install
claude mcp add mermaid -- node /path/to/mermaid-mcp/server.js

Herramienta: render_diagram

Parámetro	Tipo	Predeterminado	Descripción
syntax	string	(obligatorio)	Definición del diagrama Mermaid
format	png | svg | pdf | drawio	png	Formato de salida (drawio = XML editable de draw.io, solo diagramas de flujo)
theme	default | dark | neutral | forest	default	Tema visual
background	string	white	Color CSS o transparent
width	number	1200	Ancho del lienzo en px (solo PNG)
pdfFit	boolean	true	Escalar la página PDF para ajustar el diagrama (solo PDF)
output_path	string	—	Escribir el resultado en esta ruta de archivo en lugar de devolver base64

Devuelve la imagen renderizada como datos codificados en base64 para que los clientes MCP puedan mostrarla en línea — o, con output_path, escribe el archivo en disco (útil para PDFs destinados a impresión o envío formal de documentos).

Ejemplo

Pídele a tu LLM:

"Dibújame un diagrama de flujo del flujo de inicio de sesión OAuth"

Genera la sintaxis Mermaid, llama a render_diagram, y recibes un PNG.

La ruta rápida drawio (sin Chromium)

format: "drawio" es la única salida que nunca toca un navegador. Es JavaScript puro — analiza, distribuye con dagre, emite XML — por lo que no hay descarga de Chromium, ni instalación de ~150 MB, ni primer arranque de varios minutos. La conversión es prácticamente instantánea.

Úsala cuando:

• quieras el diagrama editable en lugar de plano — cada forma sigue siendo un objeto real de draw.io
• estés en un equipo con recursos limitados (CI, un contenedor ligero, un portátil restringido) donde descargar Chromium no sea práctico
• solo quieras el diagrama ya y no necesites una imagen rasterizada

{
  "syntax": "flowchart TD\n  A[Start] --> B{OK?}\n  B -->|yes| C[Ship]\n  B -->|no| A",
  "format": "drawio",
  "output_path": "flow.drawio"
}

Abre el resultado en draw.io (o la extensión de VS Code) y exporta a PNG/SVG/PDF desde allí si necesitas una imagen — eso es un recorrido completo sin Chromium.

Límites

• Solo diagramas de flujo. Los diagramas flowchart y graph se convierten; los de secuencia, clase, estado, ER y gantt generan un error. Usa PNG/SVG/PDF para esos.
• theme, background y width se ignoran. El estilo es trabajo de draw.io una vez que el archivo está abierto.
• Los tamaños de nodo se estiman a partir de la longitud de la etiqueta, no de métricas de fuente medidas. draw.io vuelve a medir el texto al abrir el archivo, por lo que las cajas se ajustan correctamente — pero trata la geometría XML cruda como aproximada.

Sintaxis compatible: direcciones TD / TB / BT / LR / RL; formas [rect], (rounded), {rhombus}, ((circle)), ([stadium]), [[subroutine]], [(cylinder)], {{hexagon}}; aristas -->, ---, -.->, ==>, <-->, cada una opcionalmente con una |label|.

Cómo funciona

El renderizado de PNG, SVG y PDF se delega en @mermaid-js/mermaid-cli (incluido como dependencia), que usa Chromium sin interfaz gráfica para renderizar diagramas. La primera npm install descarga Chromium (~150 MB), por lo que tarda unos minutos.

La exportación a draw.io es JavaScript puro — un analizador de diagramas de flujo más el diseño de dagre (el mismo motor que usa Mermaid) emiten XML mxGraphModel nativo, por lo que cada forma permanece editable individualmente en draw.io.

Requisitos

• Node.js 18+

Hoja de ruta

• Exportación PDF (flujos de trabajo de documentos formales/legales)
• Exportación XML de draw.io (diagramas editables — diagramas de flujo)
• Paquete npm (mermaid-render-mcp)
• Opción de servidor alojado remotamente (transporte Streamable HTTP)

Licencia

MIT