Mermaid MCP App

Inglés | 繁體中文

Una aplicación MCP que renderiza diagramas de Mermaid en un visor interactivo con paneo, zoom y un editor de código fuente integrado. Edita diagramas directamente en el editor de vista dividida y envía el código fuente actualizado de vuelta al LLM para continuar la conversación con tus cambios. Funciona en Claude Desktop, VS Code y cualquier host compatible con MCP-App.

Uso

Una vez configurado, pide al LLM que dibuje un diagrama:

"Draw a flowchart showing user authentication flow"

"Create a sequence diagram for an API request lifecycle"

"Render this mermaid diagram: `graph TD; A-->B; B-->C`"

También puedes especificar un tema explícitamente:

"Dibuja un diagrama de clases con tema claro"

Related MCP server: Excalidraw MCP App Server

Características

Interacción con la IA

Edita el código fuente del diagrama directamente en el editor de vista dividida y luego envíalo de vuelta al LLM para continuar la conversación con tus cambios.

• Enviar a la IA — envía el código fuente del diagrama editado de vuelta al LLM, lo que genera una respuesta

• Sincronización automática de contexto — el contexto del LLM se actualiza automáticamente mientras escribes (con debounce); el LLM siempre ve tu código fuente más reciente en el siguiente mensaje

Tipos de diagramas (13 compatibles)

Diagrama de flujo

flowchart — Grafos dirigidos de propósito general. Admite diseños de arriba hacia abajo y de izquierda a derecha, subgrafos y varias formas de nodo.

Diagrama de secuencia

sequenceDiagram — Interacción entre participantes a lo largo del tiempo. Muestra mensajes, bucles y flujos alternativos.

Diagrama de clases

classDiagram — Estructura de clases orientada a objetos con atributos, métodos y relaciones (herencia, composición, etc.).

Diagrama de estados

stateDiagram-v2 — Máquinas de estados finitos con transiciones, estados compuestos y concurrencia.

Diagrama ER

erDiagram — Diagramas entidad-relación para el modelado de datos con anotaciones de cardinalidad.

Diagrama de Gantt

gantt — Cronogramas de proyectos con tareas, hitos, dependencias y rutas críticas.

Gráfico circular

pie — Datos proporcionales como sectores circulares con etiquetas de porcentaje.

Gráfico de Git

gitGraph — Visualización del historial de ramas y confirmaciones de Git con flujos de fusión (merge) y cherry-pick.

Mapa mental

mindmap — Árbol jerárquico de ideas que irradian desde un nodo raíz central.

Línea de tiempo

timeline — Eventos cronológicos agrupados por período de tiempo.

Viaje del usuario

journey — Flujos de experiencia de usuario puntuados por nivel de satisfacción en secciones y actores.

Diagrama de requisitos

requirementDiagram — Requisitos del sistema con tipo, riesgo y método de verificación, vinculados a elementos de diseño.

Gráfico de cuadrantes

quadrantChart — Gráfico de dispersión de cuatro cuadrantes para análisis de priorización y posicionamiento.

UI

• Paneo y zoom — arrastra el ratón para paneo, rueda del ratón para zoom, pellizco para zoom en pantallas táctiles

• Ajustar al contenedor — ajusta automáticamente el diagrama al renderizar; el botón de restablecer recupera el ajuste

• Copiar SVG — copia el SVG renderizado al portapapeles

• Editor de código fuente en vista dividida — panel de editor siempre visible con re-renderizado en vivo (debounce de 400 ms)

• Editor minimizable — se colapsa a una barra inferior compacta; se expande con un clic

• Alternancia de diseño vertical / horizontal — código fuente abajo (vertical) o a la derecha (horizontal); el estado minimizado siempre se acopla a la parte inferior

• Soporte de temas — dark (detección automática según la preferencia del sistema) y light

Instalación

Claude Desktop — Extensión (recomendada)

Descarga el último .mcpb desde GitHub Releases y haz doble clic para instalarlo. No se necesita terminal ni configuración.

Claude Desktop — Manual

Añade a ~/Library/Application Support/Claude/claude_desktop_config.json:

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

VS Code

Añade a .vscode/mcp.json o a la configuración de usuario:

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

Desarrollo

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start