Excalidraw — рисуем схемы и архитектуру проекта от руки

Скажем, ты хочешь добавить в свою Змейку таблицу рекордов, авторизацию через Google и магазин скинов. В голове крутится картинка: игрок нажимает кнопку «Войти», данные улетают в базу, оттуда приходит список лучших результатов, а за покупку скина отвечает отдельный экран с корзиной. Объяснить всё это текстом ИИ можно, но промпт превращается в длинный список «а потом, а потом, а если». Гораздо проще нарисовать схему: квадратики экранов, стрелочки данных, облачко для базы. Такую картинку можно вставить в промпт, сохранить в документацию проекта или просто держать перед глазами, пока Claude Code пишет код.

Excalidraw — бесплатный open-source инструмент для рисования схем в стиле «от руки». Ниже — чем он отличается от доски Miro AI, зачем он вайбкодеру, как помогает при составлении технического задания для ИИ и как экспортировать результат в README или промпт.

Что такое Excalidraw простыми словами

Excalidraw — это виртуальная доска с маркером. Открываешь сайт в браузере, выбираешь инструмент — прямоугольник, стрелку, текст или карандаш — и рисуешь. Линии получаются немного кривоватые, тексты — как будто написаны от руки, а общий вид похож на быстрый набросок в блокноте, а не на строгий корпоративный слайд.

Основные идеи:

• Работает прямо в браузере, без установки программы. Достаточно открыть сайт excalidraw.com.
• Не требует регистрации. Можно начать рисовать сразу.
• Все фигуры рисуются в стиле «hand-drawn» — рукописном, неформальном. Это снижает барьер: не обязательно рисовать идеально, схема всё равно выглядит аккуратно и понятно.
• Есть базовые элементы: прямоугольники, овалы, ромбы, стрелки, линии, текст, карандаш, ластик.
• Можно создавать и подключать библиотеки готовых фигур: иконки, UML-элементы, компоненты интерфейса, логотипы сервисов.
• Поддерживает совместное редактирование в реальном времени по ссылке.
• Сохраняет результат в файл .excalidraw или экспортирует в PNG и SVG.

Excalidraw создан не для красивых презентаций для инвесторов, а для быстрых поясняющих схем. Блок-схема алгоритма, архитектура приложения, пользовательский путь по экранам, набросок интерфейса, mind map для разбора задачи — всё это можно сделать за несколько минут, не уходя в сложные инструменты вроде Figma или Draw.io.

Почему именно «от руки»

Важная фишка Excalidraw — рукописный стиль. С точки зрения человеческого восприятия такие схемы выглядят не как «окончательный вариант, который нельзя менять», а как черновик, который можно обсуждать. Это особенно полезно при работе с ИИ: когда схема выглядит неофициально, проще вносить правки, уточнять детали и не бояться, что «всё уже утверждено».

Есть и практический эффект: идеально ровные стрелки и выровненные блоки требуют времени. В Excalidraw фигуры автоматически получают лёгкий «дрожжание» линий, поэтому даже быстрый набросок выглядит завершённым. Это экономит время и не отвлекает от содержания.

Excalidraw и Miro AI: в чём разница

В курсе мы уже разбирали Miro AI — командную онлайн-доску с шаблонами, стикерами и ИИ-помощником для планирования проектов. Оба инструмента позволяют рисовать схемы, но подходят для разных задач.

Miro — это пространство для командной работы: ретроспективы, планирование спринтов, мозговые штурмы, диаграммы пользовательских путей, таблицы, встроенные шаблоны для бизнес-моделей. Там много функций: комментарии, тайминги, голосования, интеграции с Google Docs, Jira, Slack. Miro удобен, когда нужно обсуждать проект с командой или вести проектную документацию.

Excalidraw — это «доска и маркер» для одного или пары человек. Минимум интерфейса, нет сложных шаблонов, нет проектного менеджмента. Ты просто рисуешь схему. Поэтому Excalidraw быстрее запускается, быстрее работает и не отвлекает лишними панелями.

Если тебе нужно распланировать квартал с командой — бери Miro. Если нужно за пять минут нарисовать, как данные идут от кнопки до базы, — бери Excalidraw. Оба инструмента могут сосуществовать в рабочем процессе: Miro для обсуждения стратегии, Excalidraw для конкретных технических схем.

Зачем вайбкодеру рисовать схемы

Вайбкодинг — это когда ты описываешь задачу обычными словами, а ИИ пишет код. Звучит просто, но на практике главная сложность не в том, чтобы заставить ИИ напечатать код, а в том, чтобы точно передать замысел. Особенно когда проект растёт: появляются несколько экранов, роли пользователей, интеграции с внешними сервисами, состояние приложения.

Проблема текстовых описаний в том, что человеку кажется, что он всё объяснил, а ИИ понимает только ту часть, которая выражена словами. Многие вещи остаются «на грани»: где именно хранится состояние, в каком порядке загружаются данные, что происходит при ошибке. Схема решает эту проблему визуально.

Что можно нарисовать перед тем, как писать промпт

• Экраны приложения и связи между ними. Например: «Экран игры» → «Экран паузы» → «Экран рекордов».
• Поток данных: пользователь нажимает кнопку → фронтенд отправляет запрос → бэкенд проверяет авторизацию → база данных сохраняет результат → фронтенд показывает сообщение.
• Состояние приложения: какие переменные есть в памяти, что пишется в localStorage, что хранится в облаке.
• Архитектура: какие модули или файлы нужны, кто за что отвечает.
• Пользовательский сценарий: шаги от входа до целевого действия.
• Набросок интерфейса: расположение кнопок, полей, меню.

Когда такая схема есть, промпт становится короче и точнее. Вместо того чтобы пытаться описать всё словами, ты пишешь: «Сделай вот по этой схеме. Экраны: A, B, C. Поток данных: ...». Или даёшь текстовое описание элементов схемы прямо в промпт.

Пример простой схемы для Змейки с таблицей рекордов:

[Экран игры]
    ↓ (игра закончилась)
[Модальное окно "Игра окончена"]
    ↓ (нажал "Сохранить рекорд")
[Проверка: рекорд входит в топ-10?]
    ↓ да                            ↓ нет
[Запрос к Supabase]              [Показать текущий топ-10]
    ↓
[Обновить таблицу лидеров]
    ↓
[Показать обновлённый топ-10]

Такое описание можно либо нарисовать в Excalidraw и приложить скриншотом, либо передать текстом. Самое главное — структура становится видна с первого взгляда.

Как схема экономит время

Когда схемы нет, ИИ может угадать архитектуру не так, как задумано. Например, вместо того чтобы хранить рекорд локально, он начнёт писать сложную серверную часть. Или наоборот — сделает всё через localStorage, хотя тебе нужна общая таблица на Supabase. Каждая такая ошибка требует уточнений, переделок и новых промптов.

Схема работает как договорённость: ты и ИИ смотрите на одну и ту же картинку. Это особенно важно, когда задача сложная: несколько экранов, роли пользователей, интеграция с внешними сервисами. В таких случаях визуальная схема экономит часы на объяснения.

Excalidraw при составлении технического задания для ИИ

В курсе есть отдельная статья про то, как составить техническое задание для разработчика или ИИ. Там мы говорили, что хорошее ТЗ состоит из цели, контекста, функциональных требований, ограничений и критериев приёмки. Схема из Excalidraw может стать одной из ключевых частей такого задания.

Куда вставлять схему

1. В начало промпта, чтобы ИИ сразу понял общую картинку. Например: «Я хочу добавить в Змейку магазин скинов. Вот схема экранов и потока данных: [вставить схему]».
2. В раздел «Контекст» технического задания, если ты ведёшь документацию проекта.
3. В README репозитория, чтобы другие разработчики или ты сам через месяц могли быстро вспомнить архитектуру.
4. В чек-лист приёмки: схема показывает, какие пути должны работать.

Как описать схему текстом, если скриншот не вставляется

Не все ИИ-инструменты умеют «видеть» картинки. Claude Code в некоторых режимах работает с текстом, и тогда схему приходится описывать словами. Но даже текстовое описание структуры из Excalidraw намного понятнее, чем сплошной абзац.

Хороший формат — список элементов и связей:

Схема: магазин скинов в Змейке.

Элементы:
- Экран "Игра": кнопка "Магазин".
- Экран "Магазин": список скинов, у каждого — цена в монетах и кнопка "Купить".
- Модальное окно "Подтверждение": показывает баланс, цену и кнопки "Купить" / "Отмена".
- Состояние приложения: balance (число монет), ownedSkins (массив id), currentSkin (id).
- localStorage: ключ snake-game-skins, хранит balance, ownedSkins, currentSkin.

Потоки:
1. Игрок нажимает "Магазин" → открывается экран магазина.
2. Игрок выбирает скин → открывается подтверждение.
3. Если balance >= price: уменьшаем balance, добавляем skinId в ownedSkins, сохраняем в localStorage.
4. Если balance < price: показываем сообщение "Недостаточно монет".
5. Игрок нажимает "Назад" → возвращаемся на экран игры.

Этот текст можно либо дать ИИ вместо картинки, либо приложить к картинке как пояснение. Чем конкретнее структура, тем меньше догадок делает ИИ.

Схема как референс

Ещё один полезный приём — использовать схему как référence, к которой можно возвращаться. Например, после первого промпта схема ложится в папку проекта как docs/schema-magazin.png. При следующих доработках ты пишешь: «Добавь функцию возврата скина. Смотри схему в docs/schema-magazin.png, раздел "Потоки"». Так проект не разрастается хаотично, а остаётся связанным с общей картинкой.

Что можно рисовать в Excalidraw

Excalidraw подходит для многих задач на разных этапах проекта. Вот самые полезные типы схем для вайбкодера.

Блок-схемы алгоритмов

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

Пример: блок-схема проверки авторизации в игре.

[Игрок нажимает "Войти"]
    ↓
{Есть сохранённый токен?}
    ↓ да                            ↓ нет
[Загрузить профиль]              [Открыть окно входа]
    ↓                                ↓
[Показать главный экран]         [Игрок вводит данные]
                                      ↓
                                   [Отправить запрос]
                                      ↓
                                   {Ответ успешный?}
                                      ↓ да
                                   [Сохранить токен]
                                      ↓
                                   [Показать главный экран]

Архитектурные диаграммы

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

Пример элементов архитектурной схемы:

• Прямоугольник — файл или модуль.
• Облачко — внешний сервис (Supabase, Stripe, Google OAuth).
• Цилиндр — база данных.
• Стрелка — направление данных.
• Текст — формат данных или название функции.

Пользовательские сценарии

Путь пользователя от входа до цели. Например: «Открывает приложение → видит экран приветствия → нажимает "Новая игра" → играет → проигрывает → видит рекорд → делится результатом». Такая схема помогает понять, какие экраны нужны и в каком порядке они появляются.

Наброски интерфейса

Excalidraw не заменяет полноценный дизайн в Figma, но отлично подходит для быстрых wireframe — схематичных макетов, где важно расположение элементов, а не точные цвета и шрифты. Можно нарисовать, где будет кнопка, где счёт, где меню, а потом отдать ИИ как референс для вёрстки.

Mind maps и разбор задачи

Когда задача большая и непонятно, с чего начать, помогает mind map: центральная тема в середине, ветки — подзадачи. Например, тема «Магазин скинов для Змейки», ветки: «Интерфейс», «Хранение данных», «Баланс монет», «Список скинов», «Тестирование».

Временные шкалы и планы

Excalidraw удобен для простых timeline: какие фичи делать сначала, какие потом. Это полезно, если ты планируешь развитие проекта в несколько этапов.

Библиотеки фигур и совместная работа

У Excalidraw есть две особенности, которые сильно расширяют возможности: библиотеки готовых элементов и совместное редактирование.

Библиотеки фигур

Помимо базовых фигур, в Excalidraw можно подключать библиотеки — наборы готовых элементов, нарисованных другими пользователями. Это ускоряет работу: не нужно каждый раз рисовать иконку базы данных или логотип сервиса.

Примеры полезных библиотек для вайбкодера:

• Логотипы облачных сервисов: Supabase, Vercel, AWS, Google Cloud, GitHub.
• UML-элементы: классы, интерфейсы, связи.
• Иконки интерфейса: кнопки, поля ввода, чекбоксы, карточки.
• Элементы инфраструктуры: серверы, базы данных, очереди, шлюзы.
• Стрелки и соединители разных видов.

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

Совместное редактирование

Excalidraw позволяет работать над одной схемой вдвоём или втроём в реальном времени. Для этого достаточно нажать кнопку совместной работы и скопировать ссылку. Другой человек открывает ссылку в браузере и видит тот же холст.

Это полезно, когда:

• ты обсуждаешь архитектуру с ментором или напарником;
• разбираешь задачу в паре перед тем, как писать промпт;
• показываешь ИИ не только текст, но и визуальную схему в процессе созвона.

