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 всегда видит актуальную версию кода.
DesignDevelopmentVscode
Открыть на GitHub

Установка

npx -y mermaid-mcp-app

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

Общее

  • СтатусСообщество
  • Разработчик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

Поделиться