Mermaid MCP App

English | 繁體中文

MCP-приложение, которое отображает диаграммы Mermaid в интерактивном просмотрщике с панорамированием, масштабированием и встроенным редактором исходного кода. Редактируйте диаграммы прямо в редакторе с разделённым видом и отправляйте обновлённый исходник обратно в LLM, чтобы продолжить разговор с вашими изменениями. Работает в Claude Desktop, VS Code и любом MCP-совместимом хосте.

Использование

После настройки попросите LLM нарисовать диаграмму:

"Draw a flowchart showing user authentication flow"

"Create a sequence diagram for an API request lifecycle"

"Render this mermaid diagram: `graph TD; A-->B; B-->C`"

Также можно явно указать тему:

«Нарисуй диаграмму классов в светлой теме»

Related MCP server: Excalidraw MCP App Server

Возможности

Взаимодействие с AI

Редактируйте исходник диаграммы непосредственно в редакторе с разделённым видом, затем отправьте его обратно в LLM, чтобы продолжить разговор с вашими изменениями.

• Send to AI — отправляет отредактированный исходник диаграммы обратно в LLM, запуская ответ

• Автосинхронизация контекста — контекст LLM автоматически обновляется по мере ввода (с защитой от дребезга); LLM всегда видит ваш последний исходник при следующем сообщении

Типы диаграмм (поддерживается 13)

Блок-схема

flowchart — универсальные ориентированные графы. Поддерживают направление сверху вниз и слева направо, подграфы и различные формы узлов.

Диаграмма последовательности

sequenceDiagram — взаимодействие между участниками во времени. Показывает сообщения, циклы и альтернативные потоки.

Диаграмма классов

classDiagram — объектно-ориентированная структура классов с атрибутами, методами и отношениями (наследование, композиция и т. д.).

Диаграмма состояний

stateDiagram-v2 — конечные автоматы с переходами, составными состояниями и параллельностью.

ER-диаграмма

erDiagram — диаграммы «сущность-связь» для моделирования данных с аннотациями кардинальности.

Диаграмма Ганта

gantt — временные шкалы проектов с задачами, вехами, зависимостями и критическими путями.

Круговая диаграмма

pie — пропорциональные данные в виде секторов с процентными подписями.

Git-граф

gitGraph — визуализация истории веток и коммитов Git с потоками слияния и cherry-pick.

Интеллект-карта

mindmap — иерархическое дерево идей, расходящихся от центрального корня.

Таймлайн

timeline — хронологические события, сгруппированные по периодам времени.

Пользовательский сценарий

journey — пути пользовательского опыта с оценкой удовлетворённости по разделам и участникам.

Диаграмма требований

requirementDiagram — системные требования с типом, риском и методом проверки, связанные с элементами дизайна.

Квадрантная диаграмма

quadrantChart — точечный график из четырёх квадрантов для приоритизации и позиционирования.

Интерфейс

• Панорамирование и масштабирование — перетаскивание мышью для панорамирования, колесо прокрутки для масштаба, pinch-to-zoom на сенсорных экранах

• По размеру контейнера — автоматическое подгонка диаграммы при отрисовке; кнопка сброса возвращает исходное масштабирование

• Копировать SVG — копирует отрисованный SVG в буфер обмена

• Редактор исходника с разделённым видом — постоянная панель редактора с перерисовкой в реальном времени (задержка 400 мс)

• Сворачиваемый редактор — сворачивается в компактную нижнюю панель; разворачивается одним кликом

• Переключение вертикальной / горизонтальной компоновки — исходник снизу (вертикально) или справа (горизонтально); в свёрнутом состоянии всегда прижат к низу

• Поддержка тем — dark (автоматически определяется) и light

Установка

Claude Desktop — расширение

Скачайте последний .mcpb из GitHub Releases и установите. Никакого терминала или настройки не требуется.

Claude Desktop — вручную

Добавьте в ~/Library/Application Support/Claude/claude_desktop_config.json:

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

VS Code

Добавьте в .vscode/mcp.json или настройки пользователя:

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

Разработка

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start