Как создавать диаграммы и блок-схемы в draw.io

Draw.io, известный также как Diagrams.net, – бесплатный онлайн-редактор для создания диаграмм, блок-схем, архитектурных схем и карт процессов. Открывается прямо в браузере без регистрации и установки, поддерживает русский интерфейс и работает с большинством облачных хранилищ, включая Google Drive и OneDrive. 

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

Знакомство с интерфейсом

Перейдя по адресу сайта app.diagrams.net, вы сразу оказываетесь в редакторе с пустым холстом – вступительных экранов и обязательной регистрации нет. Интерфейс делится на три основные зоны.

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

• Центральная зона – рабочий холст, на котором строится диаграмма. Он бесконечен в обоих направлениях, поэтому схему любого размера можно разместить на нем без ограничений. Перемещение по холсту выполняется колесом мыши или зажатым пробелом с протаскиванием, масштаб регулируется через Ctrl + колесо мыши или кнопки в верхней панели.

• Правая панель меняется в зависимости от контекста. Если ничего не выделено, она показывает вкладки «Диаграмма» и «Стиль» с настройками самого холста: отображение сетки, цвет фона, параметры соединительных линий. При выделении фигуры или соединителя здесь появляются три вкладки – «Стиль», «Текст» и «Упорядочить» – с инструментами оформления конкретного элемента.

Сверху располагается главное меню: «Файл», «Правка», «Вид», «Упорядочить», «Дополнительно» и «Помощь». Под ним – панель инструментов с кнопками масштаба, отмены и повтора действий (Ctrl + Z и Ctrl + Y), удаления и другими часто используемыми командами.

Начало работы

При первом открытии редактора в строке меню появляется красная плашка «Изменения не сохранены. Нажмите здесь для сохранения.». Кликнув по ней, вы выбираете место хранения файла: локальный диск (формат .drawio), Google Drive, OneDrive, Dropbox или другое подключенное хранилище. После первого сохранения редактор включает автосохранение, а статус в шапке меняется на «Все изменения сохранены на диске».

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

Добавление фигур на холст

Базовый способ наполнения диаграммы – перетаскивание элементов из левой панели. Найдите нужную фигуру в одной из категорий, кликните на нее и, удерживая кнопку мыши, переместите на холст. 

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

Когда нужная фигура не очевидна, воспользуйтесь строкой «Введите / для поиска» в верхней части левой панели. Достаточно ввести несколько букв или ключевое слово – редактор подберет совпадения из всех подключенных библиотек. 

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

Стандартных библиотек может оказаться недостаточно для технических схем. В этом случае нажмите «+ Больше фигур» внизу левой панели – откроется диалоговое окно «Фигуры» со списком дополнительных наборов, разбитых по группам.

• В разделе «Стандартный» перечислены «Общие», «Базовые», «Стрелки», «Клипарт» и «Блок-схемы» – они включены по умолчанию, остальные можно добавить по необходимости.

• «Программное обеспечение» содержит библиотеки для Android, Bootstrap, C4, диаграмм потоков данных, схем отношений сущностей и других технических нотаций.

• Отдельные разделы охватывают инфраструктурные наборы: Kubernetes, VMware, GCP Icons, IBM Cloud, Network 2025 и другие.

• В «Бизнес» доступна, в частности, нотация ArchiMate 3.2 для описания корпоративной архитектуры.

Поставьте галочки напротив нужных библиотек и нажмите «Применить» – они появятся в левой панели и останутся там при следующем открытии редактора.

Соединение элементов

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

1. Наведите курсор на исходную фигуру и дождитесь появления синих стрелок по краям.

2. Кликните на одну из стрелок и, не отпуская кнопку мыши, протяните линию к целевой фигуре.

3. Когда целевой элемент подсветится, отпустите кнопку – соединение создано.

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

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

Редактирование текста

Чтобы добавить или изменить подпись внутри фигуры, дважды щелкните по ней – редактор перейдет в режим ввода. Верхняя панель инструментов при этом сменится: появятся поля выбора шрифта (по умолчанию Verdana), его размера, кнопки полужирного начертания, курсива, подчеркивания и выравнивания. Для выхода из режима редактирования нажмите Esc или кликните за пределами фигуры.

