Обзор сервиса Draw.io для создания диаграмм и схем

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

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

Содержание

• Что такое Draw.io и как начать с ним работать
• Основные функции сервиса
• Примеры использования Draw.io

Что такое Draw.io и как начать с ним работать

Draw.io или Diagrams.net — это бесплатный инструмент для создания диаграмм. С его помощью можно рисовать блок-схемы, ментальные карты, организационные структуры и многое другое. У сервиса простой интерфейс и большая библиотека шаблонов. Пользоваться им можно прямо в браузере или через приложение для Windows, macOS и Linux.

Диаграммы можно экспортировать в PNG, SVG, PDF и другие форматы. Также их можно сохранять в Google Drive, OneDrive, Dropbox, GitHub или локально на устройстве. При этом ваша работа не привязана к одному облаку, как в случае с Google Drawings, где всё хранится в Google Drive.

Например, вы можете создать UML-диаграмму, сохранить её в формате XML на GitHub, а затем экспортировать в PNG с высоким разрешением для включения в документацию или презентацию перед руководством.

Чтобы начать работу, перейдите на drawio.com и нажмите кнопку Start. После этого придумайте имя файла и приступайте к работе: можно начать с нуля, выбрать один из шаблонов или загрузить собственный файл.

А если у вас проблемы с интернетом, то на сайте drawio.com вместо кнопки Start нажмите Download и пользуйтесь десктопной версией.

Читайте также:

Язык UML: что это такое и зачем он нужен

Основные функции сервиса

Когда вы откроете Draw.io в браузере или на своём компьютере, можно сразу приступать к работе — никаких подписок, регистраций или подтверждений не требуется. Давайте перейдём к обзору функций.

Работа с элементами. В левой части окна находится панель со стрелками, прямоугольниками, UML-блоками и другими фигурами. Их можно перетаскивать на холст и соединять между собой — для этого у каждого объекта по сторонам есть синие стрелки-наводки. А чтобы создать связь, вам нужно выделить родительский элемент, кликнуть на одну из стрелок и, удерживая левую кнопку мыши, провести курсор к нужному объекту.

Также при необходимости можно подключить собственные наборы элементов. Например, если вы разрабатываете мобильное приложение, можно добавить библиотеку с элементами интерфейса iOS или Android, чтобы создавать более точные схемы пользовательских экранов. Для этого выберите Файл → Открыть библиотеку из… и укажите источник.

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

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

Совместная работа. Это ещё одно отличие браузерной версии от десктопной. Вы можете редактировать диаграмму вместе с коллегами только в онлайн-режиме: для этого выберите Файл → Общий доступ и затем скопируйте ссылку на файл с расширением .drawio. Только не забудьте открыть доступ к самому файлу в Google Drive. После этого курсоры других пользователей будут отображаться в реальном времени.

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

Формулы. Draw.io поддерживает язык LaTeX для вставки математических выражений через плагин Math. Чтобы включить эту функцию, откройте меню Дополнительно и кликните на Математический набор. Также учтите, что для корректного отображения LaTeX-кода выражение нужно заключить между знаками «`» (клавиша «ё» в английской раскладке).

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

А вот во второй раз мы попросили сгенерировать схему изучения любого языка программирования и получили довольно неплохой результат. То есть в целом функция работает, но рассчитывать на неё мы не советуем.

Читайте также:

С какого языка начать изучение программирования

Примеры использования Draw.io

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

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

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

Организационная структура. С помощью такой схемы вы можете показать работу продуктовой команды в IT-компании, где дирекция задаёт стратегию, а дальше задачи делятся между блоками. Финансовый отдел отвечает за бюджеты и договоры, логистика — за инфраструктуру и серверы, коммерческий отдел — за продажи и клиентов и так далее.

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

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

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