/ Каталог / Песочница / mcp-mermaid
← Все серверы ↗ GitHub
● Сообщество hustcc ⚡ Сразу

mcp-mermaid

автор 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).

▶ Смотреть демо 📦 Установить 💡 Сценарии

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

mermaid.replay ▶ готово
0/0

Установка

Выберите клиент

~/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
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

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

Continue использует массив объектов серверов, а не map.

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

Добавьте в context_servers. Zed перезагружается автоматически.

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

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: mcp-mermaid

Generate a system architecture diagram from prose

👤 Engineers writing design docs ⏱ ~10 min beginner

Когда использовать: You've described an architecture in a doc and want a diagram without leaving chat.

Предварительные требования
  • mcp-mermaid installed — npx -y mcp-mermaid in your MCP client config
Поток
  1. Describe the system
    Here's my architecture: Cloudflare → API (Node) → Postgres + Redis → Worker (Go). Generate a Mermaid flowchart showing this.✓ Скопировано
    → Valid Mermaid source rendered as SVG
  2. Iterate on styling
    Make Cloudflare blue, Postgres green, Redis red. Use dashed edges for async.✓ Скопировано
    → Revised diagram
  3. Save to file
    Output as PNG file at ./docs/arch.png with white background.✓ Скопировано
    → File on disk

Итог: An architecture PNG you can drop into the design doc.

Подводные камни
  • 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
Сочетать с: filesystem

Draft a sequence diagram in a bug report

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

Когда использовать: Prose description of who calls whom when is hard to read.

Поток
  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.✓ Скопировано
    → 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).✓ Скопировано
    → Source ready to paste

Итог: A bug report reviewers can grok in 10 seconds.

Сочетать с: 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

Когда использовать: Ad-hoc timeline for a PRD or kickoff.

Поток
  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.✓ Скопировано
    → Valid Gantt source
  2. Output PNG
    Save as PNG and also give me the URL I can embed in the PRD.✓ Скопировано
    → PNG path + hosted URL

Итог: A timeline graphic for your PRD in under a minute.

Комбинации

Сочетайте с другими MCP — эффект x10

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.✓ Скопировано
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.✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
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

Стоимость и лимиты

Во что обходится

Квота API
Local rendering is free; hosted URL output uses mermaid.ink which is free with reasonable use
Токенов на вызов
Small — diagram DSL is compact
Деньги
Free
Совет
Prefer 'mermaid' output for GitHub/docs that render natively; only go to PNG/SVG when rendering server-side is needed.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: None
Исходящий трафик: Local render for base64/svg; mermaid.ink for hosted URLs

Устранение неполадок

Частые ошибки и исправления

Mermaid parse error

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

Проверить: validate_mermaid on the source
PNG output fails in Docker

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

Проверить: docker run hustcc/mcp-mermaid
Diagram too big, gets cut off

Break into subgraphs or split into multiple diagrams.

Альтернативы

mcp-mermaid в сравнении

АльтернативаКогда использоватьКомпромисс
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

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills