Mermaid MCP-Server

Ein Model Context Protocol (MCP)-Server, der Mermaid-Diagramme in PNG-Bilder konvertiert. Dieser Server ermöglicht es KI-Assistenten und anderen Anwendungen, visuelle Diagramme aus Textbeschreibungen mithilfe der Mermaid-Markdown-Syntax zu generieren.

Merkmale

• Konvertiert den Mermaid-Diagrammcode in PNG-Bilder

• Unterstützt mehrere Diagrammthemen (Standard, Wald, Dunkel, Neutral)

• Anpassbare Hintergrundfarben

• Verwendet Puppeteer für hochwertiges Headless-Browser-Rendering

• Implementiert das MCP-Protokoll für die nahtlose Integration mit KI-Assistenten

• Flexible Ausgabeoptionen: Bilder direkt zurückgeben oder auf der Festplatte speichern

• Fehlerbehandlung mit detaillierten Fehlermeldungen

Related MCP server: Mermaid MCP Server

Wie es funktioniert

Der Server verwendet Puppeteer, um einen Headless-Browser zu starten, das Mermaid-Diagramm in SVG zu rendern und einen Screenshot des gerenderten Diagramms zu erstellen. Der Prozess umfasst:

1. Starten einer Headless-Browserinstanz

2. Erstellen einer HTML-Vorlage mit dem Mermaid-Code

3. Laden der Mermaid.js-Bibliothek

4. Rendern des Diagramms in SVG

5. Erstellen eines Screenshots des gerenderten SVG als PNG

6. Entweder das Bild direkt zurückgeben oder auf der Festplatte speichern

Bauen

npx tsc

Verwendung

Verwendung mit Claude Desktop

"mcpServers": {
  "mermaid": {
    "command": "npx",
    "args": [
      "-y @peng-shawn/mermaid-mcp-server"
    ]
  }
}

Verwendung mit Cursor und Cline

env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server

Sie finden eine Liste mit Meerjungfrauendiagrammen unter ./diagrams . Sie werden mit dem Cursor-Agenten mit der Eingabeaufforderung erstellt: „Meerjungfrauendiagramme erstellen und in einem separaten Diagrammordner speichern, in dem erklärt wird, wie renderMermaidPng funktioniert.“

Mit Inspektor ausführen

Führen Sie den Server zum Testen und Debuggen mit Inspector aus:

npx @modelcontextprotocol/inspector node dist/index.js

Der Server wird gestartet und wartet auf stdio auf MCP-Protokollnachrichten.

Erfahren Sie hier mehr über Inspector.

Installation über Smithery

So installieren Sie Mermaid Diagram Generator für Claude Desktop automatisch über Smithery :

npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude

Docker- und Smithery-Umgebungen

Beim Ausführen in Docker-Containern (einschließlich über Smithery) müssen Sie möglicherweise Chrome-Abhängigkeiten verarbeiten:

1. Der Server versucht nun standardmäßig, den mitgelieferten Browser von Puppeteer zu verwenden

2. Wenn browserbezogene Fehler auftreten, haben Sie zwei Möglichkeiten:

   Option 1: Während der Erstellung des Docker-Images:

   • Setzen Sie PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true bei der Installation von Puppeteer

   • Installieren Sie Chrome/Chromium in Ihrem Docker-Container

   • Legen Sie PUPPETEER_EXECUTABLE_PATH zur Laufzeit fest, um auf die Chrome-Installation zu verweisen

   Option 2: Verwenden Sie das mitgelieferte Chrome von Puppeteer:

   • Stellen Sie sicher, dass Ihr Docker-Container über die erforderlichen Abhängigkeiten für Chrome verfügt.

   • PUPPETEER_SKIP_CHROMIUM_DOWNLOAD muss nicht festgelegt werden

   • Der Code verwendet automatisch den mitgelieferten Browser

Für Smithery-Benutzer sollte die neueste Version ohne zusätzliche Konfiguration funktionieren.

API

Der Server stellt ein einzelnes Tool bereit:

• generate : Konvertiert den Mermaid-Diagrammcode in ein PNG-Bild

  • Parameter:

    • code : Der zu rendernde Code des Meerjungfrau-Diagramms

    • theme : (optional) Thema für das Diagramm. Optionen: "Standard", "Wald", "Dunkel", "Neutral"

    • backgroundColor : (optional) Hintergrundfarbe für das Diagramm, zB 'weiß', 'transparent', '#F0F0F0'

    • name : Name der generierten Datei (erforderlich, wenn CONTENT_IMAGE_SUPPORTED=false)

    • folder : Absoluter Pfad zum Speichern des Bildes (erforderlich, wenn CONTENT_IMAGE_SUPPORTED=false)

