Draw.io MCP Server

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

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

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

	MCP App Server	MCP Tool Server	Assistant Plugins	Project Instructions
Как работает	Рендерит диаграммы прямо в чате	Открывает диаграммы в вашем браузере	Генерирует файлы .drawio, экспорт PNG/SVG/PDF по желанию или URL в браузере	Claude генерирует URL-адреса draw.io через Python
Вывод диаграмм	Интерактивный просмотрщик встроен в беседу	Редактор draw.io в новой вкладке	.drawio, .drawio.png / .svg / .pdf, или URL в браузер	Klikable ссылка на draw.io
Требуется установка	Нет (размещён на mcp.draw.io)	Да (npm-пакет)	Однострочное размещение плагина (только для PNG/SVG/PDF экспорт в Desktop)	Нет — достаточно вставить инструкции
Поддержка XML, CSV, Mermaid	XML только	✅ Все три	XML только (родной формат)	✅ Все три
Редактируемо в draw.io	Через кнопку "Open in draw.io"	✅ Прямо в редакторе	✅ Прямо в редакторе	По ссылке
Совместимо с	Claude.ai, VS Code, Cursor, любой хост MCP Apps	Claude Desktop, Cursor, OpenCode, любой клиент MCP	Claude Code, Codex CLI, GitHub Copilot, OpenCode	Claude.ai (с Projects)
Лучше для	Встроенные предпросмотры в чате	Локальные настольные рабочие процессы	Локальная разработка	Быстрая настройка, без установки

MCP App Server

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

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

https://mcp.draw.io/mcp

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

Также можно запустить сервер локально через Node.js или образ Docker image jgraph/drawio-mcp, или развернуть собственный экземпляр на Cloudflare Workers.

Инструменты:

create_diagram — Рендерит draw.io XML как интерактивную диаграмму inline в чат
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 с режимами lightbox и dark. Выпускается как @drawio/mcp на npm.

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

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

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

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 (полная документация →) — установка через marketplace этого репозитория:

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

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

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

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

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

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

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

OpenCode не требует плагина: он обнаруживает навыки в .opencode/skills/ и .claude/skills/ (и их аналогичные директории в ~/), поэтому папка навыков Claude Code работает как есть — см. OpenCode (нет плагина) для однострочной установки.

По умолчанию плагин создаёт файл .drawio и открывает его в draw.io. Укажите формат в запросе, чтобы изменить вывод:

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

Альтернатива: Instruction для проекта (Без MCP)

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

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

Раскладка диаграмм

Два независимых этапа раскладки можно запустить после генерации диаграммы ИИ — один перестраивает узлы, другой только переразмещает связи. Доступность зависит от выбранного подхода:

Этап раскладки	Что делает	App Server (create_diagram)	Tool Server (open_drawio_xml)	Assistant Plugins	Project Instructions
ELK auto-layout (postLayout: "elk")	Перестраивает узлы в чистую иерархическую раскладку; прокладывает ребра как часть этого процесса	✅	—	✅ через draw.io Desktop CLI (--layout)	—
libavoid routing (routing: "libavoid")	Сохраняет позиции узлов; проложит соединения ортогонально вокруг форм	✅	✅ с версии v1.3.0	✅ через draw.io Desktop CLI (--layout libavoid)	—

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

Местоположение данных и офлайн-использование

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

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

Диаграмма покидает машину?

Подход	Диаграмма покидает машину?
MCP App Server — hosted (mcp.draw.io)	Да — диаграмма отправляется на сервер draw.io как MCP-запрос. Самостоятельное размещение ниже — чтобы сохранить локально.
MCP App Server — self-hosted (локальный Node или ваш Cloudflare)	Нет — обрабатывается вашим сервером и встроена в HTML, который рендерится клиентской стороной.
MCP Tool Server (@drawio/mcp)	Нет — данные диаграммы передаются в URL #фрагменте, который браузеры не передают на сервер.
Assistant Plugins (Claude Code, Codex CLI, GitHub Copilot)	Нет — записывается локально и экспортируется локальным draw.io Desktop CLI.

По умолчанию сервера не пишут содержимое диаграмм в логи — только метаданные запроса (метод, сессия, статус, время). Облачный App Server через Cloudflare.Logging регистрирует тела ответов только при запуске с DEBUG=true.

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

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

App Server: соберите с использованием переменной окружения VIEWER_PATH, чтобы встроить viewer вместо загрузки с viewer.diagrams.net.
Tool Server: задайте переменную окружения DRAWIO_BASE_URL на локальный экземпляр draw.io. Его две серверные стадии также загружают код из viewer.diagrams.net один раз за выпуск draw.io и кешируют его по пользователю: ядро libavoid routing (routing: "libavoid", также инициализируется при установке) и пакет drawio-elk (postLayout: "elk", загружается при первом использовании, переопределяется через DRAWIO_ELK_URL). Отсутствие этих стадий исключает такие запросы; диаграмма не будет участвовать в этом процессе.
Assistant Plugins: опция вывода url открывает диаграмму в app.diagrams.net (жёстко закодировано — эквивалента DRAWIO_BASE_URL нет). Используйте вывод по умолчанию .drawio или экспорт через локальный Desktop, если нужно избежать этого запроса.

Ваш LLM — отдельный вопрос

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

Верификация

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

XML Reference (Single Source of Truth)

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

shared/xml-reference.md

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

Подход	Как он получает доступ к справочнику
MCP App Server	Читает файл на старте/при сборке и включает его в описание инструмента
MCP Tool Server	Читает файл на старте (из репозитория или встроенной копии через prepack)
Assistant Plugins (Claude Code, Codex CLI, GitHub Copilot)	Ссылаются нани GitHub raw URL
Project Instructions	Пользователи копируют его содержимое в Claude Project

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

Индекс поиска Shapes

Инструмент 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

# Пересобрать MCP App Server worker для встраивания обновлённого индекса
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 Documentation
MCP Specification
MCP Apps Extension