Представьте, что вы пытаетесь объяснить архитектору сложную схему микросервисов, используя только текстовый чат. (Звучит как утренний кошмар синьора, пытающегося объяснить стажеру, почему «работает на моей машине» — это не деплой стратегия). В эпоху, когда ИИ уже пишет код по запросу, интерфейс общения с моделям остался прежним — текстовым, хотя архитектура систем исторически рождается на маркерных досках. Прямо сейчас на стыке блок-схем и генеративного софта появляется новый класс инструментов, который навсегда меняет прототипирование.

Современная разработка программного обеспечения движется в сторону максимального снижения порога входа и ускорения прототипирования. Мы уже привыкли к чат-ботам, генерирующим фрагменты кода, и к автономным агентам, способным фиксить баги в репозиториях по одному текстовому запросу. Однако интерфейс взаимодействия человека с ИИ долгое время оставался текстовым. Текст — отличный инструмент для точных спецификаций, но архитектура сложных систем, блок-схемы пользовательских путей (User Journey) и взаимосвязи микросервисов исторически рождаются на досках для скетчинга.

Здесь на сцену выходит концепция Drawgent — инновационный подход и класс инструментов, объединяющий возможности автономного кодинг-агента с интерактивным, живым холстом Excalidraw. Вместо того чтобы объяснять ИИ архитектуру в текстовом чате, вы рисуете квадраты, стрелки, базы данных и интерфейсы прямо на бесконечном холсте (который со временем начинает выглядеть как схема заговора из сериалов), а агент в реальном времени интерпретирует эти графические примитивы, превращая их в рабочий код.

В этой статье мы подробно разберем, как устроен этот визуально-ориентированный подход, какова архитектура подобных систем, с какими техническими вызовами сталкиваются разработчики и как настроить стабильное окружение для выполнения сгенерированного кода.

Архитектура системы: как Excalidraw встречается с LLM

Но как заставить машину «понять» ваш кривой прямоугольник, соединенный стрелкой с базой данных? Чтобы превратить набор линий на экране в работающее приложение, инженерам пришлось спроектировать многоуровневый конвейер трансляции смыслов в машинный код.

Ключевые слои архитектуры Drawgent

  • Интерфейсный слой (Frontend Layer): Модифицированный клиент Excalidraw, отслеживающий события добавления элементов, изменения текста внутри блоков и их соединения стрелками в реальном времени.
  • Слой трансляции и семантического анализа (Parser & AST Layer): Компонент, преобразующий внутренний JSON-формат Excalidraw в размеченный граф связей, который эффективно считывается Large Language Model.
  • Исполнительный слой (Execution & Agentic Layer): ИИ-агент (на базе паттернов ReAct или фреймворков вроде LangChain), получающий граф, генерирующий структуру файлов, исходный код и запускающий тесты.

Когда пользователь рисует на холсте блоки «Клиент» и «Сервер», соединенные стрелкой с подписью «REST API», система сериализует эти данные в понятный для модели JSON-контекст.

{  "elements": [    {      "id": "client_node",      "type": "rectangle",      "text": "React Frontend"    },    {      "id": "server_node",      "type": "rectangle",      "text": "FastAPI Backend"    }  ],  "bindings": [    {      "from": "client_node",      "to": "server_node",      "label": "REST API /users"    }  ]}

Технические вызовы интеграции ИИ и холста

Построить идеальный мост между человеческим визуальным творчеством и строгой логикой компилятора — задача со звездочкой. На практике разработчики неизбежно спотыкаются о вполне осязаемые архитектурные грабли (иногда по несколько раз на спринт).

  • Борьба с галлюцинациями структуры: Модели могут путать направления стрелок или неверно интерпретировать вложенность блоков. Для этого семантический парсер выполняет строгую валидацию графа перед отправкой в LLM.
  • Оптимизация контекстного окна: Бесконечный холст может содержать сотни элементов, не имеющих отношения к текущей задаче. Агент должен а