Mermaid MCP: схемы и диаграммы в PNG и SVG через Claude и Cursor

hustcc/mcp-mermaid· Проверено 12.11.2026· 649на GitHub

Даёт агенту превращать код Mermaid в картинку: блок-схемы, диаграммы последовательностей, классов и состояний в PNG или SVG с темой и фоном, с проверкой синтаксиса.

3 реализации:

Весь синтаксис Mermaid, темы и фон; отдаёт base64, SVG, код Mermaid, файл PNG на диске или ссылки mermaid.ink; работает по stdio, SSE и Streamable HTTP.

Как подключить

Что сделать до подключения

Node.js с командой npx; на Windows запускайте через cmd /c npx -y mcp-mermaid

Есть образ Docker susuperli/mcp-mermaid:latest

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport stdio mermaid \
  -- npx -y mcp-mermaid

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.mermaid]
command = "npx"
args = ["-y", "mcp-mermaid"]

Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

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

Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

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

Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

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

Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

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

Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "mermaid": {
        "type": "local",
        "command": ["npx", "-y", "mcp-mermaid"]
      }
    }
  }
}

Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.

Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop

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

Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

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

Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.

Инструменты сервера

generate_mermaid_diagramрисует диаграмму из кода Mermaid

Рендерит через Puppeteer в PNG или SVG с темами default, forest, dark, neutral; картинку возвращает в ответ или сохраняет в папку.

Как подключить

Что сделать до подключения

Node.js 22.12.0 или новее

Для Cursor и Cline задайте CONTENT_IMAGE_SUPPORTED=false: картинки сохраняются в файл

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport stdio mermaid-mcp-server \
  -- npx -y @peng-shawn/mermaid-mcp-server@latest

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.mermaid-mcp-server]
command = "npx"
args = ["-y", "@peng-shawn/mermaid-mcp-server@latest"]

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

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

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

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

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

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

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

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

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "mermaid-mcp-server": {
        "type": "local",
        "command": ["npx", "-y", "@peng-shawn/mermaid-mcp-server@latest"]
      }
    }
  }
}

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

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

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

Инструменты сервера

generateпереводит код Mermaid в PNG или SVG

Проверяет диаграмму через Mermaid CLI: при ошибке отдаёт текст ошибки, при успехе — PNG.

Как подключить

Что сделать до подключения

Node.js с командой npx

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport stdio mcp-mermaid-validator \
  -- npx -y @rtuin/mcp-mermaid-validator@latest

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.mcp-mermaid-validator]
command = "npx"
args = ["-y", "@rtuin/mcp-mermaid-validator@latest"]

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "mcp-mermaid-validator": {
      "command": "npx",
      "args": ["-y", "@rtuin/mcp-mermaid-validator@latest"]
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "mcp-mermaid-validator": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@rtuin/mcp-mermaid-validator@latest"]
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "mcp-mermaid-validator": {
      "command": "npx",
      "args": ["-y", "@rtuin/mcp-mermaid-validator@latest"]
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "mcp-mermaid-validator": {
      "command": "npx",
      "args": ["-y", "@rtuin/mcp-mermaid-validator@latest"]
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "mcp-mermaid-validator": {
        "type": "local",
        "command": ["npx", "-y", "@rtuin/mcp-mermaid-validator@latest"]
      }
    }
  }
}

{
  "mcpServers": {
    "mcp-mermaid-validator": {
      "command": "npx",
      "args": ["-y", "@rtuin/mcp-mermaid-validator@latest"]
    }
  }
}

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "mcp-mermaid-validator": {
      "command": "npx",
      "args": ["-y", "@rtuin/mcp-mermaid-validator@latest"]
    }
  }
}

Инструменты сервера

validateMermaidпроверяет и рендерит диаграмму

Что попросить агента

«Нарисуй блок-схему: старт, проверка условия, ветки «да» и «нет»»Агент напишет код flowchart и вызовет generate_mermaid_diagram или generate

«Сделай диаграмму последовательности в теме forest на светло-сером фоне»Mermaid MCP Server вызовет generate с theme forest и backgroundColor #F0F0F0

