/ Verzeichnis / Playground / mcp-mermaid
← Alle Server ↗ GitHub
● Community hustcc ⚡ Sofort

mcp-mermaid

von hustcc · hustcc/mcp-mermaid

Generate validated Mermaid diagrams and charts — SVG, PNG, or hosted URL — right from chat. No separate renderer needed.

mcp-mermaid generates Mermaid diagrams dynamically and returns them as base64, SVG text, saved file, or hosted URL. Includes syntax validation and multi-round correction so malformed Mermaid gets fixed automatically. Also supports infographics (timeline, comparison, process).

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

mermaid.replay ▶ bereit
0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mermaid",
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json
{
  "context_servers": {
    "mermaid": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-mermaid"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add mermaid -- npx -y mcp-mermaid

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: mcp-mermaid

Generate a system architecture diagram from prose

👤 Engineers writing design docs ⏱ ~10 min beginner

Wann einsetzen: You've described an architecture in a doc and want a diagram without leaving chat.

Voraussetzungen
  • mcp-mermaid installed — npx -y mcp-mermaid in your MCP client config
Ablauf
  1. Describe the system
    Here's my architecture: Cloudflare → API (Node) → Postgres + Redis → Worker (Go). Generate a Mermaid flowchart showing this.✓ Kopiert
    → Valid Mermaid source rendered as SVG
  2. Iterate on styling
    Make Cloudflare blue, Postgres green, Redis red. Use dashed edges for async.✓ Kopiert
    → Revised diagram
  3. Save to file
    Output as PNG file at ./docs/arch.png with white background.✓ Kopiert
    → File on disk

Ergebnis: An architecture PNG you can drop into the design doc.

Fallstricke
  • Very complex diagrams hit Mermaid's layout limits — Break into multiple diagrams, or switch to subgraph grouping
  • Theme colors don't match your doc — Pass theme config explicitly rather than relying on defaults
Kombinieren mit: filesystem

Draft a sequence diagram in a bug report

👤 Engineers filing tricky race-condition bugs ⏱ ~5 min beginner

Wann einsetzen: Prose description of who calls whom when is hard to read.

Ablauf
  1. Describe the sequence
    Client sends POST, API starts transaction, writes to DB, crashes before commit. Meanwhile a retry comes in from the client. Draw a sequence diagram.✓ Kopiert
    → Clear sequence with parallel lifelines
  2. Inline into issue
    Give me the Mermaid source so I can paste into a GitHub issue (which renders Mermaid natively).✓ Kopiert
    → Source ready to paste

Ergebnis: A bug report reviewers can grok in 10 seconds.

Kombinieren mit: github

Generate a project Gantt from a timeline

👤 Project leads who don't want to pay for gantt software for a one-off ⏱ ~5 min beginner

Wann einsetzen: Ad-hoc timeline for a PRD or kickoff.

Ablauf
  1. List phases
    Phases: Discovery (2 weeks), Design (3 weeks), Implementation (6 weeks), QA (2 weeks overlap with impl last 2 weeks). Starting 2026-05-01. Make a gantt.✓ Kopiert
    → Valid Gantt source
  2. Output PNG
    Save as PNG and also give me the URL I can embed in the PRD.✓ Kopiert
    → PNG path + hosted URL

Ergebnis: A timeline graphic for your PRD in under a minute.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

mermaid + filesystem

Save generated diagrams as versioned assets

Generate architecture diagram v2 as ./docs/arch-v2.png and update the reference in ./docs/README.md.✓ Kopiert
mermaid + github

Put Mermaid source in a PR description — GitHub renders it natively

Draft a PR description explaining the data flow change, include a Mermaid sequence diagram inline.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
generate_mermaid source: str (Mermaid DSL), output: base64|svg|mermaid|file|svgUrl|pngUrl, theme?, backgroundColor? Any diagram generation free (local render) or 1 API call for hosted URLs
validate_mermaid source: str Before generate if you're unsure about syntax free

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Local rendering is free; hosted URL output uses mermaid.ink which is free with reasonable use
Tokens pro Aufruf
Small — diagram DSL is compact
Kosten in €
Free
Tipp
Prefer 'mermaid' output for GitHub/docs that render natively; only go to PNG/SVG when rendering server-side is needed.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: None
Datenabfluss: Local render for base64/svg; mermaid.ink for hosted URLs

Fehlerbehebung

Häufige Fehler und Lösungen

Mermaid parse error

The LLM emitted invalid DSL. Validate via validate_mermaid first; mcp-mermaid also self-corrects on second pass.

Prüfen: validate_mermaid on the source
PNG output fails in Docker

The image needs a headless browser; use the official Docker image which bundles it.

Prüfen: docker run hustcc/mcp-mermaid
Diagram too big, gets cut off

Break into subgraphs or split into multiple diagrams.

Alternativen

mcp-mermaid vs. andere

AlternativeWann stattdessenKompromiss
PlantUML MCPYou prefer PlantUML's deeper UML surfaceRequires Java runtime
antv-chart / mcp-server-chartYou need data charts more than diagramsDifferent shape of output
Raw Mermaid via the web editorYou're not in a chat workflowNo MCP integration

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen