Mermaid MCP App

English | 繁體中文

Eine MCP-App, die Mermaid-Diagramme in einem interaktiven Viewer mit Schwenken, Zoomen und einem integrierten Quelltext-Editor rendert. Bearbeiten Sie Diagramme direkt im Split-View-Editor und senden Sie den aktualisierten Quelltext zurück an das LLM, um das Gespräch mit Ihren Änderungen fortzusetzen. Funktioniert in Claude Desktop, VS Code und jedem MCP-App-kompatiblen Host.

Verwendung

Nach der Konfiguration können Sie das LLM bitten, ein Diagramm zu zeichnen:

"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`"

Sie können auch ein Design explizit angeben:

„Zeichne ein Klassendiagramm mit hellem Design“

Related MCP server: Excalidraw MCP App Server

Funktionen

Interaktion mit KI

Bearbeiten Sie den Diagramm-Quelltext direkt im Split-View-Editor und senden Sie ihn zurück an das LLM, um das Gespräch mit Ihren Änderungen fortzusetzen.

• An KI senden — sendet den bearbeiteten Diagramm-Quelltext zurück an das LLM und löst eine Antwort aus

• Automatische Kontextsynchronisierung — Der LLM-Kontext wird beim Tippen automatisch aktualisiert (entprellt); das LLM sieht bei der nächsten Nachricht immer Ihren neuesten Quelltext

Diagrammtypen (13 unterstützt)

Flowchart

flowchart — Allgemeine gerichtete Graphen. Unterstützt Top-Down- und Links-Rechts-Layouts, Untergraphen und verschiedene Knotenformen.

Sequence Diagram

sequenceDiagram — Interaktion zwischen Teilnehmern im Zeitverlauf. Zeigt Nachrichten, Schleifen und alternative Abläufe.

Class Diagram

classDiagram — Objektorientierte Klassenstruktur mit Attributen, Methoden und Beziehungen (Vererbung, Komposition usw.).

State Diagram

stateDiagram-v2 — Endliche Zustandsautomaten mit Übergängen, zusammengesetzten Zuständen und Nebenläufigkeit.

ER Diagram

erDiagram — Entity-Relationship-Diagramme für die Datenmodellierung mit Kardinalitätsangaben.

Gantt Chart

gantt — Projektzeitpläne mit Aufgaben, Meilensteinen, Abhängigkeiten und kritischen Pfaden.

Pie Chart

pie — Proportionale Daten als Kreisdiagrammsegmente mit Prozentbeschriftungen.

Git Graph

gitGraph — Visualisierung der Git-Branch- und Commit-Historie mit Merge- und Cherry-Pick-Abläufen.

Mindmap

mindmap — Hierarchischer Ideenbaum, der von einem zentralen Wurzelknoten ausgeht.

Timeline

timeline — Chronologische Ereignisse, gruppiert nach Zeiträumen.

User Journey

journey — User-Experience-Abläufe, bewertet nach Zufriedenheitsgrad über Abschnitte und Akteure hinweg.

Requirement Diagram

requirementDiagram — Systemanforderungen mit Typ, Risiko und Verifikationsmethode, verknüpft mit Designelementen.

Quadrant Chart

quadrantChart — Streudiagramm mit vier Quadranten für Priorisierungs- und Positionierungsanalysen.

UI

• Schwenken & Zoomen — Maus ziehen zum Schwenken, Mausrad zum Zoomen, Pinch-to-Zoom auf Touch-Geräten

• An Container anpassen — passt das Diagramm beim Rendern automatisch an; die Zurücksetzen-Schaltfläche stellt die Anpassung wieder her

• SVG kopieren — kopiert das gerenderte SVG in die Zwischenablage

• Split-View-Quelltext-Editor — immer sichtbares Editor-Panel mit Live-Neu-Rendering (400 ms Entprellung)

• Minimierbarer Editor — zu einer kompakten unteren Leiste einklappbar; mit einem Klick erweiterbar

• Umschalter für vertikales / horizontales Layout — Quelltext unten (vertikal) oder rechts (horizontal); im minimierten Zustand wird immer unten angedockt

• Design-Unterstützung — dark (automatisch aus der Systemeinstellung erkannt) und light

Installation

Claude Desktop — Erweiterung (empfohlen)

Laden Sie die neueste .mcpb von GitHub Releases herunter und installieren Sie sie per Doppelklick. Kein Terminal oder Konfiguration erforderlich.

Claude Desktop — Manuell

Fügen Sie Folgendes zu ~/Library/Application Support/Claude/claude_desktop_config.json hinzu:

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

VS Code

Fügen Sie Folgendes zu .vscode/mcp.json oder den Benutzereinstellungen hinzu:

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

Entwicklung

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start