Благодаря множеству готовых фигур и шаблонов Draw.io становится универсальным инструментом для визуализации различных процессов и структур. 

Преимущества онлайн ресурса Draw.io: больше сотни шаблонов. Можно менять фигуры, стрелки, цвет текста и цвет фона. И даже добавлять математические формулы и картинки. Ещё один большой плюс – создание работ полностью бесплатное. Еще у Draw.io много других полезных функций:

• работает без регистрации;
• позволяет сохранять файлы на Google Диск, OneDrive или в память компьютера;
• позволяет обмениваться картами с сотрудниками легко и быстро – можно встраивать их в Google Docs, HTML, Notion;
• может настроить интеграции с Jira, GitHub, Dropbox и другими;
• бесплатный доступ и интеграция с Google Drive позволяют легко сохранять и делиться картами с учениками, что удобно для дистанционного обучения;
• позволяет скачивать файлы в различных форматах: PNG, SVG, PDF, XML и др.

Порядок выполнения работы 

1. Переходим на сайт https://www.drawio.com/ (рис. 1).

Рисунок 1 – Стартовая страница сервиса Draw.io

2. Создаем новую диаграмму. Для этого нажимаем кнопку «Это устройство» и затем «Создать новую диаграмму».

3. Указываем имя файла и расширение с «.drawio» «.png» (рис. 2).

Рисунок 2 – Выбор расширения файла

4. Затем выбираем вид диаграммы «Пустую диаграмму» и начинаем разработку с чистого листа. После того, как мы выбрали вид разработки нажимаем на кнопку «Создать» (рис. 3).

Рисунок 3 – Выбор вида диаграммы

5. Изменяем фон рабочего места, переходя в раздел «Диаграмма» в пункте Фон, нажимая галочку возле кнопки «Цвет фона», с помощью пипетки «Изменить» выбираем нужный цвет.

6. Можно убрать сетку в разработке. Для этого вверху слева находим раздел «Вид» и убираем галочку возле кнопки «Сетка», также это можно сделать с помощью сочетания клавиш «Ctrl+Shift+G». 

7. В разделе «Общие» ® «Фигуры» выбираем нужную фигуру. Помимо «Общих» в ресурсе существует еще достаточно много различных фигур, которые можно использовать для разработок: «Прочее», «Расширенные», «Базовые», «Стрелки», «Блок-схемы», «Отношение сущностей» и «UML».

8. Далее выбираем подходящие геометрические фигуры и расставляем их в нужной последовательности (рис. 4). В разделе «Стиль» делаем нужную заливку для фигур. Там же можно добавить контур фигуры, нажав на кнопку «Линия» и с помощью пипетки поменять цвет контура, подходящий под цвет заливки фигуры, а также выбрать размер контура, добавить тень и т.д. 

Рисунок 4 – Добавление и редактирование
фигур на рабочую область 

9. Переходим к тексту в фигурах. Для написания текста нужно выделить фигуру и осуществить ввод текста. В разделе «Текст» есть возможность форматирования текста: цвет, размер шрифта, направление текста, вид шрифта и т.д. (рис. 5). 

Рисунок 5 – Форматирование текста

10. Также есть возможность добавления графических объектов. Для этого нажимаем на «+», который находится в верхней панели, и там выбираем «Изображение» с помощью команды «Открыть» выбираем нужные картинки, по необходимости меняем их размер и другие параметры (рис. 6). 

Рисунок 6 – Добавление изображений на рабочую область 

11. Для сохранения работы выполняем команду «Файл» и нажимаем кнопку «Сохранить», либо же с помощью комбинации клавиш «Ctrl+S».