В мире AI-агентов произошло событие, которое стоит обсудить не только разработчикам, но и всем, кто работает с визуальными нотациями и диаграммами. Энтузиаст опубликовал на Habr решение, которое позволяет нейросети рисовать прямо в Excalidraw, используя всего около 100 строк кода. Речь не о генерации статичных изображений, а о полноценном агентном цикле, где нейросеть сама решает, что и как рисовать, итеративно уточняя результат. Давайте разберем, как это работает, и почему это меняет подход к созданию диаграмм.
Что такое Excalidraw и зачем учить нейросеть рисовать?
Excalidraw — это популярный open-source инструмент для создания диаграмм, блок-схем и визуальных заметок от руки. Его главная фишка — «ручной» стиль, который делает диаграммы живыми и понятными. До недавнего времени интеграция нейросетей с Excalidraw ограничивалась генерацией SVG-кода, который нужно было вставлять вручную. Теперь же появился агентный подход, где нейросеть (например, GPT-4o или Claude 3.5) управляет канвой напрямую.
Агентный цикл: как это работает за 100 строк?
Основная идея опубликованного на Habr решения Источник — превратить нейросеть в агента, который имеет доступ к API Excalidraw и может выполнять действия: создавать прямоугольники, линии, текст, стрелки и перемещать элементы. Весь код умещается в 100 строк на Python. Вот как выглядит этот цикл:
- Инициализация: Агент получает пустое полотно и команду от пользователя (например, «нарисуй блок-схему процесса регистрации пользователя»).
- Планирование: Нейросеть генерирует JSON-инструкции для первого шага (например, создать прямоугольник с текстом «Старт» в координатах x=100, y=100).
- Исполнение: Код вызывает API Excalidraw и отрисовывает элемент на канве.
- Обратная связь: Агент смотрит на текущее состояние канвы (что уже нарисовано) и решает, что делать дальше.
- Итерация: Цикл повторяется, пока нейросеть не решит, что диаграмма завершена.
Ключевой нюанс — нейросеть не генерирует всю диаграмму сразу, а делает это пошагово, каждый раз оценивая результат. Это напоминает работу человека, который сначала рисует общий контур, потом детали. Такой подход значительно повышает качество итоговой диаграммы.
Технические детали: как это реализовано
В основе решения лежит простая архитектура. Нейросеть получает системный промпт, в котором описаны доступные инструменты (функции) для работы с Excalidraw. Например:
| Инструмент | Описание | Параметры |
|---|---|---|
create_rectangle |
Создать прямоугольник | x, y, width, height, fillColor |
create_text |
Добавить текст | x, y, content, fontSize |
create_arrow |
Нарисовать стрелку | startX, startY, endX, endY |
move_element |
Переместить элемент | elementId, newX, newY |
Агент использует библиотеку openai (или аналогичную для Claude) и делает последовательные вызовы API, каждый раз передавая текущее состояние канвы в виде текстового описания. Это не требует сложной инфраструктуры — достаточно одного Python-скрипта.
Практический пример: рисуем блок-схему
Допустим, нужно нарисовать блок-схему авторизации пользователя. Пользователь пишет: «Нарисуй процесс входа: форма -> проверка -> успех/ошибка». Агент делает:
- Создает прямоугольник «Форма входа» (x=200, y=50).
- Добавляет стрелку от «Формы» к «Проверке данных» (x=200, y=150).
- Создает ромб «Проверка данных» (x=200, y=200).
- От ромба рисует две стрелки: вправо — «Успех» (зеленый прямоугольник), вниз — «Ошибка» (красный прямоугольник).
- Добавляет текст в каждый элемент.
Каждый шаг — отдельный вызов нейросети. В результате получается аккуратная диаграмма, которую можно сразу использовать в документации или презентации.
Почему это важно для AI-автоматизации?
Данный подход демонстрирует, как можно обучать нейросети работать с визуальными инструментами, не создавая специализированные датасеты. Вместо этого используется способность языковых моделей понимать пространственные отношения и выполнять последовательные действия. Это открывает новые возможности:
- Автоматическая документация: Нейросеть может по текстовому описанию процесса рисовать блок-схемы и диаграммы.
- Интерактивные доски: AI-агенты могут работать в Miro, Figma или Excalidraw, помогая командам визуализировать идеи.
- Обучение: Студенты могут описывать концепции текстом, а нейросеть визуализирует их в реальном времени.
Ограничения и перспективы
Пока решение имеет несколько ограничений. Во-первых, оно требует доступа к API нейросети (OpenAI, Anthropic), что стоит денег — каждая итерация цикла делает новый запрос. Во-вторых, сложные диаграммы с десятками элементов могут требовать 20-30 итераций, что занимает время. В-третьих, нейросеть иногда «зацикливается» — начинает бесконечно уточнять детали, не понимая, что работа завершена. Автор исходного кода на Habr решил эту проблему, добавив лимит на количество шагов (например, максимум 15 итераций).
Тем не менее, это мощный демонстратор того, как AI-агенты могут взаимодействовать с визуальными средами. В ближайшие годы такие интеграции станут стандартом для инструментов совместной работы.
Как попробовать самому?
Если хотите повторить эксперимент, вам понадобится:
- Python 3.10+
- API-ключ OpenAI или Anthropic
- Установленный Excalidraw (можно локально или через Docker)
- Скрипт из 100 строк, опубликованный в статье-источнике
Код полностью открыт и доступен на GitHub. Запустите его, дайте команду — и увидите, как нейросеть рисует прямо на вашем экране.
Вывод
Агентный цикл для рисования в Excalidraw — это не просто игрушка, а демонстрация того, как языковые модели могут управлять визуальными инструментами. Всего 100 строк кода превращают нейросеть в полноценного художника-диаграммиста. Это отличный пример того, как AI-автоматизация проникает в повседневные инструменты разработчиков и дизайнеров.
Попробуйте сами — возможно, вы найдете новые способы применения этого подхода в своих проектах.
Комментарии