Коротко
Чтобы нарисовать блок-схему онлайн в Morfa, нажмите «Новая доска» и в меню «+» выберите шаблон «Блок-схема» из группы «Нарисовать схему» — или начните с пустой доски. Блоки — это 20 фигур с текстом: R ставит квадрат, O — эллипс, условия рисуют «Ромбом». Стрелки — «Соединитель» (X), он держится за блоки, когда их двигают.
Схему правят вместе с командой и комментируют, а «Экспорт доски» (⇧⌘E) сохраняет её в PNG или PDF. Доска — обычный файл: на плане «Бесплатный» она входит в лимит 10 файлов.
Что такое блок-схема
Блок-схема — это схема алгоритма или процесса, где каждый шаг — фигура, а порядок шагов — стрелки между ними. Развилки, повторы и тупики на ней видны сразу, а в тексте теряются.
Блок-схемы рисуют для учебных задач по информатике, для бизнес-процессов (заявка, согласование, доставка заказа), для сценариев поддержки и для пути человека по экранам приложения. Последний случай подробно разобран в статье user flow.
Условные обозначения блок-схемы: какие фигуры брать
У каждого блока свой смысл. Названия «Терминатор», «Процесс», «Решение», «Данные» и «Подготовка» взяты из ГОСТ 19.701-90: по нему оформляют схемы алгоритмов в учебных работах и программной документации. В правой колонке — фигура из набора «Доски», которая подходит для блока.
| Блок | Что обозначает | Фигура на «Доске» |
|---|---|---|
| Терминатор | Начало и конец алгоритма | «Скруглённый квадрат» или «Эллипс» (O) |
| Процесс | Действие или вычисление | «Квадрат» (R), растянутый в прямоугольник |
| Решение | Условие с выходами «да» и «нет» | «Ромб» |
| Данные | Ввод или вывод данных | «Параллелограмм» |
| Подготовка | Начальные значения, заголовок цикла | «Шестиугольник» |
| Документ | Бумажный документ или отчёт | «Документ» |
| База данных | Где хранятся данные | «Цилиндр (база данных)» |
| Переход | Продолжение схемы в другом месте | Маленький «Эллипс» с буквой или цифрой |
Всего фигур 20: кроме перечисленных, есть «Треугольник», «Треугольник вниз», «Параллелограмм влево», «Трапеция», «Пятиугольник», «Восьмиугольник», «Звезда», «Плюс», «Стрелка вправо», «Стрелка влево», «Шеврон» и «Реплика». Если нужного блока в наборе нет, например «Граница цикла», возьмите близкую фигуру и подпишите её.
Как нарисовать блок-схему онлайн по шагам
Блок-схема в Morfa живёт на «Доске» — втором типе файла рядом с файлами дизайна. Устанавливать ничего не нужно: доска открывается в браузере.
Создайте доску
В файловом менеджере нажмите «Новая доска».
Вставьте шаблон
Нажмите «+» на панели инструментов, в группе «Нарисовать схему» выберите «Блок-схема». Появится готовый пример: «Начало» → «Пользователь открывает сайт» → ромб «Есть аккаунт?» с ветками «Да» и «Нет» → «Вход» или «Регистрация» → «Личный кабинет» → «Конец». Замените тексты на шаги своего процесса.
Добавьте блоки
R ставит квадрат, O — эллипс. Ромб, параллелограмм и остальные фигуры — в панели «Фигуры и соединители». Протяните мышью, чтобы задать размер, или просто щёлкните: появится фигура 200×200, и в неё сразу можно печатать.
Проведите стрелки
Наведите курсор на блок: вокруг него появятся четыре точки. Потяните точку к следующему блоку — получится соединитель. Щелчок по точке добавит копию блока с этой стороны, уже связанную стрелкой.
Подпишите ветки
Дважды щёлкните по соединителю и напишите «Да» или «Нет». Так же меняют текст в блоке: двойной щелчок по фигуре.
Разделите на этапы
Обведите блоки одного этапа или отдела секцией (⇧S) и дайте ей название. Кнопка «Подогнать по содержимому» подожмёт рамку секции к блокам.
Сохраните схему
Нажмите ⇧⌘E: откроется «Экспорт доски». Выберите PNG или PDF.
Стрелки: прямые, с изгибами и изогнутые
«Соединитель» (X) держится за блоки: двигаете блок — стрелка идёт за ним, и схему не нужно перерисовывать. Конец стрелки цепляется к середине стороны блока или к стороне, которая смотрит на другой блок. Чтобы перевесить стрелку, выделите её и перетащите конец на другой блок.
Вид стрелки меняют на панели над выделенным соединителем:
«Вид линии»
«Прямой», «С изгибами» (по умолчанию) или «Изогнутый». Для блок-схем чаще всего берут линии с изгибами под прямым углом.
«Стрелки»
«Без стрелок», «Стрелка на конце» или «Стрелки с обеих сторон».
«Толщина и пунктир»
«Тонкая», «Средняя» или «Толстая» линия и «Пунктир» — например, для необязательного шага.
«Цвет линии»
Цвет из палитры доски: например, красным выделяют ветку ошибки.
- R
- Фигура «Квадрат»
- O
- Фигура «Эллипс»
- X
- Соединитель
- ⇧L
- Прямой соединитель
- L
- Линия
- T
- Текст
- ⇧S
- Секция
- C
- Комментарий
Клавиши привязаны к физическим кнопкам, поэтому работают и на русской раскладке. Остальные клавиши доски собраны в списке горячих клавиш.
Как оформить блоки
Над выделенной фигурой тоже есть панель. В ней «Фигура» меняет вид блока без перерисовки: квадрат превращается в ромб, а стрелки остаются на месте. Там же «Заливка», «Обводка», «Размер текста» (от «Маленький» до «Очень крупный»), «Жирный», «Рукописный шрифт» и выравнивание текста.
Если текст не помещается, фигура сама вырастет. Держите один цвет на один тип блока, как в шаблоне: действия голубые, условия жёлтые, начало зелёное, конец красный. Тогда схему можно прочитать, даже не вчитываясь в текст.
Блок-схема вместе с командой
Доску правят несколько человек одновременно: курсоры и выделения соавторов видны их цветами, а щелчок по аватару включает «Следить». Вопрос к блоку оставляют комментарием (C): ответить и отметить обсуждение решённым можно прямо на доске. Как устроены роли и доступ, рассказано на странице о совместной работе.
Схему процесса удобно обсуждать на созвоне: в меню «Реакции и встреча» есть «Таймер» и «Голосование…». Остальные возможности доски собраны на странице онлайн-доски.
Экспорт блок-схемы в PNG и PDF
В окне «Экспорт доски» (⇧⌘E) выбирают, что сохранить, в каком формате и в каком качестве. Для отчёта или курсовой берите PNG в качестве 2×: так схема останется чёткой при печати.
| Настройка | Варианты |
|---|---|
| «Что» | «Всю доску» или «Выделенное» |
| «Формат» | PNG или PDF |
| «Качество» | 1× или 2× |
| «Прозрачный фон» | Только для PNG; без галочки фон белый |
PDF доски — одна страница с картинкой. Текст в таком файле не выделяется и не ищется. Если доска очень большая, масштаб уменьшится сам, чтобы браузер смог сохранить файл.
Что важно знать заранее
Доска — обычный файл плана: на плане «Бесплатный» она входит в лимит 10 файлов вместе с файлами дизайна. Отдельно за доски платить не нужно.
- Схема не раскладывается автоматически: блоки ставите вы, а ровняете клавишами выравнивания и секциями.
- Пропорции блоков по ГОСТ редактор не проверяет.
- Импорта схем из других редакторов нет: схему собирают заново, удобнее всего из шаблона «Блок-схема».
- Кликабельных переходов на доске нет. Если нужно пройти путь по экранам кликами, свяжите фреймы в прототип.
Шаблон «Блок-схема» стоит в группе «Нарисовать схему» рядом с «5 почему». Для пути клиента по этапам есть шаблон «Карта пути клиента» — о нём статья карта пути клиента, а все десять шаблонов перечислены на странице шаблонов.