Совместное редактирование в Excalidraw проще, чем в Miro: не нужно приглашать по email, настраивать права доступа или создавать рабочее пространство. Просто ссылка — и можно рисовать.

Экспорт результата

Нарисовал схему — что с ней делать дальше? Excalidraw предлагает несколько вариантов.

Файл .excalidraw

Основной формат — файл с расширением .excalidraw. Это JSON-файл, в котором сохранены все фигуры, их координаты, тексты и стили. Его можно:

• хранить в папке проекта, например docs/architecture.excalidraw;
• открывать позже для редактирования на том же сайте;
• передавать коллегам;
• версионировать через Git, если проект уже на GitHub.

Файл .excalidraw удобен, потому что сохраняет возможность править схему. Но для вставки в README или промпт его придётся преобразовать в картинку.

PNG

PNG — растровое изображение. Хорошо подходит для:

• вставки в README проекта на GitHub;
• прикрепления к задаче в трекере;
• отправки в мессенджере;
• вставки в документ или презентацию.

При экспорте в PNG можно выбрать, экспортировать весь холст или только выделенную область, а также задать фон: прозрачный, белый или цветной.

SVG

SVG — векторное изображение. Подходит для:

• вставки в веб-страницы и документацию;
• случаев, когда схема должна оставаться чёткой при любом масштабе;
• дальнейшего редактирования в векторных редакторах.

SVG из Excalidraw сохраняет рукописный стиль, но при этом масштабируется без потери качества.

Ссылка

Если схема создана в режиме совместной работы, можно скопировать публичную ссылку. По ней другие люди увидят схему в режиме просмотра или редактирования. Это удобно для быстрой демонстрации, но не стоит полагаться на такую ссылку как на долговременное хранилище: лучше всегда держать локальную копию в .excalidraw.

Пример: рисуем схему для новой фичи Змейки

Конкретный пример: нужно добавить в Змейку авторизацию и общую таблицу рекордов через Supabase. Сначала рисуем схему в Excalidraw, а потом используем её в промпте.

Шаг 1. Определяем элементы

• Экран игры.
• Кнопка «Войти через Google».
• Процесс авторизации в Supabase Auth.
• Таблица рекордов в Supabase.
• Экран таблицы рекордов.
• Локальное состояние приложения: текущий пользователь, его рекорд.

Шаг 2. Рисуем схему

На холсте Excalidraw размещаем:

• Прямоугольник «Экран игры» с кнопками «Играть» и «Войти».
• Стрелку от кнопки «Войти» к облачку «Supabase Auth».
• Стрелку от облачка обратно к экрану игры с пометкой «токен + имя пользователя».
• Прямоугольник «Экран рекордов».
• Цилиндр «Таблица records в Supabase».
• Стрелки: игра окончилась → сохранить счёт в таблицу → обновить экран рекордов.

Шаг 3. Описываем текстом

После рисования у нас есть наглядная схема. Теперь можно составить к ней текстовое описание для промпта:

Задача: добавить в Змейку авторизацию через Google и таблицу рекордов на Supabase.

Схема:
1. На экране игры появляется кнопка "Войти через Google".
2. При нажатии открывается OAuth-авторизация Supabase.
3. После успешного входа приложение получает пользователя (id, email, имя) и сохраняет сессию.
4. Когда игра заканчивается, если пользователь авторизован, его счёт отправляется в таблицу records.
5. Таблица records содержит: user_id, score, created_at.
6. На отдельном экране "Рекорды" показывается топ-10 лучших результатов из таблицы.
7. Если пользователь не авторизован, его рекорд сохраняется только локально, а кнопка "Рекорды" предлагает войти.

Ограничения:
- Не добавляй сложную регистрацию по паролю, только Google OAuth.
- Храни сессию в памяти приложения, персистентность через localStorage опционально.
- Экран рекордов должен обновляться при каждом открытии.

Шаг 4. Даём ИИ и схему, и текст

В Claude Code можно вставить текстовое описание и, если поддерживается, приложить экспортированную PNG-схему. Даже если ИИ не видит картинку, текстовое описание структуры уже даёт ему чёткую модель. А для тебя самого схема остаётся референсом на весь этап разработки.

Когда Excalidraw избыточен

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

Когда схема не нужна

