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

Draw.io (также известный как Diagrams.net) — одна из самых мощных и бесплатных платформ для создания онлайн-диаграмм. Хотя многие используют её для базовых схем или архитектур ПО, немногие знают, что она также поддерживает анимацию соединителей, что отлично подходит для демонстрации потоков процессов, направлений данных или последовательностей в движении.

flow animation drawio
flow animation drawio

Что такое анимированные соединители в Draw.io?

Анимированные соединители в Draw.io позволяют отображать визуальный поток между формами. Это представлено как движущиеся пунктирные линии или точки, идущие от начального узла к конечному. Эта функция называется «Flow Animation» и доступна в панели стилей редактора.

Использование анимированных соединителей полезно для представления:

  • Потока данных между системами.

  • Сетевого трафика в технических архитектурах.

  • Последовательности процессов или шагов в системе.

  • Направления событий в потоках автоматизации.

Как включить анимацию соединителей в Draw.io

Ниже приведены пошаговые инструкции по активации анимации в ваших диаграммах:

1. Откройте свою диаграмму в Draw.io

Вы можете начать с нуля или открыть существующий файл в формате .drawio.

2. Выберите соединители для анимации

Щёлкните по каждому соединителю отдельно или выполните множественный выбор. Чтобы применить анимацию ко всем соединителям:

  • Щёлкните правой кнопкой в любом месте холста.

  • Выберите «Выбрать рёбра» (Select Edges), чтобы выделить все соединители.

drawio select edges
drawio select edges

3. Перейдите в панель стиля

С выделенными соединителями перейдите в правую панель редактора и откройте вкладку «Стиль» (Style).

select style
select style

4. Включите анимацию потока

В панели стилей найдите опцию «Анимация потока» (Flow Animation) и установите галочку. Вы сразу увидите, как соединители превращаются в движущиеся пунктирные линии.

Движение указывает направление потока — от начала к концу соединителя.

flow animation
flow animation

5. Настройте свойства анимации

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

  • Продолжительность потока (Flow Duration): Управляет скоростью движения.

  • Временной интервал потока (Flow Timing): Регулирует ритм анимации.

  • Направление потока (Flow Direction): Определяет направление движения (слева направо, сверху вниз и т.д.).

Эти параметры помогут адаптировать анимацию под разные визуальные сценарии.

flow property
flow property

Как экспортировать диаграмму с анимацией в формате SVG

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

Шаги для экспорта SVG с анимацией:

  1. Перейдите в меню Файл > Экспортировать как > SVG…

  2. В окне настроек убедитесь, что отмечена опция включения анимации (если доступна).

  3. Сохраните SVG-файл на своём устройстве.

Полученный файл можно встроить прямо на сайты, поддерживающие SVG, и он будет отображать анимацию соединителей.

export svg
export svg

Советы по оптимизации анимированных диаграмм

  • Современные браузеры, такие как Chrome, Firefox и Edge, поддерживают анимированные SVG без плагинов.

  • Используйте разные цвета и скорости для различия потоков.

  • Убедитесь, что анимации не ухудшают читаемость диаграммы.

  • Комбинируйте анимации с метками и легендами для лучшего понимания визуализации.

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

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

Хотите увидеть практические примеры анимированных диаграмм, готовых для вставки на ваш сайт или в документацию?