Skip to main content
Glama
Sign In
deenesjakoruzh

mermaid-mcp-server

by peng-shawn
npmGitHub
JavaScript
MIT License
340
62
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Сервер MCP Mermaid

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

Функции

  • Преобразует код диаграммы Mermaid в изображения PNG
  • Поддерживает несколько тем диаграмм (по умолчанию, лесная, темная, нейтральная)
  • Настраиваемые цвета фона
  • Использует Puppeteer для высококачественного рендеринга headless-браузера
  • Реализует протокол MCP для бесшовной интеграции с помощниками на основе искусственного интеллекта.
  • Гибкие возможности вывода: возврат изображений напрямую или сохранение на диск
  • Обработка ошибок с подробными сообщениями об ошибках

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

Сервер использует 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 в качестве значения.

Значки

Лицензия

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

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

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

  1. Функции
    1. Как это работает
      1. Строить
        1. Использование
          1. Использовать с настольным компьютером Claude
          2. Использовать с курсором и Cline
          3. Бегите с инспектором
          4. Установка через Smithery
          5. Среды Docker и Smithery
        2. API
          1. Переменные среды
            1. Примеры
              1. Базовое использование
              2. С темой и цветом фона
              3. Сохранение на диск (когда CONTENT\_IMAGE\_SUPPORTED=false)
            2. Часто задаваемые вопросы
              1. Разве Claude Desktop уже не поддерживает русалку через холст?
              2. Почему мне нужно указывать CONTENT\_IMAGE\_SUPPORTED=false при использовании с курсором?
            3. Издательский
              1. Метод 1: Использование сценария выпуска (рекомендуется)
              2. Метод 2: Ручной процесс
            4. Значки
              1. Лицензия

                Related Resources

                Related MCP Servers

                • @kazuph/mcp-fetch

                  kazuph
                  A
                  security
                  A
                  license
                  A
                  quality
                  Model Context Protocol server for fetching web content and processing images. This allows Claude Desktop (or any MCP client) to fetch web content and handle images appropriately.
                  Last updated -
                  1
                  278
                  15
                  JavaScript
                  MIT License
                  • Apple

                • PDF to PNG MCP Server

                  truaxki
                  A
                  security
                  F
                  license
                  A
                  quality
                  A Model Context Protocol server that converts PDF documents into PNG images through a simple MCP tool call.
                  Last updated -
                  1
                  2
                  Python
                  • Apple
                  • Linux

                • mcp-mermaid-validator

                  rtuin
                  A
                  security
                  A
                  license
                  A
                  quality
                  A Model Context Protocol server that validates and renders Mermaid diagrams.
                  Last updated -
                  1
                  40
                  11
                  JavaScript
                  MIT License

                • URL Fetch MCP

                  aelaguiz
                  -
                  security
                  A
                  license
                  -
                  quality
                  A Model Context Protocol (MCP) server that enables Claude or other LLMs to fetch content from URLs, supporting HTML, JSON, text, and images with configurable request parameters.
                  Last updated -
                  Python
                  MIT License

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/peng-shawn/mermaid-mcp-server'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server