• Проект состоит из одного экрана и простой логики. Например, базовая Змейка с движением, едой и подсчётом очков.
• Фича решается одним-двумя предложениями. Например: «Добавь звук при поедании еды».
• Ты только экспериментируешь и не знаешь, что именно хочешь получить. В этом случае быстрее поговорить с ИИ словами.

Когда схема точно поможет

• В проекте несколько экранов и нужно понять, как между ними переходить.
• Есть роли пользователей: гость, авторизованный пользователь, администратор.
• Подключаются внешние сервисы: платежи, авторизация, база данных, аналитика.
• Нужно объяснить ИИ архитектуру файлов и модулей.
• Задача связана с потоком данных: что откуда берётся, куда сохраняется.
• Ты работаешь над фичей в несколько итераций и хочешь не потерять общую картинку.

Правило большого пальца: если при объяснении задачи ты начинаешь говорить «сначала это, потом это, а если вот это, то вот это» — пора рисовать схему. Если фича укладывается в одно предложение — схема лишняя.

Как начать работу с Excalidraw

Интерфейс Excalidraw интуитивный, но полезно знать несколько базовых приёмов.

Первый запуск

1. Открой в браузере сайт excalidraw.com.
2. Нажми «New drawing» или просто начни рисовать на пустом холсте.
3. Слева выбираются инструменты: выделение, прямоугольник, ромб, овал, стрелка, линия, карандаш, текст, ластик.
4. Нажми на фигуру, а потом кликни на холст, чтобы нарисовать её.
5. Двойной клик по холсту создаёт текст.

Горячие клавиши

• 1 — выделение.
• 2 — прямоугольник.
• 3 — ромб.
• 4 — овал.
• 5 — стрелка.
• 6 — линия.
• 7 — карандаш.
• 8 — текст.
• 9 — ластик.
• Cmd/Ctrl + Z — отмена.
• Cmd/Ctrl + Shift + Z — повтор.
• Cmd/Ctrl + G — сгруппировать выделенные элементы.
• Delete — удалить выделенные элементы.

Работа со стрелками

Стрелки в Excalidraw прилипают к краям фигур. Это удобно для блок-схем: если ты подвинешь прямоугольник, стрелка останется прикреплённой. Чтобы нарисовать стрелку от одной фигуры к другой, выбери инструмент стрелки, проведи от края первой фигуры к краю второй.

Стили и цвета

В верхней панели можно менять:

• цвет линии и заливки;
• толщину линии;
• уровень «рукописности»;
• прозрачность;
• шрифт текста.

Для схем обычно достаточно двух-трёх цветов: чёрный для основных элементов, синий или зелёный для выделения, красный для ошибок и граничных случаев.

Слои и группировка

Если схема сложная, используй группировку: выдели несколько элементов и нажми Cmd/Ctrl + G. Группу можно двигать как единое целое. Слои позволяют отправлять элементы назад или вперёд, чтобы стрелки не перекрывали текст.

Сохранение

По умолчанию Excalidraw хранит рисунок в локальном хранилище браузера. Но лучше не полагаться на это и сохранять файл вручную: Menu → Save to disk или Cmd/Ctrl + S. Полученный файл .excalidraw можно положить в папку проекта.

Советы по визуальному мышлению для вайбкодера

Рисование схем — это не только про инструмент, но и про способ мышления. Несколько практик, которые помогают делать схемы полезными.

Начинай с простого

Не пытайся нарисовать всё сразу. Сначала главные блоки: экраны или модули. Потом добавляй связи. Потом — детали. Если схема становится слишком большой, разбей её на несколько: «Архитектура», «Поток данных», «Экраны».

Используй единые обозначения

Договорись с самим собой, что означают фигуры. Например:

• Прямоугольник — экран или модуль.
• Ромб — условие или решение.
• Овал — начало или конец процесса.
• Цилиндр — база данных или хранилище.
• Облачко — внешний сервис.
• Стрелка — направление данных или действия.

Когда обозначения постоянны, схемы становятся читаемыми без дополнительных пояснений.

Делай подписи короткими

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

Выделяй главное

Не все элементы равны. Главный поток должен читаться с первого взгляда. Второстепенные ветки можно сделать меньше, светлее или расположить в стороне. Цвет помогает: один цвет для успешного пути, другой — для ошибок.

Не гонись за красотой

Цель схемы — передать мысль. Не трать время на выравнивание пикселей. Excalidraw специально сделан так, чтобы неровности выглядели естественно. Закончи схему, сохрани, переходи к коду.

