Draw.io MCP Server

Официальный сервер draw.io MCP (Model Context Protocol), который позволяет LLM создавать и открывать диаграммы в редакторе draw.io.

Четыре способа создания диаграмм

Этот репозиторий предлагает четыре подхода для интеграции draw.io с AI-ассистентами. Выберите тот, который подходит для вашей конфигурации:

MCP App Server

MCP App сервер отображает диаграммы draw.io встроенно в интерфейсах AI-чата, используя протокол MCP Apps. Вместо открытия вкладки браузера диаграммы появляются прямо в разговоре как интерактивные iframe.

Официальный размещённый endpoint доступен по адресу:

https://mcp.draw.io/mcp

Добавьте этот URL как удалённый MCP-сервер в Claude.ai, Cursor или любой MCP Apps-совместимый хост — установка не требуется. В Cursor (≥ 2.6) диаграммы отображаются встроенно в чате агента (установка в один клик); на старых сборках используйте stdio @drawio/mcp инструмент-сервер.

Вы также можете запустить сервер локально через Node.js или развернуть собственный экземпляр на Cloudflare Workers.

Инструменты: - create_diagram — Отображает draw.io XML как интерактивную диаграмму встроенно в чате - search_shapes — Ищет более 10 000 фигур во всех библиотеках draw.io (AWS, Azure, GCP, P&ID, электрика, Cisco, Kubernetes, UML, BPMN и т.д.) по ключевым словам, дополняя сервисом иконок draw.io (логотипы брендов и общие концептуальные иконки), когда во встроенных библиотеках нет хорошего совпадения. Возвращает точные строки стилей, которые можно использовать непосредственно в XML. Используйте это, чтобы найти правильную фигуру перед вызовом create_diagram.

Полная документация →

Примечание: Встроенное отображение диаграмм требует MCP-хоста, поддерживающего расширение MCP Apps. В хостах без поддержки MCP Apps инструмент всё равно работает, но возвращает XML как текст.

MCP Tool Server

Оригинальный MCP-сервер, который открывает диаграммы непосредственно в редакторе draw.io. Поддерживает форматы XML, CSV и Mermaid.js с опциями лайтбокса и тёмного режима. Опубликован как @drawio/mcp на npm.

Быстрый старт: npx @drawio/mcp

Инструкции по настройке доступны для Claude Desktop, Claude Code, VS Code (GitHub Copilot) и Cursor (с установкой в один клик).

Полная документация →

Assistant Plugins (Claude Code, Codex CLI, GitHub Copilot)

Навык drawio, упакованный как плагин для AI-ассистентов кодирования (в plugins/): он генерирует родные файлы .drawio с опциональным экспортом в PNG, SVG или PDF (с встроенным XML, так что экспортированный файл остаётся редактируемым в draw.io) — или URL браузера, который открывает диаграмму прямо в app.diagrams.net. Настройка MCP не требуется. Тот же навык поставляется для трёх хостов: Claude Code (полная документация →) — установка из маркетплейса этого репозитория:

/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

Или загрузите его напрямую из локального клона с помощью claude --plugin-dir ./plugins/claude-code.

Codex CLI (полная документация →) — установка из того же репозитория-маркетплейса:

codex plugin marketplace add jgraph/drawio-mcp
codex plugin add drawio@drawio

GitHub Copilot CLI (полная документация →) — установка из того же репозитория-маркетплейса:

copilot plugin marketplace add jgraph/drawio-mcp
copilot plugin install drawio@drawio

Другие поверхности Copilot (режим агента VS Code, агент кодирования, ревью кода) загружают тот же навык из каталога .github/skills/ репозитория — см. README плагина.

По умолчанию плагин создаёт файл .drawio и открывает его в draw.io. Укажите формат в запросе, чтобы изменить вывод: - png / svg / pdf — экспорт с помощью draw.io Desktop CLI с флагом --embed-diagram - url — сжиживает XML с помощью встроенного в Node.js модуля zlib и открывает результат на app.diagrams.net. draw.io Desktop не требуется; файл .drawio сохраняется локально как постоянная копия.

Альтернатива: Инструкции проекта (MCP не требуется)

Альтернативный подход, который работает без установки чего-либо. Добавьте инструкции в проект Claude, которые научат Claude генерировать URL-адреса draw.io с помощью выполнения Python-кода. Ника MCP-сервера, ни десктопного приложения — просто вставьте и работайте.

Полная документация →

Макеты диаграмм

После генерации диаграммы ИИ могут выполняться два необязательных независимых прохода — один переупорядочивает узлы, другой только перенаправляет рёбра. Какие из них доступны, зависит от подхода:

• Они применяются к диаграммам draw.io XML. Диаграммы Mermaid уже имеют автоматическую раскладку, поэтому ни один из проходов не нужен.
• App Server применяет их во встроенном просмотрщите после рендеринга диаграммы; Tool Server применяет libavoid на стороне сервера перед открытием редактора draw.io; плагины запускают их через локально установленный draw.io Desktop CLI.
• Выберите один, а не оба: ELK уже маршрутизирует свои собственные рёбра, поэтому добавление libavoid поверх избыточно. Используйте postLayout для переупорядочивания раскладки или routing для упорядочивания соединителей на раскладке, которую вы разместили осознанно.

