Кейс Flora
ИИ
Вайбовый
Flora — это инструмент визуализации сетевой топологии на основе графов для инфраструктуры центров обработки данных
Отрасль
ИИ · ИТ-инфраструктура
статус
Отправлен, в производстве
Подход
Визуализация данных, проектирование взаимодействия
Инструменты
Figma, Claude Code, React Flow, ELKjs
Год
2026
Дизайн-система
Дизайн-система IBM Carbon
О проекте
Flora — это инструмент от Foliage, который преобразует сырые данные об инфраструктуре центра обработки данных (физические серверы, сетевые соединения и их зависимости) в интерактивный граф, с который могут удобно работать SRE- и DevOps-инженеры. До появления Flora эти же сведения хранились в таблицах и текстовых массивах: с технической точки зрения полных, но практически нечитаемых как единая система. Вы могли видеть каждый сервер в отдельности, но не то, как они связаны друг с другом.
Другая сложность
Бриф
Инфраструктура крупного масштаба — это задача теории графов, а не списков. Инженеры мыслят не строками, а связями: от чего зависит этот сервер, что сломается при сбое этого коммутатора, чего на самом деле касается этот инцидент. Задача заключалась в том, чтобы разработать способ отображения этого графа, который оставался бы читаемым на реальном клиентском уровне — с сотнями узлов и их соединений, не превращаясь в нечитаемый визуальный шум.
Путь
Самым сложным решением на раннем этапе был выбор макета. Ручное размещение сотен узлов совершенно не подходило для масштабирования, а обычный граф с силовой раскладкой обычно превращается в запутанный «клубок ниток», который выглядит технологично, но ничего не сообщает. Я оценивал механизмы раскладки именно по этому критерию отказов и остановился на ELKjs, который позволил нам применить иерархическую, многоуровневую структуру, сохраняющую связанную инфраструктуру визуально сгруппированной, а не разбросанной по всему экрану.
[ИЗОБРАЖЕНИЕ: до/после или сравнение вариантов макета, если доступно]
Поверх этого макета я разработал модель взаимодействия, основанную на постепенном раскрытии информации, а не на демонстрации всего сразу. Инженер начинает с полной топологии — обзорного вида, не привязанного к какой-то конкретной части. Клик по узлу или кластеру раскрывает более подробные данные об этом элементе инфраструктуры без необходимости полностью переключать контекст на другой экран. Граф остается неизменным, а слои деталей плавно появляются и исчезают.
[ИЗОБРАЖЕНИЕ: детализация узла / состояние перехода на уровень ниже]
Файл Figma