Das Verhalten des generate hängt von der Umgebungsvariable CONTENT_IMAGE_SUPPORTED ab:

• Wenn CONTENT_IMAGE_SUPPORTED=true (Standard): Das Tool gibt das Bild direkt in der Antwort zurück

• Wenn CONTENT_IMAGE_SUPPORTED=false : Das Tool speichert das Bild im angegebenen Ordner und gibt den Dateipfad zurück

Umgebungsvariablen

• CONTENT_IMAGE_SUPPORTED : Steuert, ob Bilder direkt in der Antwort zurückgegeben oder auf der Festplatte gespeichert werden

  • true (Standard): Bilder werden direkt in der Antwort zurückgegeben

  • false : Bilder werden auf der Festplatte gespeichert und erfordern die Parameter name und folder .

Beispiele

Grundlegende Verwendung

// Generate a flowchart with default settings
{
  "code": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]"
}

Mit Design und Hintergrundfarbe

// Generate a sequence diagram with forest theme and light gray background
{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

Auf Festplatte speichern (wenn CONTENT_IMAGE_SUPPORTED=false)

// Generate a class diagram and save it to disk
{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

Häufig gestellte Fragen

Unterstützt Claude Desktop Mermaid nicht bereits über Canvas?

Ja, aber die Optionen theme und backgroundColor werden nicht unterstützt. Außerdem erleichtert ein dedizierter Server die Erstellung von Meerjungfrauendiagrammen mit verschiedenen MCP-Clients.

Warum muss ich bei Verwendung mit Cursor CONTENT_IMAGE_SUPPORTED=false angeben?

Cursor unterstützt noch keine Inline-Bilder in Antworten.

Veröffentlichen

Dieses Projekt verwendet GitHub Actions, um den Veröffentlichungsprozess in npm zu automatisieren.

Methode 1: Verwenden des Release-Skripts (empfohlen)

1. Stellen Sie sicher, dass alle Ihre Änderungen übernommen und übertragen werden

2. Führen Sie das Release-Skript entweder mit einer bestimmten Versionsnummer oder einem semantischen Versionsinkrement aus:

   # Using a specific version number
   npm run release 0.1.4
   
   # Using semantic version increments
   npm run release patch  # Increments the patch version (e.g., 0.1.3 → 0.1.4)
   npm run release minor  # Increments the minor version (e.g., 0.1.3 → 0.2.0)
   npm run release major  # Increments the major version (e.g., 0.1.3 → 1.0.0)

3. Das Skript wird:

   • Validieren Sie das Versionsformat oder das semantische Inkrement

   • Überprüfen Sie, ob Sie sich im Hauptzweig befinden

   • Erkennen und warnen Sie vor Versionskonflikten zwischen Dateien

   • Aktualisieren Sie alle Versionsreferenzen konsistent (package.json, package-lock.json und index.ts).

   • Erstellen Sie ein einzelnes Commit mit allen Versionsänderungen

   • Erstellen und pushen Sie einen Git-Tag

   • Der GitHub-Workflow wird dann automatisch erstellt und auf npm veröffentlicht

Methode 2: Manueller Prozess

1. Aktualisieren Sie Ihren Code und übernehmen Sie die Änderungen

2. Erstellen und pushen Sie ein neues Tag mit der Versionsnummer:

   git tag v0.1.4  # Use the appropriate version number
   git push origin v0.1.4

3. Der GitHub-Workflow führt automatisch Folgendes aus:

   • Erstellen des Projekts

   • Veröffentlichen Sie in npm mit der Version aus dem Tag

Hinweis: Sie müssen das NPM_TOKEN Geheimnis in den Einstellungen Ihres GitHub-Repositorys einrichten. Gehen Sie dazu wie folgt vor:

1. Generieren Sie ein NPM-Zugriffstoken mit Veröffentlichungsberechtigungen

2. Gehen Sie zu Ihrem GitHub-Repository → Einstellungen → Geheimnisse und Variablen → Aktionen

3. Erstellen Sie ein neues Repository-Geheimnis mit dem Namen NPM_TOKEN und Ihrem NPM-Token als Wert.

Abzeichen

Lizenz

MIT