Хранение данных и автономное использование

Если вы разворачиваете инструмент в среде со строгими ограничениями на данные, вот точно, куда попадают данные диаграммы для каждого подхода.

Ни один компонент не отправляет вашу диаграмму в облачный растеризатор. convert.diagrams.net (или любая облачная конечная точка экспорта) не вызывается нигде в этом репозитории, и не существует пути «локальная зависимость отсутствует → откат к облаку». Экспорт PNG/SVG/PDF происходит только в плагинах ассистента, которые обращаются к вашему локально установленному draw.io Desktop CLI (находится через which drawio); если он не установлен, файл .drawio сохраняется и ничего не отправляется.

Покидает ли ваша диаграмма машину?

По умолчанию серверы не записывают содержимое диаграмм в свои журналы — только метаданные запросов (метод, сессия, статус, время). Журналы App Server, размещённого на Cloudflare,

Сокращение внешних запросов

Даже когда сама диаграмма остаётся локальной, рендеринг по умолчанию загружает код веб-приложения / просмотрщика draw.io с app.diagrams.net и viewer.diagrams.net. Эти запросы получают код приложения и ресурсы — не вашу диаграмму, — но они всё равно являются исходящими. Чтобы сократить или устранить их:

• App Server: соберите с переменной окружения VIEWER_PATH, чтобы встроить просмотрщик вместо загрузки с viewer.diagrams.net.
• Tool Server: задайте переменную окружения DRAWIO_BASE_URL для самостоятельного размещённого экземпляра draw.io.
• Assistant Plugins: опциональный режим вывода url открывает диаграмму на app.diagrams.net (жёстко задано — аналога DRAWIO_BASE_URL нет). Используйте вывод по умолчанию .drawio или локальный экспорт в Desktop, если нужно избежать этого запроса.

Ваша LLM — отдельное соображение

Диаграмма генерируется LLM. Если вы используете облачную модель, содержимое диаграммы создаётся в облаке этого провайдера независимо от того, где запущен этот MCP-сервер. Полная изоляция требует также локально размещённой модели.

Проверка

Единственный надёжный способ убедиться, что развёртывание не совершает никаких исходящих вызовов, — запустить его с заблокированным сетевым исходящим трафиком (или следить за вкладкой Network в браузере) и убедиться, что рендеринг всё ещё работает. Рекомендуем это для любого развёртывания со строгой изоляцией.

XML-справочник (единый источник истины)

Справочник по генерации XML для draw.io — охватывающий маршрутизацию рёбер, контейнеры, слои, теги, метаданные, тёмную тему, свойства стилей и корректность XML — находится в одном каноническом файле:

shared/xml-reference.md

Все четыре вышеуказанных подхода используют этот файл как единый источник истины для подсказок LLM:

При обновлении руководств по генерации XML редактируйте только shared/xml-reference.md — изменения автоматически распространяются на всех потребителей.

Индекс поиска фигур

Инстру search_shapes управляет предварительно созданным индексом всех фигур draw.io. Индекс генерируется из живого клиента draw.io (https://app.diagrams.net/js/app.min.js) путём запуска всех инициализаций боковой палитры в Node.js через jsdom и захвата данных фиг.

Иконки из сервиса иконок draw.io (icons.diagrams.net — тот же группированный поиск иконок, который использует боковая панель редактора) не являются частью этого индекса: search_shapes запрашивает сервис в реальном времени, когда локальный индекс не имеет точного совпадения для запроса, возвращая иконки в виде стилей shape=image. Установите DRAWIO_ICON_SERVICE_URL на самостоятельно размещённый сервис, чтобы переопределить конечную точку, или на off, чтобы отключить дополнение иконками.

shape-search/search-index.json зафиксирован в репозитории и автоматически обновляется при каждом выпуске draw.io через GitHub Action Update Shape Search Index — ручных действий для синхронизации с последними фигурами не требуется.

Чтобы вручную перегенерировать индекс (например, при итерации самого генератора):

cd shape-search
npm install
npm run generate

# Rebuild the MCP App Server worker to embed the updated index
cd ../mcp-app-server
npm run build:worker

Генератор загружает app.min.js напрямую из публичного веб-приложения draw.io, поэтому локальная копия исходников draw.io не нужна.

Разработка

# MCP App Server
cd mcp-app-server
npm install
npm start

# MCP Tool Server
cd mcp-tool-server
npm install
npm start

Связанные ресурсы

• draw.io — бесплатный онлайн-редактор диаграмм
• draw.io Desktop — настольное приложение
• @drawio/mcp на npm — этот пакет на npm
• drawio-mcp на GitHub — репозиторий исходного кода
• Документация Mermaid.js
• Спецификация MCP
• Расширение MCP Apps