Next AI Draw.io — плагин

Установка

Работает в

• Claude Code
• Cursor
• Codex
• VS Code
• Claude Desktop
• Cline

Ручная установка

claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest

Что делает

Next AI Draw.io состоит из веб-приложения для рисования диаграмм чатом с ИИ и пакета MCP-сервера, который подключает те же возможности к Claude Code, Cursor, Codex и VS Code. Пакет @next-ai-drawio/mcp-server запускается через npx, поднимает локальный HTTP-сервер на 127.0.0.1 и открывает в браузере страницу предпросмотра. Это холст draw.io, встроенный в сам пакет, поэтому редактор работает без обращения к сайту draw.io. Агент читает код и документы своими инструментами, а потом передает диаграмму в формате XML вызовами `create_new_diagram` и `edit_diagram`. Холст подсвечивает изменения агента несколько секунд, а один Ctrl+Z откатывает их. Если вы выделили фигуры и написали «вот эти», агент получает выделение через `get_selection`, а ваши ручные правки читает через `get_diagram` перед следующим изменением. Агент вызывает `get_shape_library`, чтобы взять настоящие имена значков AWS, Azure, GCP и Kubernetes. Он может сделать снимок готовой диаграммы и исправить наложения. Последние 20 версий лежат карточками рядом с холстом: любую можно сравнить с текущей или вернуть, в том числе просьбой к агенту (`restore_version`). Файлы `.drawio` и `.drawio.svg` открываются через `load_diagram`, результат сохраняется как `.drawio`, `.png`, `.svg` или `.drawio.svg`. Диаграммы можно делать многостраничными.

Для кого. Для разработчиков и архитекторов, которые просят Claude Code, Cursor или Codex нарисовать схему по коду проекта и хотят доработать ее вручную в привычном редакторе draw.io.

Пример запроса к агенту

Прочитай этот репозиторий и нарисуй его архитектуру в draw.io, сервисы и базу данных со значками AWS

Ограничения

• Простой браузер внутри VS Code и Cursor показывает пустую страницу, потому что предпросмотр запрещает встраивание в другие страницы. Откройте адрес, который вернул `start_session`, в обычном браузере.
• Снимок диаграммы и экспорт PNG или SVG рисует вкладка предпросмотра. Браузер замедляет фоновые вкладки, и вызов может уйти в тайм-аут, пока вкладка не выведена на передний план.
• Если направить `DRAWIO_BASE_URL` на собственный draw.io, например контейнер `jgraph/drawio`, пропадают подсветка правок агента, откат через Ctrl+Z и `get_selection`. Во встроенной копии отсутствуют функции, подгружающие код по требованию (например, раскладка оргструктуры), и прокси картинок: изображения, вставленные по веб-адресу, в экспорт не попадут.
• В Codex каждый вызов, меняющий диаграмму, требует подтверждения, а `codex exec` без полного доступа падает с ошибкой «MCP tool call requires approval». Чтобы это снять, в `~/.codex/config.toml` добавляют `default_tools_approval_mode = "approve"`.
• Читаются только первые 5000 знаков личных правил рисования из `~/.next-ai-drawio/instructions.md`.

Как отключить. Удалите сервер drawio из конфигурации клиента, куда вы его добавляли (`.vscode/mcp.json`, `~/.cursor/mcp.json`, `claude_desktop_config.json`, `~/.codex/config.toml`), и перезапустите клиент. Диаграммы остаются в `~/.next-ai-drawio` до ручного удаления. Переменная `DRAWIO_DATA_DIR=off` отключает сохранение файлов, `BROWSER=none` запрещает серверу открывать предпросмотр самому.

Коротко о README

В репозитории лежат веб-приложение на Next.js, настольное приложение, документация на трех языках и каталог готовых примеров с промптами. Для агентов отдельная папка packages с MCP-сервером на TypeScript и плагином для Claude Code, у каждого свой файл с описанием. В документации сервера есть таблицы инструментов и переменных окружения, разделы по самостоятельному draw.io и устранению неполадок, а также сравнение с другими draw.io-серверами. Для проверки есть тесты и сквозные тесты на Playwright.