Библиотека визуализации графов: как мы решили дилемму Canvas vs HTML в Gravity UI

07.08.2025 07:00:50 | Хабр

Хабы: Блог компании Яндекс, Блог компании Yandex Cloud & Yandex Infrastructure, Интерфейсы, Визуализация данных, Open source

Меня зовут Андрей, я разработчик интерфейсов в команде User Experience инфраструктурных сервисов Яндекса. Мы развиваем Gravity UI — опенсорсную дизайн‑систему и библиотеку React‑компонентов, которую используют десятки продуктов внутри компании и за её пределами. Сегодня расскажу, как мы столкнулись с задачей визуализации сложных графов, почему существующие решения нас не устроили, и как в итоге появилась @gravity‑ui/graph — библиотека, которую мы решили сделать открытой для сообщества.

Эта история началась с практической проблемы: нам нужно было рендерить графы на 10 000+ элементов с интерактивными компонентами. В Яндексе много проектов, где пользователи создают сложные пайплайны обработки данных — от простых ETL‑процессов до машинного обучения. Когда такие пайплайны создаются программно, количество блоков может достигать десятков тысяч.

Существующие решения нас не устраивали:

— HTML/SVG‑библиотеки красиво выглядят и удобны в разработке, но начинают тормозить уже на сотнях элементов.

— Canvas‑решения справляются с производительностью, но требуют огромного количества кода для создания сложных UI‑элементов.

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

Подробнее