mermaid-live-mcp

mermaid-live-mcp

Servidor MCP para generar diagramas Mermaid con vista previa en vivo en el navegador. Renderiza diagramas en tiempo real y admite exportación SVG/PNG.

Instalación

Claude Desktop

Añade a tu configuración de Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json en macOS):

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

Cursor

Añade a .cursor/mcp.json en la raíz de tu proyecto:

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

Claude Code

claude mcp add mermaid -- npx -y mermaid-live-mcp

Windsurf

Añade a ~/.codeium/windsurf/mcp_config.json:

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

Herramientas

Herramienta	Descripción
generate_mermaid	Genera un diagrama a partir de sintaxis Mermaid y abre una vista previa en vivo en el navegador
update_diagram	Reemplaza la sintaxis Mermaid de un diagrama y vuelve a renderizar la vista previa en vivo
list_diagrams	Lista todos los diagramas generados en la sesión actual
export_diagram	Escribe el SVG de un diagrama en el disco

Cómo funciona

Cuando le pides a tu asistente de IA que cree un diagrama, mermaid-live-mcp:

1. Analiza la sintaxis Mermaid
2. Abre una pestaña del navegador con una vista previa en vivo
3. Renderiza el diagrama como SVG en tiempo real mediante WebSocket
4. Proporciona botones de descarga para exportar SVG y PNG

Las actualizaciones de un diagrama se envían al instante al navegador: no es necesario recargar la página.

Tipos de diagramas compatibles

Se admiten todos los tipos de diagramas de Mermaid, incluidos diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estado, diagramas ER, diagramas de Gantt, gráficos circulares, gráficos git, mapas mentales, líneas de tiempo y más.

Desarrollo

pnpm install
pnpm build

Estructura del proyecto

Paquete	Descripción
packages/mcp-server	Servidor MCP (publicado como mermaid-live-mcp)
packages/preview	Vista previa en vivo en el navegador mediante WebSocket
packages/core	Análisis de diagramas, diseño y renderizado SVG
packages/cli	Interfaz de línea de comandos

Licencia

MIT