Snap приложение недели: draw.io

Диаграммы нужны не только архитекторам: схема сети, поток данных в приложении, план домашнего сервера — всё это проще объяснить картинкой. draw.io (в десктопной версии — diagrams.net) позволяет рисовать такие схемы без подписки и без привязки к облаку.

Приложение хранит файлы локально, экспортирует в PNG, SVG и PDF, а формат исходника остаётся редактируемым. Для технической документации это важнее, чем красивые шаблоны: схему можно поправить через полгода и держать в git рядом с кодом.

Что это за инструмент

draw.io — редактор диаграмм с библиотекой фигур: блок-схемы, сетевые устройства, UML, электрические схемы, облачные сервисы. Интерфейс напоминает офисные редакторы: панель фигур слева, холст в центре, свойства справа. Работает офлайн и не требует аккаунта.

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

Установка

sudo snap install drawio
drawio

Альтернатива — AppImage или пакет .deb с официального сайта. Проверяйте источник загрузки: редактор диаграмм не должен требовать прав root для работы, а установка из случайного архива — плохая идея.

Первые шаги

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

drawio ~/docs/architecture.drawio

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

Схемы для документации

Сеть и инфраструктура

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

Потоки данных

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

Пошаговые инструкции

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

Форматы и экспорт

Исходник сохраняется в формате .drawio — это XML, который хорошо сжимается и нормально диффится в git. Для вставки в документацию используйте SVG: он масштабируется без потери качества и остаётся читаемым. Для презентаций подойдёт PNG с прозрачным фоном.

file diagram.drawio
head -c 200 diagram.drawio
inkscape diagram.svg --export-type=png

Проверяйте, что при экспорте не потерялись шрифты и подписи. Если схема уходит в другой редактор, лучше отдать SVG, а не растровый PNG.

Совместная работа и версии

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

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

Горячие клавиши

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

Ограничения

draw.io не заменяет CAD и не подходит для точных инженерных чертежей. Автоматическая раскладка ограничена, а большие схемы на сотни элементов становятся медленными. Для сложных случаев лучше комбинировать инструменты: диаграмму в draw.io, точные размеры — в специализированном редакторе.

Альтернативы

Excalidraw даёт «рукописный» стиль и удобен для быстрых набросков. Dia ближе к классическим редакторам схем. PlantUML и Mermaid позволяют описывать диаграммы текстом и держать их в репозитории без бинарных файлов. Если схема должна генерироваться из кода, смотрите в сторону Mermaid; если нужна ручная компоновка — draw.io.

Разрешения и доступ к файлам

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

flatpak info --show-permissions 2>/dev/null | head -20
# выдать доступ к папке (пример)
# flatpak override --user --filesystem=~/Documents app-id
# проверить применённые настройки
flatpak info --show-permissions 2>/dev/null | grep filesystem

Не давайте полный доступ ко всему диску без необходимости: это сводит на нет преимущества песочницы.

Первый запуск и настройка

После установки {app} проверьте базовые сценарии: открытие, сохранение, закрытие. Часть проблем решается сбросом настроек до заводских.

# каталоги настроек
ls -d ~/.config/*{app}* ~/.local/share/*{app}* 2>/dev/null
# запуск с выводом в терминал
{app} 2>&1 | head -30 &
# резервная копия настроек
cp -a ~/.config/APP ~/.config/APP.bak 2>/dev/null

Если приложение падает, сохраните вывод запуска — по нему проще найти причину, чем по косвенным признакам.

Альтернативы и совместимость

Если {app} не подходит, посмотрите на схожие инструменты: часто у них тот же функционал, но другой подход к интерфейсу и данным. Проверьте, поддерживается ли экспорт форматов.

# найти похожие приложения
flatpak search {app} 2>/dev/null | head -10
apt search {app} 2>/dev/null | head -10
# проверить форматы данных на диске
file ~/Documents/*.{dat,doc*} 2>/dev/null | head

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

Итог

draw.io — надёжный инструмент для технических схем: локальные файлы, открытый формат, понятный экспорт. Начните с одной небольшой диаграммы, сохраните исходник в проект и добавьте SVG в документацию. Такой подход даёт пользу сразу и не создаёт зависимости от конкретного облачного сервиса.