Сервер MCP Mermaid

Сервер Model Context Protocol (MCP), который преобразует диаграммы Mermaid в изображения PNG. Этот сервер позволяет помощникам ИИ и другим приложениям генерировать визуальные диаграммы из текстовых описаний с использованием синтаксиса разметки Mermaid.

Функции

• Преобразует код диаграммы Mermaid в изображения PNG

• Поддерживает несколько тем диаграмм (по умолчанию, лесная, темная, нейтральная)

• Настраиваемые цвета фона

• Использует Puppeteer для высококачественного рендеринга headless-браузера

• Реализует протокол MCP для бесшовной интеграции с помощниками на основе искусственного интеллекта.

• Гибкие возможности вывода: возврат изображений напрямую или сохранение на диск

• Обработка ошибок с подробными сообщениями об ошибках

Related MCP server: Mermaid MCP Server

Как это работает

Сервер использует Puppeteer для запуска headless-браузера, рендеринга диаграммы Mermaid в SVG и захвата скриншота рендеринговой диаграммы. Процесс включает в себя:

1. Запуск экземпляра headless-браузера

2. Создание HTML-шаблона с кодом Mermaid

3. Загрузка библиотеки Mermaid.js

4. Рендеринг диаграммы в SVG

5. Сделать снимок экрана с отрендеренным SVG в формате PNG

6. Либо вернуть изображение напрямую, либо сохранить его на диске

Строить

npx tsc

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

Использовать с настольным компьютером Claude

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

Использовать с курсором и Cline

env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server

Список диаграмм русалок можно найти в ./diagrams , они создаются с помощью агента Cursor с подсказкой: «создать диаграммы русалок и сохранить их в отдельной папке диаграмм, объясняющей, как работает renderMermaidPng».

Бегите с инспектором

Запустите сервер с инспектором для тестирования и отладки:

npx @modelcontextprotocol/inspector node dist/index.js

Сервер запустится и будет прослушивать stdio на предмет сообщений протокола MCP.

Подробнее об инспекторе можно узнать здесь .

Установка через Smithery

Чтобы автоматически установить Mermaid Diagram Generator для Claude Desktop через Smithery :

npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude

Среды Docker и Smithery

При запуске в контейнерах Docker (в том числе через Smithery) вам может потребоваться обработка зависимостей Chrome:

1. Теперь сервер пытается использовать встроенный браузер Puppeteer по умолчанию.

2. Если вы столкнулись с ошибками, связанными с браузером, у вас есть два варианта:

   Вариант 1: Во время сборки образа Docker:

   • Установите PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true при установке Puppeteer

   • Установите Chrome/Chromium в свой Docker-контейнер

   • Установите PUPPETEER_EXECUTABLE_PATH во время выполнения, чтобы указать на установку Chrome

   Вариант 2: использование встроенного Chrome от Puppeteer:

   • Убедитесь, что ваш Docker-контейнер имеет необходимые зависимости для Chrome

   • Не нужно устанавливать PUPPETEER_SKIP_CHROMIUM_DOWNLOAD

   • Код будет автоматически использовать встроенный браузер.

Для пользователей Smithery последняя версия должна работать без дополнительной настройки.

API

Сервер предоставляет единственный инструмент:

• generate : Преобразует код диаграммы Mermaid в изображение PNG

  • Параметры:

    • code : Код диаграммы русалки для визуализации

    • theme : (необязательно) Тема для диаграммы. Варианты: "default", "forest", "dark", "neutral"

    • backgroundColor : (необязательно) Цвет фона для диаграммы, например, «белый», «прозрачный», «#F0F0F0»

    • name : Имя сгенерированного файла (обязательно, если CONTENT_IMAGE_SUPPORTED=false)

    • folder : абсолютный путь для сохранения изображения (обязательно, если CONTENT_IMAGE_SUPPORTED=false)

Поведение инструмента generate зависит от переменной среды CONTENT_IMAGE_SUPPORTED :

• Если CONTENT_IMAGE_SUPPORTED=true (по умолчанию): инструмент возвращает изображение непосредственно в ответе.

• Когда CONTENT_IMAGE_SUPPORTED=false : инструмент сохраняет изображение в указанной папке и возвращает путь к файлу.

Переменные среды

• CONTENT_IMAGE_SUPPORTED : управляет тем, будут ли изображения возвращаться непосредственно в ответе или сохраняться на диске.

  • true (по умолчанию): изображения возвращаются непосредственно в ответе.

  • false : Изображения сохраняются на диск, требуя параметры name и folder

Примеры

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

// Generate a flowchart with default settings
{
  "code": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]"
}

С темой и цветом фона

// Generate a sequence diagram with forest theme and light gray background
{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

Сохранение на диск (когда CONTENT_IMAGE_SUPPORTED=false)

// Generate a class diagram and save it to disk
{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

Часто задаваемые вопросы

Разве Claude Desktop уже не поддерживает русалку через холст?

Да, но он не поддерживает параметры theme и backgroundColor . Плюс, наличие выделенного сервера упрощает создание диаграмм русалок с помощью разных клиентов MCP.

Почему мне нужно указывать CONTENT_IMAGE_SUPPORTED=false при использовании с курсором?

Курсор пока не поддерживает встроенные изображения в ответах.

Издательский

В этом проекте используются действия GitHub для автоматизации процесса публикации в npm.

Метод 1: Использование сценария выпуска (рекомендуется)

1. Убедитесь, что все ваши изменения зафиксированы и отправлены.

2. Запустите скрипт релиза либо с определенным номером версии, либо с семантическим приращением версии:

   # Using a specific version number
   npm run release 0.1.4
   
   # Using semantic version increments
   npm run release patch  # Increments the patch version (e.g., 0.1.3 → 0.1.4)
   npm run release minor  # Increments the minor version (e.g., 0.1.3 → 0.2.0)
   npm run release major  # Increments the major version (e.g., 0.1.3 → 1.0.0)

3. Сценарий будет:

   • Проверить формат версии или семантическое приращение

   • Проверьте, находитесь ли вы на основной ветке

   • Обнаружение и предупреждение о несоответствии версий между файлами

   • Последовательно обновите все ссылки на версии (package.json, package-lock.json и index.ts)

   • Создайте единый коммит со всеми изменениями версии

   • Создайте и отправьте тег git

   • Затем рабочий процесс GitHub автоматически выполнит сборку и опубликует в npm.

Метод 2: Ручной процесс

1. Обновите свой код и зафиксируйте изменения.

2. Создайте и отправьте новый тег с номером версии:

   git tag v0.1.4  # Use the appropriate version number
   git push origin v0.1.4

3. Рабочий процесс GitHub автоматически:

   • Построить проект

   • Опубликовать в npm с версией из тега

Примечание: Вам необходимо настроить секрет NPM_TOKEN в настройках вашего репозитория GitHub. Для этого:

1. Сгенерируйте токен доступа npm с разрешениями на публикацию

2. Перейдите в свой репозиторий GitHub → Настройки → Секреты и переменные → Действия.

3. Создайте новый секрет репозитория с именем NPM_TOKEN , используя ваш токен npm в качестве значения.

Значки

Лицензия

Массачусетский технологический институт