Привет! На связи Михаил Шпаков, руководитель разработки в Timeweb Cloud.
Мы создаём облако, в котором удобно запускать и управлять проектами: от простых ВДС до масштабных решений с Kubernetes и десятками интеграций. Мы много думаем о том, как сделать инфраструктуру не только стабильной, но и понятной.
Когда вы работаете в облаке, всё выглядит структурировано: список серверов, IP-адресов, баз данных, кластеров. Но в какой-то момент возникает вопрос: а как всё это связано между собой?
Что подключено к балансировщику? В какой сети находятся серверы? Почему не пингуется база? Ответы есть, но они спрятаны в разных разделах интерфейса или требуют обращения в поддержку.
Мы в Timeweb Cloud решили это изменить. Инфраструктура — это карта, а не таблица. Её нужно рисовать, а не запоминать.
Мы сделали визуальную карту, на которой можно не просто увидеть ресурсы, но и настроить их расположение как в реальной жизни: сгруппировать, пояснить, добавить связи и комментарии. Это не просто картинка — это инструмент, который помогает понимать, как всё устроено, и быстрее находить проблемы.
Это как перейти от чтения логов к полноценной карте: наглядно, понятно, живо. Визуализация стала тем самым недостающим элементом, который помогает по-настоящему понять, как устроена инфраструктура.
❯ Откуда всё началось
Идея визуализации инфраструктуры не появилась внезапно. На самом деле она лежала в бэклоге уже несколько лет — ещё с тех времён, когда мы только запускали VDS. Тогда это было совсем другое время, другой стек, другая команда, и облака как такового ещё не существовало.
Но уже тогда, в разговорах с пользователями, повторялись одни и те же вопросы:
— «А как понять, с чем связан этот сервер?»
— «Почему не работает соединение, если всё вроде бы настроено?»
Ответы были — интерфейс, документация, поддержка. Но каждый раз не хватало самого главного: наглядной картины происходящего.
Мы снова и снова видели, как сложно воспринимать инфраструктуру через таблицы и списки. Поэтому почти каждый админ или инженер в итоге делает схему — рисует её в draw.io, в Miro, в Google Docs, в Visio или ещё где-то. Это помогает понять, как устроена система, но создаёт новую проблему: такая схема живет отдельно от реальности.
Она быстро устаревает, её надо синхронизировать вручную, а при изменениях — вспоминать, где она вообще лежит. Идея встроенной визуализации инфраструктуры становилась всё очевиднее: не просто как удобная фича, а как полноценный способ управления сложной системой.
Когда инфраструктура растёт, её уже невозможно держать в голове — её нужно видеть и редактировать вживую, прямо там, где она работает.
Так мы и вернулись к той самой идее десятилетней давности — но уже с опытом, технологиями и пониманием, как реализовать её по-настоящему полезно.
❯ Что именно мы визуализировали
Мы привыкли двигаться итерациями: сначала — самое важное, что действительно помогает пользователю, потом — развитие на основе обратной связи.
Поэтому в первую версию визуализации мы сознательно включили только базовый, но реально полезный функционал. Не для галочки, не ради красоты — а чтобы уже на старте схема могла помочь разобраться в инфраструктуре, показать связи, упростить навигацию и ускорить диагностику.
На схеме отображаются все основные типы ресурсов в Timeweb Cloud: виртуальные и выделенные серверы, базы данных, бакеты S3, Kubernetes-кластеры и балансировщики.
Если ресурсы находятся в одной приватной сети — они автоматически группируются.
Если сервис подключён к балансировщику — мы автоматически строим связи, отображая реальные маршруты трафика.
Все остальные связи можно задать вручную — это удобно для отображения логики внутри проекта или внешних интеграций. Блоки можно соединять между собой в любом порядке, независимо от типа ресурса. Это позволяет, например, показать связи между базой и внешним API, или между сервисом и сторонней системой мониторинга.
Чтобы такие схемы были осмысленными и живыми, мы добавили:
произвольные блоки — для обозначения внешних систем;
текстовые комментарии — для пояснений прямо на схеме.
Каждый элемент содержит ключевую информацию: характеристики ресурса, регион, статус, а при наличии аварий или плановых работ — отображаются соответствующие плашки. Это делает схему не просто наглядной, а оперативно полезной.
В итоге пользователи могут собрать карту своей инфраструктуры: живую, интерактивную, с контекстом — и, главное, всегда актуальную.
❯ Как это работает под капотом
Под капотом визуализации — React Flow с нашими доработками. Мы переписали часть логики, чтобы схема не просто красиво отображалась, а работала стабильно и точно отражала инфраструктуру.
Мы сознательно не дублируем данные. На сервере храним только метаинформацию о схеме — позиции, связи, комментарии и структуру. Все данные о самих ресурсах (характеристики, регион, статус и т.д.) берутся из общего стора на фронте. Это исключает рассинхронизацию и упрощает обновление в реальном времени.
Когда пользователь вносит изменения, мы не отправляем каждый шаг сразу. Вместо этого используется дебаунс с задержкой 1–2 секунды, чтобы собрать серию правок в одно действие и отправить целостный патч. Это снижает нагрузку и делает работу редактора заметно плавнее.
При загрузке схемы мы проверяем, что все необходимые данные о ресурсах успешно подтянулись. Если какая-то часть не загрузилась и не удаётся решить это через ретраи — редактирование блокируется. Это защищает от конфликтов, неконсистентных состояний и ситуации, когда схема могла бы «разъехаться» из-за отсутствующих связей или метаданных.
Такой подход позволил сделать редактор живым, но при этом надёжным — с мгновенной реакцией и гарантией, что все изменения сохраняются корректно и в нужный момент.
❯ Что будет дальше
Визуализация уже помогает понять, как устроена инфраструктура. Следующий шаг — превратить её из карты в инструмент управления.
Мы добавим возможность создавать черновики схем — собирать инфраструктуру как конструктор, продумывать связи, зону ответственности, структуру. А затем — развернуть всё это в один клик, без переключения между разделами и ручного создания ресурсов.
Интеграция с TimewebGPT станет глубже. Уже сейчас в нашем облаке можно описать инфраструктуру текстом и получить готовый шаблон. В ближайшем будущем это описание можно будет сделать прямо на схеме — и модель соберёт структуру на лету, с размещением блоков, связей и групп.
Мы добавим новые типы элементов: псевдо-блоки для API, сторонних сервисов и даже физических серверов. Это поможет собирать схему, отражающую не только облако, но и весь проект целиком.
Появятся режимы отображения: где-то важны статусы и характеристики, где-то — только общая структура. Можно будет переключаться между уровнями детализации и настраивать видимость по-своему.
Мы хотим, чтобы визуализация стала точкой опоры: когда не нужно держать всё в голове, не нужно объяснять коллегам «на пальцах» и не нужно собирать инфраструктуру из скриншотов и устаревших диаграмм.
❯ Вместо вывода
Инфраструктура — это не просто список ресурсов. Это система, в которой всё связано, и где важны не только IP-адреса, но и то, как они взаимодействуют между собой, как выстроены связи, кто с чем работает, и что может пойти не так.
Мы сделали визуализацию не ради красоты, а потому что сами в неё поверили. Потому что сами постоянно рисовали схемы вручную в draw.io, и каждый раз думали: «почему нельзя просто открыть панель и увидеть всё как есть?»
Теперь можно.
Мы только в начале этого пути. Пока визуализация — новая часть интерфейса, и не все успели её попробовать. Но даже на старте видно: когда инфраструктуру можно увидеть целиком, работать с ней становится проще. Легче понять, как всё устроено. Проще объяснить коллегам, где что находится.
А дальше — будет ещё интереснее.
Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩
? Читайте также:
➤ Как я по вечерам разрабатывал Statuser — платформу для мониторинга доступности приложений
➤ Топ-100 нейросетей для генерации текста, кода, изображений, видео и аудио
➤ Веб-студии создавали сайты, но тут пришли нейросети. Как ИИ меняет правила игры
➤ Семантическое моделирование. Проектирование БД с помощью ER-модели
➤ Огромный гайд по настройке рабочего окружения: Linux, VScode, Python