Mermaid MCP App

Mermaid MCP App

finfin
1 звёзд1 форков
Mermaid MCP App — это MCP-сервер, который рендерит Mermaid-диаграммы прямо в интерфейсе AI-ассистента. Работает в Claude Desktop, VS Code и других MCP-совместимых клиентах. Разработчикам часто нужно быстро объяснить архитектуру, последовательность вызовов или структуру данных. Обычно для этого приходится переключаться между чатом, графическим редактором и документацией. Mermaid MCP App убирает эти переходы: вы описываете схему текстом на Mermaid, а ассистент превращает её в графическую диаграмму. Главное отличие от простого генератора — интерактивность. Диаграмму можно панорамировать и масштабировать. Встроенный редактор с разделением экрана показывает исходный код и готовую схему одновременно. Внесли правки в код схемы? Нажмите «Отправить AI» — и диалог продолжится с учётом ваших изменений. Контекст синхронизируется автоматически, AI всегда видит актуальную версию кода.
ДизайнРазработкаVS Code
Подключить MCPОткрыть на GitHub
Подключение

Подключить Mermaid MCP App

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

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

3

Скопируйте и проверьте

Claude Desktop / Claude Code

Клиент запускает MCP-сервер как локальный процесс.

  1. 1.Откройте настройки MCP в Claude.
  2. 2.Добавьте сервер с указанной командой и переменными окружения.
  3. 3.Перезапустите Claude, если сервер не появился автоматически.
json
{
  "mcpServers": {
    "mermaid-mcp-app": {
      "command": "npx",
      "args": [
        "-y",
        "mermaid-mcp-app"
      ]
    }
  }
}

Сгенерировано из существующей команды запуска. Желательно сверить с README.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Mermaid MCP App

Mermaid MCP App относится к Дизайн, Разработка, VS Code. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
Не указана
Реализация
TypeScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 1.

Характеристики

Общее

  • СтатусСообщество
  • Разработчикfinfin

Технологии

  • Языки
    TypeScript
  • Транспорт
    stdio

Описание

Возможности

  • Рендерит Mermaid-диаграммы в окне с панорамированием и масштабированием.
  • Встраивает редактор с разделением экрана: слева код, справа готовая схема.
  • Кнопка «Отправить AI» передаёт изменённый код диаграммы обратно в чат.
  • Автоматическая синхронизация контекста — AI видит последнюю версию кода в реальном времени.
  • Поддерживает 13 типов диаграмм Mermaid:
    • Flowchart — блок-схемы
    • Sequence Diagram — диаграммы последовательности
    • Class Diagram — UML-диаграммы классов
    • State Diagram — диаграммы состояний
    • ER Diagram — схемы «сущность-связь»
    • Gantt Chart — диаграммы Ганта
    • Pie Chart — круговые диаграммы
    • Git Graph — графы Git
  • Переключает тему оформления: светлая или тёмная.
  • Работает в Claude Desktop, VS Code, Cursor и любом MCP-хосте.
  • Не требует установки — запускается одной командой через npx.

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

  1. Убедитесь, что в системе установлен Node.js версии 18 или новее.
  2. Запустите сервер в терминале: npx -y mermaid-mcp-app
  3. Добавьте сервер в конфигурацию вашего MCP-клиента. Пример для Claude Desktop:{ "mcpServers": { "mermaid-mcp-app": { "command": "npx", "args": ["-y", "mermaid-mcp-app"] } } }
  4. Перезапустите клиент.

Примеры запросов

  • «Нарисуй блок-схему процесса регистрации и авторизации пользователя.»
  • «Создай диаграмму последовательности для REST API-запроса от контроллера до базы данных.»
  • «Визуализируй эту Mermaid-схему: graph TD; A-->B; B-->C.»
  • «Построй диаграмму классов для паттерна Project-Aggregate со светлой темой.»
  • «Покажи ER-диаграмму для модели данных интернет-магазина: заказы, товары, покупатели.»

Технические детали

  • Язык разработки: TypeScript
  • Транспорт: stdio
  • Лицензия: MIT
  • Совместимые клиенты: Claude Desktop, VS Code, Cursor, Continue.dev

Поделиться