Частые вопросы

Нужно ли уметь рисовать, чтобы пользоваться Excalidraw?

Нет. Excalidraw рисует за тебя: ты выбираешь фигуру, а инструмент делает рукописные линии автоматически. Достаточно уметь кликать мышью и писать короткий текст. Если можно нарисовать квадратик и стрелочку в блокноте, значит, хватит навыков и для Excalidraw.

Excalidraw бесплатный?

Да, основная версия Excalidraw на сайте excalidraw.com полностью бесплатна и имеет открытый исходный код. Можно рисовать, сохранять файлы, экспортировать в PNG/SVG, работать совместно по ссылке. Существует также Excalidraw+ — платная версия с личными аккаунтами, облачным хранилищем и расширенными возможностями совместной работы. Для большинства задач вайбкодера бесплатной версии достаточно.

Можно ли использовать Excalidraw на мобильном телефоне?

Технически сайт открывается и на телефоне, но Excalidraw заточен под работу с мышью или тачпадом. На маленьком экране рисовать схемы неудобно: пальцем сложно попасть в мелкие элементы и выровнять стрелки. Для серьёзной работы лучше использовать компьютер или планшет со стилусом.

Как вставить схему Excalidraw в промпт к Claude Code?

Есть два способа. Первый — экспортировать схему в PNG или SVG и приложить картинкой, если ИИ поддерживает визуальный ввод. Второй — описать схему текстом: перечислить элементы и связи между ними. Для Claude Code часто работает текстовый вариант, поэтому полезно иметь под схемой краткое текстовое описание. Третий способ — сохранить файл .excalidraw в папку проекта и ссылаться на него: «Смотри схему в docs/architecture.excalidraw».

В чём главное отличие Excalidraw от Miro?

Miro — это большая командная доска с шаблонами, стикерами, ИИ-функциями и интеграциями для планирования проектов. Excalidraw — минималистичный инструмент для быстрых схем и диаграмм в стиле «от руки». Miro лучше для совместной работы командой, Excalidraw — для личных технических набросков и быстрых пояснений ИИ.

Сохраняется ли работа в Excalidraw автоматически?

Excalidraw сохраняет текущий рисунок в локальном хранилище браузера, поэтому если случайно закроешь вкладку, схема скорее всего останется. Но полагаться только на это не стоит. Лучше сохранять файл вручную через меню или горячую клавишу. Особенно важно сохранить файл .excalidraw перед тем, как чистить кеш браузера или открывать схему на другом устройстве.

Заключение + чек-лист

Excalidraw — это инструмент для быстрых поясняющих схем, которые помогают вайбкодеру думать структурно и точнее передавать задачи ИИ. Он не заменяет полноценный дизайн в Figma и не конкурирует с командными досками вроде Miro AI. Его сила — в скорости и простоте: открыл браузер, нарисовал схему, экспортировал в PNG для README или описал текстом для промпта.

Когда проект растёт, схема становится не просто картинкой, а инструментом мышления. Она помогает увидеть связи между экранами, понять, где хранится состояние, и не потеряться в деталях. А для ИИ такая схема — дополнительный контекст, который снижает количество догадок и переделок.

Чек-лист «Нарисовал схему — можно кодить»

• Понятна ли цель схемы: архитектура, поток данных, экраны или пользовательский путь?
• Все ли ключевые элементы обозначены: экраны, модули, базы данных, внешние сервисы?
• Понятны ли связи между элементами и направление данных?
• Используются ли единые обозначения для одинаковых типов объектов?
• Подписи короткие и читаемые?
• Главный путь выделен, второстепенные ветки не мешают?
• Схема сохранена в файле .excalidraw в папке проекта?
• Экспортирована копия в PNG или SVG для README или промпта?
• Есть текстовое описание элементов и связей для случаев, когда ИИ не видит картинку?
• Схема проверена на адекватность: не слишком ли много деталей для текущей задачи?
• Если схема большая, разбита ли она на несколько маленьких?
• Ссылка на схему или файл добавлена в документацию проекта, если он ведётся?

Если на большинство пунктов ответ «да» — схема готова. Можно переходить к промпту, кодировать фичу и проверять результат. А если чувствуешь, что задача запутывается, открой Excalidraw ещё раз: иногда пять минут с маркером экономят час объяснений.