Draw.io — удобный онлайн-инструмент для визуализации алгоритмов и процессов. В сервис встроена большая библиотека шаблонов, один из которых вы можете взять за основу для своей схемы.

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

Когда вы впервые заходите на страницу сервиса, система предлагает вам выбрать хранилище для ваших проектов — Гугл Диск, OneDrive, GitHub, GitLab или локальный диск.

Выберите удобный вариант и, если вы выбрали внешний сервис, авторизуйтесь на нем, а затем нажмите кнопку «Создать новую диаграмму».

Базовый язык сервиса — английский. При желании вы можете перевести сервис на русский. Возможно, ваш браузер предложит вам выбор языков, либо вы можете самостоятельно изменить язык, кликнув правой кнопкой мыши.

Если вы решили хранить данные на компьютере, сразу нажимайте «Создать новую диаграмму».

Впишите название диаграммы, затем во вкладке «Базовые» выберите пустой шаблон, если хотите нарисовать схему с нуля, либо один из готовых дизайнов, отсортированных в библиотеке по видам.

Когда определитесь с внешним видом, нажмите кнопку «Создать» в правом нижнем углу.

Если вы решили сохранять проект на своем диске, то система откроем привычное окно для сохранения.

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

После этого вы попадете на основное рабочее поле, интерфейс которого простой и удобный. Он аналогичен любому графическому редактору.

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

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

В Draw.io ссылки можно добавлять на любые элементы алгоритма. Гиперссылки помогут вашим пользователям найти дополнительную информацию или углубиться в тему.

Чтобы сделать объект кликабельным, выделите его левой клавишей мыши, нажмите на «Плюс» на верхней панели инструментов и выберите пункт «Ссылка». Укажите URL-адрес и нажмите синюю кнопку «Добавить».

Также можно добавить ссылку на элемент из облачного хранилища.

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

Если у вас не выделен ни один объект, справа открывается окна «Диаграмма» где вы можете менять параметры всего документа – размер, ориентацию, расстраивать сетку, и «Стиль», где можно выбрать стилевое решение для всего документа.

Если кликните по объекту – откроется окно «Стиль» для его правки, кликните по текстовому блоку два раза – можно править сам текст в окне «Текст».

Окно «Расположение» позволяет работать с элементами на макете: менять порядок объектов на листе, их пропорции и т.д.

Когда вы закончите оформлять схему, зайдите в меню «Файл» и выберите пункт «Экспортировать как». Сервис предложит выбрать, в каком формате сохранить файл, или копировать URL-адрес — адресат сможет посмотреть вашу схему на сайте Draw.io.

Чтобы встроить алгоритм на сайт или блог, зайдите в меню «Файл» и выберите пункт «Встроить», а затем «IFrame».

Чтобы получить короткую ссылку на свою инструкцию, перейдите в меню «Файл» и выберите пункт «Опубликовать».

Обратите внимание на оранжевую кнопку в правом верхнем углу. Если вы сохранили файл на google-диске, вы можете работать над алгоритмом командой, открыв доступ пользователю или поделившись ссылкой.