Правая панель на вкладке «Текст» дублирует и расширяет эти настройки. Здесь доступны регулировка межстрочного интервала, отдельные поля цвета шрифта и фона подписи, а также кнопка «Копировать стиль текста» – чтобы перенести оформление на другие элементы схемы, не настраивая каждый вручную.

Оформление фигур

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

• «Заливка» – цвет фона фигуры, рядом флажок «Градиент» для плавного перехода между двумя цветами.

• «Линия» – цвет, стиль (сплошная, пунктирная) и толщина обводки.

• «Непрозрачность» – степень прозрачности элемента от 0 до 100%.

Для точечного редактирования щелкните по фигуре правой кнопкой мыши и выберите «Редактировать стиль...». Откроется текстовая строка с набором параметров в формате, близком к CSS: там можно вручную изменить тип формы, скругление углов, тени и другие свойства. Кнопка «Копировать стиль» в нижней части панели позволяет скопировать оформление выбранного элемента, а «Установить как стиль по умолчанию» – сделать его базовым для всех новых фигур текущего сеанса.

Вкладка «Упорядочить» в правой панели отвечает за позиционирование: здесь задаются точные координаты, ширина и высота элемента. Те же операции доступны через меню «Упорядочить» в строке меню – там находятся инструменты выравнивания по горизонтали и вертикали, равномерного распределения объектов и группировки (Ctrl + G).

Работа со страницами

В одном файле .drawio можно разместить неограниченное количество страниц, каждая из которых хранит отдельную диаграмму. Переключение между ними выполняется через вкладки в нижней части редактора. Добавить страницу просто: нажмите «+» в левом нижнем углу – новая вкладка появится рядом с уже существующими. Чтобы переименовать страницу, дважды щелкните по ее вкладке и введите нужное название.

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

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

При работе с подключенным облачным хранилищем редактор сохраняет изменения автоматически – для этого должна быть включена галочка «Автосохранение» в правой панели на вкладке «Диаграмма». Для ручного сохранения или сохранения локальной копии используйте «Файл» – «Сохранить» (Ctrl + S).

Готовую диаграмму можно экспортировать в нескольких форматах через «Файл» – «Экспорт как».

• PNG – удобен для вставки в документы и презентации. В диалоговом окне настраиваются масштаб, разрешение в DPI и прозрачность фона. Опция «Прозрачный» убирает белый фон – полезно, когда схему вставляют поверх цветного слайда или страницы.
• PDF – подходит для финального документирования и печати. Можно задать масштаб, размер страницы и тему оформления.
• SVG – векторный формат без потери качества при масштабировании, оптимален для веб-публикаций.
• XML – нативный формат draw.io, сохраняющий полную структуру диаграммы. Файл можно заново открыть в редакторе и продолжить редактирование.
• Дополнительно доступны JPEG, WebP, HTML, JSON и прямая ссылка («URL-адрес») для просмотра схемы в браузере без скачивания.

При экспорте в SVG и PDF среди настроек присутствует опция «Вложить копию моей диаграммы» – она встраивает в файл исходный XML, что позволяет открыть его обратно в draw.io для редактирования без потери данных.

Для каких задач подходит draw.io

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

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

• Организационные структуры. Удобный инструмент для HR-менеджеров и руководителей проектов, которым нужно визуализировать иерархию команд или структуру подразделений. В стартовом диалоговом окне есть шаблон «Организационная диаграмма» – он задает нужную компоновку, после чего остается только заменить текст в блоках.

• Сетевые и инфраструктурные схемы. Системные администраторы и DevOps-инженеры документируют в draw.io серверную инфраструктуру, облачные среды и сетевые топологии. Специализированные библиотеки – Kubernetes, VMware, GCP Icons, Network 2025 – содержат готовые иконки сервисов и оборудования, поэтому рисовать что-либо вручную не нужно.

• UML-диаграммы. Разработчики используют draw.io для проектирования архитектуры приложений: диаграммы классов, последовательностей, компонентов и состояний. Библиотека UML доступна через «+ Больше фигур», а в стартовом наборе шаблонов предусмотрено несколько готовых структур под разные нотации.

Заключение

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