Блок-схема в draw.io для онлайн-курса: от условий к проверенным маршрутам

Когда в объяснении появляется несколько «если», длинный абзац становится трудно использовать как инструкцию. Блок-схема помогает показать действие после каждого условия. Для автора важно сначала проверить саму процедуру, а затем выбирать расположение фигур. Рассмотрим учебный процесс проверки иллюстрации перед публикацией: пример полностью условный, его требования не являются общими правилами для любых изображений.

Запишите процедуру обычными словами

В нашем упражнении иллюстрация должна иметь ширину не менее 1280 пикселей и содержательную подпись. Если ширина меньше, редактор запрашивает исходник и пока не передаёт материал дальше. Если ширина подходит, но подписи нет, он добавляет её и передаёт материал. Если оба требования выполнены, передача происходит сразу. Число 1280 выбрано как условие конкретного упражнения.

Здесь есть два завершения: «Ожидаем исходник» и «Передано дальше». Не объединяйте их подписью «Готово»: состояния означают разные действия команды. Такая схема описывает порядок выполнения процедуры. Она отличается от концептуальной карты, где связи показывают отношения между понятиями, и от плана последовательности уроков. Сначала убедитесь, что читателю действительно нужна процедура с условиями.

Создайте фигуры в редакторе

Откройте draw.io, создайте пустую диаграмму и выберите место сохранения. В официальном руководстве по базовой блок-схеме показаны добавление фигур и соединение их линиями. Для нашего учебного рисунка используем прямоугольники для действий, ромбы для вопросов и отдельные фигуры начала и завершений. Это выбранная система обозначений; кратко объясните её рядом со схемой.

Разместите начало «Получена иллюстрация», затем условие «Ширина не менее 1280 px?». Ниже подготовьте проверку «Есть подпись?». Действия назовите глаголами: «Запросить исходник», «Добавить подпись», «Передать дальше». Не помещайте в одну фигуру сразу вопрос и несколько действий. Если название не помещается, сначала сократите формулировку без потери условия, а не уменьшайте шрифт до нечитаемого размера.

Соедините ветви и подпишите решения

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

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

Пройдите контрольные случаи

Проверьте схему как исполняемую инструкцию, двигаясь по стрелкам от начала:

• Изображение шириной 900 пикселей с подписью: запрос исходника, затем ожидание.

• Изображение шириной 1600 пикселей без подписи: добавить подпись, затем передать.

• Изображение шириной ровно 1280 пикселей с подписью: передать сразу.

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

Сохраните исходник и экспорт

Сохраните редактируемую версию через File → Save As в формате .drawio. Порядок выбора места и формата описан в документации о сохранении диаграмм. Не рассчитывайте на открытую вкладку как на единственное хранилище. После сохранения откройте файл заново и проверьте, что фигуры доступны для изменения.

Для размещения в уроке экспортируйте изображение через File → Export As → PNG. В инструкции по экспорту PNG разобраны масштаб и включение копии диаграммы. Если исходник предназначен только редакции, проверьте, нужно ли включать его данные в публичную картинку. Отдельный файл .drawio всё равно сохраните: он пригодится для обновления условий и названий.

Проверьте схему внутри урока

Загрузите выбранное изображение в материал Umhub и оцените его при обычной ширине страницы. Подписи «Да» и «Нет» должны читаться без постоянного увеличения. Добавьте текстовое описание маршрутов, чтобы смысл не зависел только от картинки; ориентиры для такой работы есть в статье об альтернативном тексте изображений. Для сложной схемы короткой подписи обычно недостаточно, нужен связный текст рядом.

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