Как устроен проект?
Посмотрите дерево файлов, найденные страницы и связи между компонентами.
GitHub · JavaScript/TypeScript · Vue · Python (тест)
Постройте интерактивный граф зависимостей GitHub-проекта в браузере
Выберите репозиторий, ветку и папку. Механизм JavaScript/TypeScript анализирует файлы .js, .jsx, .ts и .tsx, а выбранные JSON, CSS/SCSS и HTML учитывает по статическим ссылкам. Механизм Vue анализирует .vue, JavaScript и TypeScript вместе со связанными файлами. Python-анализ файлов .py доступен в тестовом режиме.
Смотрите структуру проекта, сравнивайте виды и оценивайте влияние изменений по обнаруженным связям.
Публичные и приватные репозитории · Исходный код анализируется в браузере и не передаётся на сервер приложения
Для публичного репозитория вход в GitHub не требуется.
Без передачи кодаФайлы загружаются из GitHub непосредственно в браузер
Настраиваемый графПоказывайте только нужные части проекта
Анализ в браузереГраф строится локально, без отправки исходников на сервер приложения
Бесплатный доступБез подписки и платёжной карты
Зачем это нужно
Что показывает граф зависимостей GitHub-проекта
Граф отображает обнаруженные статические связи между файлами проекта. Выберите виды, чтобы изучить их зависимости, сравнить общие и различающиеся файлы или оценить, какие импортёры могут быть затронуты изменением.
Какие части проекта затронет изменение?
Посмотрите входящие и исходящие связи модуля до начала рефакторинга.
Откуда приходит зависимость?
Проследите цепочку импортов на графе и в списке связанных элементов.
Выберите механизм анализа: JavaScript/TypeScript, Vue или Python (тест). Граф строится по найденным статическим связям и выбранным файлам.
Как это работает
Как построить граф зависимостей GitHub-репозитория
- Откройте публичный GitHub-репозиторий по ссылке или войдите через GitHub, чтобы выбрать приватный.
- Выберите репозиторий, нужную ветку и корневую папку с кодом проекта.
- Выберите механизм анализа и загрузите его файлы: JS/TS, Vue или Python (тест).
- Добавьте виды, чтобы изучить зависимости и сравнить общие файлы.
Шаг 1 / 7
Откройте репозиторий
Укажите ссылку на публичный репозиторий или подключите GitHub для доступа к приватному.
GitHub · JavaScript/TypeScript · Vue · Python (тест) · анализ в браузере
Режимы и сравнение
Способы изучить архитектуру проекта
Обычный граф
В «Обычном графе» выбрали несколько видов и увидели обнаруженные статические связи между ними и связанными файлами. По графу удобно прослеживать, какие компоненты подключают общие части проекта, а затем сравнивать эти файлы. Так проще понять, какие участки кода стоит изучить перед изменением одного из модулей.
Структура страниц
В «Структуре страниц» предполагаемые страницы Page выделяются эвристически и располагаются вокруг остальных компонентов. Так видны возможные точки входа и их связи с проектом. При выборе страницы или компонента подсвечиваются обнаруженные связи; это помогает изучать код, но не заменяет разбор маршрутов приложения.
Дерево проекта
«Дерево проекта» показывает папки и компоненты в иерархии хранения, без линий зависимостей. В таком виде видно, как организованы каталоги и где лежит нужный файл. Режим удобен, когда нужно освоиться в структуре репозитория или найти компонент по расположению, а затем изучить его связи в другом режиме.
Влияние изменений
В «Влиянии изменений» выбранный компонент становится точкой отсчёта: граф показывает его прямых импортёров на первом уровне и следующие уровни обратных статических связей. Так можно оценить цепочки импортов и определить, какие компоненты проверить перед изменением. Результат основан на обнаруженных связях в коде и не описывает всё поведение приложения во время работы.
Рейтинг файлов
В «Рейтинге файлов» список сортируется по выбранному критерию: числу входящих или исходящих связей либо отсутствию обнаруженных связей. Так находят файлы, от которых зависят многие другие, и модули, подключающие много зависимостей; отдельно можно просмотреть узлы без связей. Большое число связей помогает заметить файловые узлы-хабы, но само по себе не говорит о сложности логики. Отсутствие связей проверяют по исходникам.
Сравнение пересечений компонент
Пересечения
«Пересечения» показывают общие файлы для каждой пары и каждой комбинации из двух и более видов; общий трём видам файл виден и в трёх парах.
Уникальные файлы
Показываются файлы, которые использует хотя бы один вид комбинации, но не все. В A+B+C остаются файлы одного или двух видов; общие всем трём исключаются.
Возможности
Возможности сервиса
Анализ публичных и приватных репозиториев
Публичный GitHub-репозиторий можно открыть без входа. Для выбора приватного потребуется авторизация через GitHub OAuth.
Архитектура выбранных видов
Выберите один или несколько компонентов как виды и исследуйте цепочки обнаруженных зависимостей, включая общие части проекта.
Анализ в браузере
Исходные файлы загружаются из GitHub в браузер, где строится граф зависимостей. Код не передаётся на сервер приложения для анализа и не сохраняется в его базе данных.
Бесплатный доступ
Начните без подписки и платёжной карты. Доступность и лимиты запросов могут зависеть от ограничений GitHub API и типа репозитория.
Связи файлов
Изучайте найденные статические связи в загруженных файлах и переходите к связанным частям кода.
Оценка связей
Изучайте импортёров, исходящие зависимости и компоненты без обнаруженных связей. Отсутствие связи не подтверждает, что файл не используется.
JavaScript/TypeScript: .js, .jsx, .ts, .tsx и выбранные JSON, CSS/SCSS, HTML · Vue: .vue, JS/TS и связанные файлы · Python: .py (тест).
Какие файлы анализирует сервис
Механизм JavaScript/TypeScript анализирует .js, .jsx, .ts и .tsx, а также выбранные JSON, CSS/SCSS и HTML. Механизм Vue анализирует .vue, JavaScript и TypeScript вместе с явно связанными файлами. Python-анализ файлов .py помечен в интерфейсе как тестовый.
Граф отражает обнаруженные статические связи в выбранных файлах. Можно исключить папки со сборкой, зависимостями и сгенерированными файлами. Отсутствие связи в графе само по себе не доказывает, что файл или компонент не используется.
Когда полезен граф зависимостей
- Разработчику, который изучает структуру GitHub-проекта и связи между его файлами.
- Команде перед рефакторингом, чтобы увидеть связанные модули и оценить влияние изменений.
- Участнику code review, чтобы проверить, как изменяемый компонент связан с соседними частями приложения.
- Техническому руководителю или архитектору, чтобы обсуждать структуру приложения на карте зависимостей, а не только по дереву файлов.
Безопасность
Как сервис работает с исходным кодом и доступом к GitHub
Публичный репозиторий можно открыть без авторизации. Чтобы выбрать приватный репозиторий, используется GitHub OAuth. Браузер получает выбранные исходники из GitHub и строит граф локально. Сервер приложения обменивает код авторизации на токен и не получает файлы проекта для анализа.
Граф и анализ импортов строятся в браузере
Исходные файлы не отправляются на сервер приложения и не сохраняются в базе данных
После перезагрузки страницы выбранные исходники удаляются из памяти вкладки
Перезагрузка страницы очищает загруженный граф и авторизацию
Для доступа к приватным репозиториям используется авторизация GitHub OAuth
Выбранные исходники загружаются из GitHub непосредственно в браузер пользователя
Проверка передачи данных
Как проверить, что исходный код не отправляется на сервер
- Откройте DevTools в браузере и перейдите на вкладку Network.
- Перезагрузите страницу и откройте инструмент анализа.
- Введите ссылку на публичный GitHub-репозиторий или войдите через GitHub для доступа к приватному.
- Выберите ветку и папку, затем механизм анализа и его файлы: JavaScript/TypeScript, Vue или Python (тест).
- Проверьте адреса запросов: файлы загружаются с доменов GitHub, а сервер приложения используется для OAuth-авторизации и не получает содержимое исходников.
Вопросы и ответы
Частые вопросы о графе зависимостей
Что показывает граф зависимостей GitHub-проекта?
Он показывает обнаруженные статические связи между файлами выбранного проекта. Граф помогает изучить зависимости и оценить, какие связанные части могут затронуть изменения.
Нужно ли устанавливать программу для построения графа?
Нет. Откройте GitHub-репозиторий в браузере, выберите ветку, папку и подходящий механизм анализа.
Отправляется ли исходный код на сервер приложения?
Нет, исходные файлы не отправляются на сервер приложения для анализа. Браузер загружает выбранный код из GitHub и строит граф локально. Сервер участвует в OAuth-авторизации при работе с приватными репозиториями.
Как построить граф для приватного GitHub-репозитория?
Войдите через GitHub OAuth, выберите доступный вам приватный репозиторий, ветку и папку, затем укажите механизм анализа.
Бесплатен ли анализ проекта?
Для начала работы не нужны подписка и платёжная карта. При работе с GitHub могут действовать ограничения API, связанные с типом доступа, лимитами запросов и настройками аккаунта.
Что произойдёт с графом после перезагрузки страницы?
Загруженный граф, выбранные элементы и токен авторизации очищаются из памяти вкладки. Чтобы повторить анализ, снова выберите репозиторий, ветку и папку с исходниками.
Какие файлы анализируют доступные механизмы?
JavaScript/TypeScript анализирует .js, .jsx, .ts и .tsx, а также выбранные JSON, CSS/SCSS и HTML. Механизм Vue анализирует .vue, JavaScript и TypeScript вместе с явно связанными файлами. Python-анализ файлов .py доступен в тестовом режиме. Во всех случаях граф отражает обнаруженные статические связи.
Какие режимы и вкладки сравнения доступны?
Есть обычный граф выбранных видов, структура страниц, дерево проекта, влияние изменений и рейтинг файлов. Во вкладке «Пересечения» показаны общие файлы для комбинаций из двух и более видов. «Уникальные файлы» — это файлы, используемые хотя бы одним, но не всеми видами конкретной комбинации; для трёх видов файл, общий двум, остаётся в этой группе.
Доказывает ли отсутствие связей, что файл не используется?
Нет. Граф показывает только найденные статические связи, поэтому файл без связей может использоваться способом, который не попал в анализ. Проверяйте такие выводы по исходному коду.
Как проверить, что код не сохраняется на сервере?
Откройте DevTools → Network и посмотрите, куда отправляются запросы после выбора репозитория. Исходные файлы загружаются из GitHub в браузер. Сервер приложения участвует в OAuth-авторизации, но не получает содержимое файлов проекта.
Как пользоваться
Как пользоваться графом зависимостей и настраивать холст
Можно ли сохранить настройки графа и восстановить их позже?
После загрузки проекта нажмите «Экспорт», чтобы скачать JSON-файл с выбранными видами, видимостью и фильтрами. Для восстановления загрузите тот же репозиторий, ветку и корневую папку, нажмите «Импорт», выберите файл и подтвердите замену настроек. Исходный код в файл не входит.
Как выбрать вид для анализа?
В боковой панели выберите компонент и добавьте его в виды. Граф покажет его зависимости и папки, участвующие в архитектуре. Добавьте другие виды, чтобы сравнить их и увидеть общие компоненты.
Как добавить компонент в виды?
В боковой панели выберите компонент и добавьте его в виды. Граф покажет цепочку его зависимостей и нужные папки. Добавьте ещё один вид, чтобы сравнить архитектуру и увидеть общие компоненты.
Как фильтры помогают сузить граф импортов?
Фильтры над холстом показывают или скрывают файлы выбранных расширений и их связи. При выборе компонента остальные узлы остаются на месте, а его непосредственные связи выделяются. Поиск помогает быстро найти файл или элемент на схеме.
Как найти файл или компонент на графе?
Введите название или путь в поле «Найти компонент» над холстом. Совпадения подсветятся на графе, а остальные модели останутся на месте. Чтобы снять подсветку, очистите поле поиска.
Как добавить несколько видов?
Выберите в боковой панели компонент и добавьте его в виды. Повторите это для других точек входа: каждая архитектура появится отдельной строкой, а общие компоненты и связи помогут сравнить их.
Как изучить GitHub-проект: граф зависимостей
Откройте GitHub-репозиторий, выберите ветку, папку и механизм анализа. JavaScript/TypeScript обрабатывает .js, .jsx, .ts и .tsx, а выбранные JSON, CSS/SCSS и HTML учитывает по обнаруженным статическим ссылкам. Механизм Vue работает с .vue, JavaScript и TypeScript, а также явно связанными файлами. Python-анализ .py доступен в тестовом режиме.
Выберите виды, чтобы изучить их связи в обычном графе, структуре страниц или режиме влияния изменений. Дерево проекта показывает расположение компонентов без связей, а рейтинг файлов сортирует по импортёрам, зависимостям или отсутствию обнаруженных связей.
При сравнении нескольких видов вкладка «Пересечения» показывает их общие файлы для комбинаций от двух видов. Вкладка «Уникальные файлы» показывает файлы, использующиеся частью каждой комбинации. Например, при выборе трёх страниц файлы, общие двум из них, останутся в тройной группе уникальных.
Граф отражает обнаруженные статические связи. Отсутствие линии не доказывает, что файл не используется; при оценке изменений проверяйте результаты по исходному коду.
Постройте граф зависимостей GitHub-проекта
Выберите механизм JavaScript/TypeScript, Vue или Python (тест), затем изучайте обнаруженные связи, сравнивайте виды и оценивайте влияние изменений. Анализ выполняется в браузере.
Построить граф зависимостейДля анализа публичного GitHub-репозитория вход в аккаунт не требуется.