«Сохрани диаграмму классов как class_diagram.png в <папка>»Mermaid MCP Server вызовет generate с name и folder

«Проверь, корректна ли эта диаграмма: <код Mermaid>»Mermaid Validator вызовет validateMermaid и вернёт ошибку или PNG

Для каких задач

Нарисовать блок-схему процесса по словесному описанию

Сделать диаграмму последовательности или классов для документации

Выгрузить диаграмму в PNG или SVG с тёмной темой и своим фоном

Сохранить картинку в папку проекта, если клиент не показывает изображения

Проверить синтаксис диаграммы и получить точную ошибку

Ограничения

У каждого сервера по одному инструменту: они только рендерят и проверяют код Mermaid, редактора диаграмм нет

Cursor не показывает картинки в ответах: у Mermaid MCP Server включайте CONTENT_IMAGE_SUPPORTED=false и указывайте папку и имя файла

Режимы svg_url и png_url у MCP Mermaid отдают публичные ссылки mermaid.ink; для закрытых схем выбирайте вывод в SVG или файл

У Mermaid Validator 57 звёзд и последнее обновление в феврале 2026; Mermaid MCP Server до версии 0.3.0 тянет зависимости с известными уязвимостями

Если не работает

Mermaid MCP Server в Docker падает с ошибкой браузера

Поставьте зависимости Chrome в контейнер или установите Chrome сами, задав при сборке PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true и при запуске PUPPETEER_EXECUTABLE_PATH.

Mermaid Validator на WSL падает с ENXIO

Старые версии читали /dev/stdin; обновитесь до свежей: она передаёт диаграмму через - для stdin и stdout.

MCP Inspector не запускает Mermaid Validator

Проверьте путь к серверу: запускайте npx @modelcontextprotocol/inspector npx -y @rtuin/mcp-mermaid-validator@latest или укажите абсолютный путь к dist/main.js.

Какую реализацию выбрать

Реализация	Кто делает	Звёзды	Запуск	Ключ	Инструменты	Обновлён
MCP Mermaid	hustcc	649	локально	не нужен	1	15 мая 2026
Mermaid MCP Server	peng-shawn	234	локально	не нужен	1	25 октября 2026
Mermaid Validator	rtuin	57	локально	не нужен	1	27 февраля 2026

Частые вопросы

Какой сервер выбрать?

MCP Mermaid умеет больше форматов вывода и работает по HTTP. Mermaid MCP Server удобен, когда нужна тема и сохранение PNG или SVG в папку. Mermaid Validator полезен, чтобы агент сам ловил ошибки синтаксиса и переписывал диаграмму.

Claude Desktop и так рисует Mermaid. Зачем сервер?

Встроенная отрисовка не понимает параметры theme и backgroundColor. Отдельный сервер к тому же одинаково работает в разных MCP-клиентах.

Почему в Cursor не видно картинку?

Cursor пока не показывает изображения в ответах. У Mermaid MCP Server задайте CONTENT_IMAGE_SUPPORTED=false: диаграмма сохранится в папку, агент вернёт путь. У Mermaid Validator вывод PNG выбран как раз под Cursor, который не понимает SVG.

Как подключить Mermaid MCP к Claude Code?

Откройте вкладку Claude Code в блоке «Как подключить»: там команда для npx -y mcp-mermaid. Другие варианты подключаются так же, через npx.

Можно ли запустить Mermaid MCP по HTTP?

Да, MCP Mermaid: mcp-mermaid -t streamable или -t sse; адреса http://localhost:3033/sse и /mcp, порт меняется флагом -p.

Работает ли сервер из России?

Серверы запускаются на вашем компьютере и ключей не требуют; ссылки svg_url и png_url у MCP Mermaid ведут на внешний сервис mermaid.ink.

Mermaid MCP: схемы и диаграммы в PNG и SVG через Claude и Cursor

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Что попросить агента

Для каких задач

Ограничения

Если не работает

Какую реализацию выбрать

Частые вопросы

Похожие серверы