Há elementos sem conexões?
Encontre elementos sem relações detectadas e confira se são usados.
GitHub · JavaScript/TypeScript · Vue · Python (modo de teste)
Crie um grafo interativo de dependências para seu projeto do GitHub no navegador
Escolha um repositório, uma branch e uma pasta. JavaScript/TypeScript analisa .js, .jsx, .ts e .tsx; os arquivos JSON, CSS/SCSS e HTML selecionados são adicionados por referências estáticas detectadas. Vue analisa .vue, JavaScript e TypeScript junto com arquivos vinculados. Python analisa .py em modo de teste.
Entenda mais rápido a estrutura do projeto, examine as relações entre módulos e avalie o impacto das mudanças antes de refatorar.
Repositórios públicos e privados · O código é analisado no navegador e não é enviado ao servidor da aplicação
Repositórios públicos não exigem login no GitHub.
Sem enviar códigoArquivos são carregados do GitHub diretamente no navegador
Grafo ajustávelMostre apenas as partes necessárias do projeto
Análise no navegadorO grafo é criado localmente, sem enviar arquivos ao servidor
Acesso gratuitoSem assinatura ou cartão de pagamento
Para que serve
O que mostra um grafo de dependências de um projeto
O grafo mostra as conexões estáticas detectadas entre os arquivos do projeto. Escolha visualizações para explorar as dependências, comparar arquivos compartilhados e distintos ou avaliar quais importadores uma mudança pode afetar.
Que partes uma mudança afetará?
Examine as conexões de entrada e saída de um módulo antes de refatorar.
De onde vem uma dependência?
Acompanhe a cadeia de importações no grafo e na lista de elementos relacionados.
Escolha um analisador: JavaScript/TypeScript, Vue ou Python (modo de teste). JavaScript/TypeScript analisa .js, .jsx, .ts e .tsx; os arquivos JSON, CSS/SCSS e HTML selecionados são adicionados por referências estáticas detectadas. Vue analisa .vue, JavaScript e TypeScript junto com arquivos vinculados. Python analisa .py em modo de teste.
Como funciona
Como criar um grafo de dependências de um repositório GitHub
- Abra um repositório público pelo link ou entre com o GitHub para escolher um privado.
- Escolha o repositório, a branch e a pasta raiz do projeto.
- Escolha o analisador e carregue seus arquivos: JS/TS, Vue ou Python (.py, modo de teste).
- Escolha uma visualização para acompanhar sua cadeia de dependências. Adicione outras para comparar a arquitetura e encontrar elementos compartilhados.
Etapa 1 / 7
Abra um repositório
Informe a URL de um repositório público ou conecte o GitHub para acessar um privado.
JavaScript/TypeScript · Vue · Python (modo de teste) · análise no navegador
Modos e comparações
Formas de explorar a arquitetura do projeto
Gráfico padrão
O gráfico padrão exibe as visualizações selecionadas e as conexões estáticas encontradas entre elas e outros arquivos. Ao acompanhar vários componentes, fica mais fácil identificar arquivos compartilhados e compará-los. Isso ajuda a entender o caminho das dependências e a decidir quais módulos revisar antes de uma alteração.
Estrutura de páginas
A estrutura de páginas detecta heuristicamente os componentes Page e as exportações padrão de arquivos page.js, page.jsx, page.ts e page.tsx. Esses itens ficam ao redor dos demais componentes, destacando possíveis pontos de entrada e suas conexões estáticas com o projeto. Ao selecionar um, as conexões detectadas são destacadas; as rotas reais da aplicação não são reconstruídas.
Árvore do projeto
A árvore do projeto organiza pastas e componentes pela hierarquia em que estão armazenados, sem linhas de dependência. Assim fica mais fácil entender como os arquivos estão distribuídos e encontrar um componente pela pasta antes de examinar suas conexões em outra visualização.
Impacto das alterações
O impacto das alterações parte do componente selecionado e mostra seus importadores no sentido inverso: os diretos no primeiro nível e os seguintes nos próximos níveis. Isso ajuda a avaliar quais componentes revisar antes de alterar um arquivo. A visualização se baseia nas conexões estáticas detectadas e não descreve todo o comportamento da aplicação em execução.
Classificação de arquivos
A classificação de arquivos ordena pelo critério escolhido: quantidade de conexões de entrada, de saída ou ausência de conexões detectadas. Ajuda a localizar arquivos dos quais muitos outros dependem, módulos que importam muitas dependências e, separadamente, nós sem conexões. Muitas conexões não medem a complexidade do código; a ausência delas deve ser conferida nos arquivos-fonte.
Comparar arquivos compartilhados e únicos
Interseções
As interseções mostram os arquivos compartilhados em cada par e nas combinações maiores. Arquivos comuns a três visualizações também aparecem nos três grupos de pares.
Arquivos únicos
Cada combinação mostra arquivos usados por pelo menos uma visualização, mas não por todas. Em A+B+C ficam os de uma ou duas; os comuns às três são excluídos.
Recursos
O que você pode fazer com um grafo de dependências de projetos
Repositórios públicos e privados
Abra um repositório público sem login. Para acessar um privado, use o GitHub OAuth.
Arquitetura das visualizações
Escolha um ou mais componentes como visualizações e acompanhe as cadeias de dependências, incluindo partes compartilhadas do projeto.
Análise no navegador
Os arquivos vêm do GitHub para o navegador, onde o grafo é criado. Eles não são enviados ao servidor para análise nem salvos no banco de dados.
Acesso gratuito
Comece sem assinatura ou cartão. Podem valer limites da API do GitHub e regras de acesso ao repositório.
Conexões entre arquivos
Explore conexões estáticas detectadas em arquivos JavaScript/TypeScript, Vue e Python.
Fontes sem conexões
Encontre arquivos e elementos sem importações ou dependências relacionadas detectadas no código selecionado.
JavaScript/TypeScript: .js, .jsx, .ts, .tsx e JSON, CSS/SCSS, HTML selecionados · Vue: .vue, JS/TS e arquivos vinculados · Python: .py (modo de teste).
Quais arquivos o serviço analisa
O analisador JavaScript/TypeScript lê .js, .jsx, .ts e .tsx. Arquivos JSON, CSS/SCSS e HTML selecionados são adicionados por referências estáticas detectadas. O analisador Vue lê .vue, JavaScript e TypeScript junto com arquivos explicitamente vinculados. Python lê .py e está em modo de teste.
O grafo representa as conexões estáticas detectadas nos arquivos selecionados, mas não abrange todo o comportamento do aplicativo em execução. Você pode excluir pastas de compilação, dependências e arquivos gerados. A falta de uma conexão detectada não significa necessariamente que o arquivo não seja usado.
Para quem serve um grafo de dependências de projetos
- Para quem explora um repositório GitHub e quer entender as conexões entre seus arquivos e módulos.
- Para equipes que planejam uma refatoração e precisam ver módulos relacionados e avaliar o impacto das mudanças.
- Para quem revisa código e quer conferir como um componente alterado se relaciona com o restante da aplicação.
- Para líderes técnicos e arquitetos que preferem discutir a estrutura em um mapa de dependências, não só na árvore de arquivos.
Segurança
Como o serviço lida com o código-fonte e o acesso ao GitHub
É possível abrir um repositório público sem login. Para um privado, usa-se o GitHub OAuth. O navegador carrega os arquivos selecionados do GitHub e cria o grafo localmente. O servidor troca o código de autorização por um token, mas não recebe arquivos do projeto para análise.
O grafo e a análise de importações são feitos no navegador
Os arquivos não são enviados ao servidor nem salvos no banco de dados
Ao recarregar, os arquivos são removidos da memória da aba
Recarregar apaga o grafo e a autorização
O GitHub OAuth é usado para acessar repositórios privados
Os arquivos selecionados vêm diretamente do GitHub para o navegador
Confira a transferência de dados
Como verificar que o código não é enviado ao servidor
- Abra as ferramentas de desenvolvedor e vá à aba Network.
- Recarregue a página e abra o explorador.
- Informe a URL de um repositório público ou entre para acessar um privado.
- Escolha o analisador e carregue os arquivos correspondentes: JS/TS, Vue ou Python (.py, modo de teste).
- Confira os endereços das requisições: os arquivos vêm do GitHub. O servidor cuida do OAuth, mas não recebe o conteúdo do projeto.
Perguntas e respostas
Dúvidas comuns sobre o grafo de dependências
O que um grafo de dependências mostra?
Ele mostra as conexões estáticas detectadas entre os arquivos selecionados. Assim, é possível acompanhar as relações, mas a análise não abrange todo o comportamento do aplicativo em execução.
Preciso instalar um programa para criar o grafo?
Não. A ferramenta funciona no navegador. Abra um repositório GitHub, escolha a branch e a pasta e selecione um analisador e seus arquivos.
O código-fonte é enviado ao servidor da aplicação?
Não são enviados arquivos para análise no servidor. O navegador carrega o código do GitHub e cria o grafo localmente. O servidor participa da autorização OAuth para repositórios privados.
Como criar um grafo para um repositório privado?
Entre com o GitHub OAuth, escolha um repositório privado e selecione a branch, a pasta, o analisador e os arquivos.
A análise é gratuita?
Você não precisa de assinatura nem cartão para começar. Podem valer limites da API do GitHub conforme o acesso, as requisições e a configuração da conta.
O que acontece com o grafo ao recarregar a página?
O grafo, os elementos selecionados e o token são apagados da memória da aba. Para repetir a análise, escolha novamente o repositório, a branch e a pasta.
Quais arquivos posso analisar?
JavaScript/TypeScript analisa .js, .jsx, .ts e .tsx; JSON, CSS/SCSS e HTML selecionados são adicionados por conexões estáticas detectadas. Vue analisa .vue, JavaScript e TypeScript junto com arquivos vinculados. Python analisa .py em modo de teste. O grafo mostra conexões estáticas detectadas, mas não abrange todo o comportamento do aplicativo em execução.
Como conferir que o código não é salvo no servidor?
Abra DevTools → Network e veja as requisições. Os arquivos vêm do GitHub para o navegador; o servidor participa do OAuth, mas não recebe seu conteúdo.
Como usar
Como usar o grafo de dependências e ajustar o painel
Como salvar e restaurar configurações?
Depois de carregar o projeto, use «Exportar» para baixar um JSON com as visualizações selecionadas, visibilidade e filtros. Para restaurar, carregue o mesmo repositório, branch e pasta raiz, clique em «Importar», escolha o arquivo e confirme a substituição. O código não entra no arquivo.
Como escolher uma visualização para análise?
Escolha um componente na barra lateral e adicione-o às visualizações. O grafo mostrará sua cadeia de dependências e as pastas envolvidas. Adicione outra visualização para comparar arquiteturas e encontrar componentes compartilhados.
O que os filtros fazem?
Os filtros acima do painel mostram ou ocultam os tipos de arquivo selecionados e suas conexões. Ao selecionar um componente, os demais nós permanecem no lugar e suas conexões diretas são destacadas. Use a busca para localizar um arquivo ou elemento.
Como funciona a busca?
Digite um nome ou caminho em «Buscar componente» acima do painel. Os resultados são destacados e os outros modelos continuam visíveis. Limpe o campo para remover o destaque.
Como adicionar outras visualizações?
Escolha um componente na barra lateral e adicione-o às visualizações. Repita para outros pontos de entrada: cada arquitetura aparecerá em sua própria linha, facilitando a comparação dos elementos e conexões compartilhados.
Grafo de dependências de projetos GitHub: entenda sua arquitetura
Um grafo de dependências mostra a estrutura da aplicação não só como lista de pastas e arquivos, mas como mapa das conexões detectadas entre módulos. Ele revela quais arquivos importam uns aos outros e onde uma mudança pode afetar o restante do projeto.
JavaScript/TypeScript analisa .js, .jsx, .ts e .tsx. Arquivos JSON, CSS/SCSS e HTML selecionados são adicionados por conexões estáticas detectadas. Vue analisa .vue, JavaScript e TypeScript junto com arquivos vinculados. Python analisa .py em modo de teste.
O grafo representa conexões estáticas detectadas nos arquivos selecionados, mas não abrange todo o comportamento do aplicativo em execução. Repositórios públicos podem ser explorados sem login; os privados exigem GitHub OAuth. Os arquivos vêm do GitHub para o navegador, onde o grafo é construído.
Use o grafo para explorar a estrutura do projeto, planejar mudanças e discutir as conexões detectadas com a equipe.
Crie um grafo de dependências do seu projeto
Escolha JavaScript/TypeScript, Vue ou Python (modo de teste). O grafo mostra as conexões estáticas detectadas nos arquivos selecionados, incluindo referências a JSON, CSS/SCSS e HTML selecionados; a análise não abrange todo o comportamento do aplicativo em execução.
Criar grafo de dependênciasNão é preciso fazer login para analisar um repositório GitHub público.