MCP Mermaid — diagramas y flowcharts generados dinámicamente

Qué es#

Mermaid es el lenguaje de diagramas que se renderiza en muchos editores (GitHub, Notion, VS Code, Obsidian). Sintaxis simple, output visual decente, sin Photoshop ni diagramación pesada.

Este MCP le da a Claude la capacidad de generar diagramas Mermaid según tu pedido: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state machines, mindmaps, etc.

42 installs lo posicionan como nicho, pero útil cuando lo usás.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --mcp devtools/mermaid

Para Claude:

Instalé el MCP devtools/mermaid. Generame un sequence diagram que
muestre el flow de OAuth 2.0 entre Usuario, Frontend, Backend y
Authorization Server. Devolveme el código Mermaid en bloque.

Qué podés hacer con esto#

Diagramas de arquitectura on-demand#

"Para mi proyecto actual, generame un diagrama de arquitectura mostrando: Frontend Next.js → API Routes → Postgres + Redis. Marcá las dependencias asíncronas y los caches".

Sequence diagrams para flows complejos#

"Para el flow de checkout que acabás de codear, generame el sequence diagram con todos los actores: User, Frontend, Stripe, Backend, Database, Webhook handler".

ER diagrams desde schema#

Si combinás con MCPs de DB (DBHub o pg-aiguide), Claude puede leer el schema y generar el ER diagram correspondiente.

State machines para auth flows#

"Generame un state machine para los estados de un user: anonymous → pending verification → active → banned. Incluí las transiciones y eventos".

Gantt para roadmaps#

"Generame un Gantt chart de las 5 features que voy a lanzar en Q1: nombres, duración estimada, dependencias entre ellas".

Output ready para README#

Como Mermaid se renderiza en GitHub README, podés pedirle al MCP que genere el código y pegarlo directo en docs.

Pre-requisitos#

• Editor o renderizador Mermaid-compatible (GitHub, Obsidian, etc.) para visualizar el output
• Conocer las primitives de Mermaid ayuda para iterar mejor (o pedirle ejemplos a Claude)

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: Mermaid MCP — comando exacto.
• Config JSON: mermaid.json.
• Mermaid docs: mermaid.js.org.

Recursos relacionados#

• DeepGraph React — para grafos de codebase reales, complementario a Mermaid (que es para documentación).
• Claude Code Best Practices — buenas prácticas de documentación que combinan con Mermaid.
• Agency Agents — para automatizar generación de diagramas en pipelines de docs.