Есть ли в проекте несвязанные элементы?
Найдите элементы без обнаруженных связей и узнайте, используются ли они.
TypeScript · React · Next.js · Анализ в браузере
Постройте интерактивный граф зависимостей TypeScript-проекта из GitHub
Откройте репозиторий GitHub, выберите ветку и папку с исходным кодом. Сервис построит интерактивный граф импортов между файлами TypeScript (.ts) и TSX (.tsx) прямо в браузере.
Быстрее разбирайтесь в структуре проекта, проверяйте связи модулей и оценивайте влияние изменений перед рефакторингом.
Публичные и приватные репозитории · Исходный код анализируется в браузере и не передаётся на сервер приложения
Для публичного репозитория вход в GitHub не требуется.
Без передачи кодаФайлы загружаются из GitHub непосредственно в браузер
Настраиваемый графПоказывайте только нужные части проекта
Анализ в браузереГраф строится локально, без отправки исходников на сервер приложения
Бесплатный доступБез подписки и платёжной карты
Зачем это нужно
Что показывает граф импортов и зависимостей TypeScript-проекта
В большом TypeScript-проекте трудно быстро понять, какие файлы, компоненты, типы и функции связаны друг с другом. Граф импортов показывает обнаруженные зависимости и помогает оценить, что может затронуть изменение модуля. Начните с одной папки, затем добавляйте на холст нужные элементы и связи.
Какие части проекта затронет изменение?
Посмотрите входящие и исходящие связи модуля до начала рефакторинга.
Откуда приходит зависимость?
Проследите цепочку импортов на графе и в списке связанных элементов.
После открытия проекта браузер построит карту импортов между файлами TypeScript (.ts) и TSX (.tsx). Выбирайте папки, слои и нужные элементы, скрывайте лишние связи и переходите между зависимостями. Слой объединяет элементы выбранной папки на графе. Так проще понять, откуда приходит импорт и какие части проекта используют выбранный компонент.
Как это работает
Как построить граф зависимостей GitHub-репозитория
- Откройте публичный GitHub-репозиторий по ссылке или войдите через GitHub, чтобы выбрать приватный.
- Выберите репозиторий, нужную ветку и корневую папку с TypeScript-кодом.
- Проверьте список исключений и загрузите исходники .ts и .tsx.
- Добавьте на граф нужные слои и элементы, затем изучайте импорты и места использования.
Шаг 1 / 8
Откройте репозиторий
Укажите ссылку на публичный репозиторий или подключите GitHub для доступа к приватному.
TypeScript · .ts/.tsx · анализ в браузере
Возможности
Возможности графа импортов TypeScript-проекта
Анализ публичных и приватных репозиториев
Публичный GitHub-репозиторий можно открыть без входа. Для выбора приватного потребуется авторизация через GitHub OAuth.
Выбор слоёв и источников
Настраивайте состав графа: слой показывает элементы выбранной папки, а источник — отдельный элемент, который вы добавили на холст.
Анализ в браузере
Исходные файлы загружаются из GitHub в браузер, где строится граф зависимостей. Код не передаётся на сервер приложения для анализа и не сохраняется в его базе данных.
Бесплатный доступ
Начните без подписки и платёжной карты. Доступность и лимиты запросов могут зависеть от ограничений GitHub API и типа репозитория.
Граф импортов
Просматривайте связи между файлами и элементами TypeScript-проекта, переходите по импортам и находите связанные части кода.
Поиск несвязанных источников
Находите файлы и элементы, для которых в выбранном коде не обнаружено импортов или связанных зависимостей.
Анализируемые исходники: TypeScript (.ts) и TSX (.tsx).
Какие файлы анализирует сервис
Сервис анализирует файлы TypeScript (.ts) и TSX (.tsx) внутри выбранной папки GitHub-репозитория. Инструмент подходит для проектов на React и Next.js, но работает и с другими кодовыми базами на TypeScript: он не требует конкретного фреймворка.
Файлы JavaScript (.js, .jsx), HTML (.html) и JSON (.json) сейчас не анализируются. Перед построением графа можно исключить папки со сборкой, зависимостями и сгенерированными файлами. Граф показывает обнаруженные статические связи в выбранных исходниках; отсутствие линии не означает, что файл или компонент нигде не используется.
Кому полезен граф импортов TypeScript-проекта
- Разработчику, который впервые открыл GitHub-репозиторий и хочет быстрее понять структуру TypeScript-кода.
- Команде перед рефакторингом, чтобы увидеть связанные модули и оценить влияние изменений.
- Участнику code review, чтобы проверить, как изменяемый компонент связан с соседними частями приложения.
- Техническому руководителю или архитектору, чтобы обсуждать структуру приложения на карте зависимостей, а не только по дереву файлов.
Безопасность
Как сервис работает с исходным кодом и доступом к GitHub
Публичный репозиторий можно открыть без авторизации. Чтобы выбрать приватный репозиторий, используется GitHub OAuth. Браузер получает выбранные исходники из GitHub и строит граф локально. Сервер приложения обменивает код авторизации на токен и не получает файлы проекта для анализа.
Граф и анализ импортов строятся в браузере
Исходные файлы не отправляются на сервер приложения и не сохраняются в базе данных
После перезагрузки страницы выбранные исходники удаляются из памяти вкладки
Перезагрузка страницы очищает загруженный граф и авторизацию
Для доступа к приватным репозиториям используется авторизация GitHub OAuth
Выбранные исходники загружаются из GitHub непосредственно в браузер пользователя
Проверка передачи данных
Как проверить, что исходный код не отправляется на сервер
- Откройте DevTools в браузере и перейдите на вкладку Network.
- Перезагрузите страницу и откройте инструмент анализа.
- Введите ссылку на публичный GitHub-репозиторий или войдите через GitHub для доступа к приватному.
- Выберите ветку, папку и загрузите исходники TypeScript.
- Проверьте адреса запросов: файлы загружаются с доменов GitHub, а сервер приложения используется для OAuth-авторизации и не получает содержимое исходников.
Вопросы и ответы
Частые вопросы о графе зависимостей
Что такое граф импортов и зависимостей TypeScript-проекта?
Это интерактивная карта обнаруженных статических связей между файлами, модулями и элементами выбранного TypeScript-кода. Она помогает увидеть, какие части проекта связаны между собой.
Нужно ли устанавливать программу для построения графа?
Нет. Инструмент работает в браузере: откройте страницу, укажите GitHub-репозиторий, выберите ветку и папку с файлами .ts или .tsx. Локальная установка не требуется.
Отправляется ли исходный код на сервер приложения?
Нет, исходные файлы не отправляются на сервер приложения для анализа. Браузер загружает выбранный код из GitHub и строит граф локально. Сервер участвует в OAuth-авторизации при работе с приватными репозиториями.
Как построить граф для приватного GitHub-репозитория?
Войдите через GitHub OAuth, выберите доступный вам приватный репозиторий, нужную ветку и папку с исходным кодом. Затем загрузите файлы TypeScript или TSX для построения графа.
Бесплатен ли анализ TypeScript-проекта?
Для начала работы не нужны подписка и платёжная карта. При работе с GitHub могут действовать ограничения API, связанные с типом доступа, лимитами запросов и настройками аккаунта.
Что произойдёт с графом после перезагрузки страницы?
Загруженный граф, выбранные элементы и токен авторизации очищаются из памяти вкладки. Чтобы повторить анализ, снова выберите репозиторий, ветку и папку с исходниками.
Какие файлы можно анализировать?
Сервис анализирует TypeScript-файлы .ts и TSX-файлы .tsx внутри выбранной папки репозитория. Файлы .js, .jsx, .html и .json сейчас не входят в анализ.
Как проверить, что код не сохраняется на сервере?
Откройте DevTools → Network и посмотрите, куда отправляются запросы после выбора репозитория. Исходные файлы загружаются из GitHub в браузер. Сервер приложения участвует в OAuth-авторизации, но не получает содержимое файлов проекта.
Как пользоваться
Как пользоваться графом зависимостей и настраивать холст
Можно ли сохранить настройки графа и восстановить их позже?
После загрузки проекта нажмите «Экспорт», чтобы скачать JSON-файл со слоями, источниками, видимостью и фильтрами. Для восстановления загрузите тот же репозиторий, ветку и корневую папку, нажмите «Импорт», выберите файл и подтвердите замену настроек. Исходный код в файл не входит.
Как добавить слой на граф зависимостей?
В левой панели откройте вкладку «Слои», нажмите «Выбрать папку», найдите папку и подтвердите кнопкой «Показать». Число рядом с путём показывает количество моделей. Значок глаза временно скрывает или возвращает слой, крестик убирает его с холста.
Как добавить файл или компонент на граф?
В левой панели откройте «Источники», нажмите «Выбрать компонент», найдите нужный элемент и нажмите «Показать». Выбранный элемент появится на холсте как отдельный источник; значок глаза управляет его видимостью.
Как фильтры помогают сузить граф импортов?
Чекбоксы над холстом показывают или скрывают источники, слои, файлы .tsx и .ts вместе с их связями; состояние значков глаза они не меняют. «Показать несвязанные источники» подсвечивает элементы без обнаруженных связей. При выборе компонента отдельные чекбоксы в сайдбаре фильтруют только список его зависимостей, не холст.
Как найти файл или компонент на графе?
Введите название или путь в поле «Найти компонент» над холстом. Совпадения подсветятся на графе, а остальные модели останутся на месте. Чтобы снять подсветку, очистите поле поиска.
Как добавлять слои, файлы и компоненты из боковой панели?
Выберите компонент на холсте или в списке слоя. В его карточке раскройте список папок: зелёный плюс добавляет папку в слои, красный минус убирает. Кнопка «Добавить в источники» включает выбранный компонент как источник, а «Убрать из источников» выключает. Рядом с зависимостями такие же плюс и минус управляют связанными компонентами.
Граф зависимостей TypeScript: как быстрее разобраться в архитектуре проекта
Граф зависимостей TypeScript-проекта помогает увидеть структуру приложения не только как список папок и файлов, но и как карту обнаруженных связей между модулями. Он показывает, какие файлы импортируют друг друга, какие части кода связаны с выбранным компонентом и где изменение одного модуля может повлиять на другие части проекта. Такой анализ полезен при изучении незнакомого GitHub-репозитория, подготовке рефакторинга и проверке архитектурных решений.
Сервис строит интерактивный граф импортов для файлов TypeScript .ts и TSX .tsx. Выберите репозиторий GitHub, ветку и папку с исходниками, затем добавляйте на холст нужные слои, элементы и связи. Можно скрывать лишнее, прослеживать цепочки импортов, находить связанные модули и замечать части выбранного кода, для которых не обнаружено зависимостей.
Инструмент подходит для React-, Next.js- и других проектов на TypeScript. Для анализа не требуется конкретный фреймворк: важны файлы с расширениями .ts и .tsx. Публичные репозитории можно исследовать без входа в GitHub, а для приватных используется авторизация GitHub OAuth. Исходные файлы загружаются из GitHub в браузер, где строится граф зависимостей.
Используйте граф импортов, чтобы быстрее понять устройство приложения, подготовиться к изменениям и обсудить структуру проекта с командой. Откройте TypeScript-проект из GitHub и начните исследование архитектуры прямо в браузере.
Постройте граф зависимостей своего TypeScript-проекта
Откройте GitHub-репозиторий, выберите папку с файлами .ts и .tsx и разберитесь в импортах, связанных модулях и структуре кода. Начните бесплатно — без подписки и без передачи исходников на сервер приложения.
Построить граф зависимостейДля анализа публичного GitHub-репозитория вход в аккаунт не требуется.