mermaid-skill MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Cubre 10+ tipos de diagramas Mermaid
Renderización local mediante mmdc (PNG / SVG / PDF)
Sugerencias de diseño automático para evitar aristas cruzadas
Itera sobre diagramas según retroalimentación
Funciona dentro de tu repositorio, diagramas confirmados junto al código

Demo en vivo

Cómo se ve en la práctica

mermaid-skill.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mermaid-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "mermaid-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/mermaid-skill",
          "~/.claude/skills/mermaid-skill"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add mermaid-skill -- git clone https://github.com/Agents365-ai/mermaid-skill ~/.claude/skills/mermaid-skill

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: mermaid-skill

Dibuja un diagrama de arquitectura para tu proyecto actual

👤 Desarrolladores escribiendo documentación, ADRs o guías de incorporación ⏱ ~20 min beginner

Cuándo usarlo: Sigues explicando tu arquitectura en Slack y quieres una imagen.

Requisitos previos

mmdc instalado — npm i -g @mermaid-js/mermaid-cli
Skill instalada — git clone https://github.com/Agents365-ai/mermaid-skill ~/.claude/skills/mermaid-skill

Flujo

Describe el sistema

Usa mermaid-skill. Dibuja un diagrama de flujo de nuestro servicio: cliente → puerta de enlace de API → (auth / orders / payments) → Postgres / Redis / Stripe.✓ Copiado

→ código .mmd con nombres de nodos significativos, renderizado a PNG en docs/
Añade detalles

Añade etiquetas en cada arista mostrando el protocolo (HTTPS, gRPC, TCP) y el tipo de autenticación.✓ Copiado

→ Código actualizado y re-renderizado
Confírmalo

Confirma docs/architecture.mmd y su PNG.✓ Copiado

→ ejecución de git add y commit

Resultado: Un diagrama vivo en el repositorio, no una diapositiva obsoleta en Confluence.

Errores comunes

El diagrama se convierte en un laberinto de aristas — Permite que Claude use subgrafos e indicaciones de dirección; no lo comprimas todo en una capa

Combinar con: filesystem · git

Produce un diagrama de secuencia mientras depuras

👤 Ingenieros rastreando un error entre servicios ⏱ ~15 min beginner

Cuándo usarlo: Estás intentando entender una interacción asincrónica y el inglés no es suficiente.

Flujo

Describe el flujo

Usa mermaid-skill. Diagrama de secuencia: navegador → SSR → servicio de autenticación → almacén de sesiones → renderización de página, con modo de fallo cuando la sesión es obsoleta.✓ Copiado

→ Diagrama de secuencia con el fallo anotado
Anota el error

Destaca la línea donde se manifiesta el error.✓ Copiado

→ Cuadro/nota anotada en el mensaje ofensivo

Resultado: Una imagen que puedas pegar en el ticket del error.

Genera un ERD a partir de tu esquema de base de datos real

👤 Ingenieros de datos, desarrolladores backend ⏱ ~20 min intermediate

Cuándo usarlo: Quieres una visualización de tu esquema para una revisión de diseño.

Flujo

Introspecciona

Usa mermaid-skill. Lee el schema.sql (o consulta la BD en vivo mediante postgres MCP) y produce un ERD de Mermaid.✓ Copiado

→ ERD .mmd con relaciones y cardinalidades
Elimina ruido

Descarta tablas de auditoría y enfócate en las entidades de dominio central.✓ Copiado

→ ERD reducido

Resultado: Un ERD preciso sin dibujo manual.

Errores comunes

Cardinalidades incorrectas cuando se infieren — Proporciona las definiciones reales de claves foráneas; no dejes que el modelo adivine

Combinar con: postgres

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

mermaid-skill + filesystem

Mantén los diagramas junto al código que describen

Para cada servicio en services/, añade un docs/architecture.mmd y renderízalo.✓ Copiado

mermaid-skill + postgres

Auto-genera ERDs a partir de bases de datos en vivo

Conéctate a la BD de staging y renderiza su esquema como un ERD de Mermaid.✓ Copiado

mermaid-skill + git

El diagrama permanece versionado con cambios de código

Confirma diagramas actualizados en el mismo PR que los cambios de código que describen.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
write_mermaid	descripción, tipo de diagrama	Cualquier solicitud de diagrama	0
render_mmdc	ruta .mmd, formato de salida	Después de que el código sea definitivo	mmdc local
iterate_diagram	diagrama actual + retroalimentación	Retroalimentación del revisor	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguno
Tokens por llamada: Pequeño — el código de Mermaid es compacto
Monetario: Gratis (mmdc es código abierto)
Consejo: Para diagramas grandes, genera subgrafos por separado para evitar reintentar reescrituras grandes.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno

Salida de datos: Ninguno de la skill en sí

Resolución de problemas

Errores comunes y soluciones

mmdc no encontrado

Instala globalmente: npm i -g @mermaid-js/mermaid-cli

Verificar: which mmdc

El renderizado falla con un error de sintaxis

Mermaid tiene sintaxis específica de versión; ejecuta mmdc --version y coincide con la versión asumida de la skill

Verificar: mmdc --version

El diagrama es un desastre de aristas cruzadas

Añade indicaciones de dirección (TD/LR), agrupa con subgrafos o divide en múltiples diagramas

Alternativas

mermaid-skill vs otros

Alternativa	Cuándo usarla	Contrapartida
PlantUML / draw.io	Necesitas más control o sintaxis que no sea de Mermaid	Más configuración, cadena de herramientas de renderizado diferente
paperbanana-skill	Diagramas de calidad de publicación académica	Más pesado; objetivos estéticos diferentes

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills