Mermaid MCP App

Ce que fait cet outil

L'application Mermaid MCP intègre un moteur de rendu de diagrammes Mermaid entièrement interactif directement dans Claude Desktop et VS Code Copilot. Demandez au LLM de dessiner n'importe quel type de diagramme — organigrammes, diagrammes de séquence, ER, Gantt et 9 autres — et un panneau de vue scindée interactive s'ouvre avec panoramique, zoom et un éditeur de source en direct. Modifiez le diagramme en ligne et renvoyez-le au LLM pour poursuivre la conversation avec vos modifications.

Fonctionnalités clés

• 13 types de diagrammes — flowchart, sequence, class, state, ER, Gantt, pie, git graph, mindmap, timeline, user journey, requirement, quadrant chart
• Éditeur en vue scindée — panneau source toujours visible avec re-rendu en direct (debounce de 400 ms) ; possibilité de réduire en une barre inférieure compacte
• Envoyer à l'IA — un clic renvoie la source du diagramme édité au LLM comme contexte pour le tour suivant
• Panoramique, zoom, ajustement — glisser pour déplacer, scroller pour zoomer, pincer sur tactile ; le bouton d'ajustement au conteneur réinitialise la vue
• Thèmes Sombre / Clair — détecte automatiquement la préférence système ; modifiable par diagramme
• Copier SVG — exporte le diagramme rendu vers le presse-papier

Installation

Claude Desktop (extension — recommandé)

Téléchargez le dernier fichier .mcpb depuis GitHub Releases et double-cliquez pour l'installer. Aucun terminal requis.

Claude Desktop (manuel)

Ajoutez à ~/Library/Application Support/Claude/claude_desktop_config.json :

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

VS Code Copilot

Ajoutez à .vscode/mcp.json ou aux paramètres utilisateur :

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

Hôtes supportés

Claude Desktop et VS Code Copilot confirmés dans le README.