Há elementos sem conexões?
Encontre elementos sem relações detectadas e confira se são usados.
TypeScript · React · Next.js · Análise no navegador
Crie um grafo interativo de dependências de um projeto TypeScript do GitHub
Abra um repositório do GitHub e escolha uma branch e a pasta com o código-fonte. O serviço cria no seu navegador um grafo interativo de importações entre arquivos TypeScript (.ts) e TSX (.tsx).
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 importações e dependências TypeScript
Em um projeto TypeScript grande, nem sempre é fácil ver como arquivos, componentes, tipos e funções se relacionam. O grafo mostra as dependências detectadas e ajuda a avaliar o que uma mudança em um módulo pode afetar. Comece por uma pasta e adicione ao painel os elementos e conexões necessários.
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.
Ao abrir o projeto, o navegador cria um mapa de importações entre arquivos TypeScript (.ts) e TSX (.tsx). Escolha pastas, camadas e elementos, oculte conexões desnecessárias e navegue pelas dependências. Uma camada reúne no grafo os elementos de uma pasta selecionada. Assim fica mais fácil ver de onde vem uma importação e que partes do projeto usam um componente.
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 com código TypeScript.
- Confira as exclusões e carregue os arquivos-fonte .ts e .tsx.
- Adicione ao grafo as camadas e os elementos necessários e explore importações e usos.
Etapa 1 / 8
Abra um repositório
Informe a URL de um repositório público ou conecte o GitHub para acessar um privado.
TypeScript · .ts/.tsx · análise no navegador
Recursos
O que você pode fazer com o grafo de importações TypeScript
Repositórios públicos e privados
Abra um repositório público sem login. Para acessar um privado, use o GitHub OAuth.
Camadas e fontes
Configure o grafo: uma camada mostra elementos de uma pasta; uma fonte é um elemento individual adicionado ao painel.
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.
Grafo de importações
Veja conexões entre arquivos e elementos TypeScript, siga importações e encontre código relacionado.
Fontes sem conexões
Encontre arquivos e elementos sem importações ou dependências relacionadas detectadas no código selecionado.
Arquivos-fonte analisados: TypeScript (.ts) e TSX (.tsx).
Quais arquivos o serviço analisa
O serviço analisa arquivos TypeScript (.ts) e TSX (.tsx) na pasta selecionada de um repositório GitHub. Ele serve para projetos React e Next.js, mas também para outras bases de código TypeScript: não exige um framework específico.
Arquivos JavaScript (.js, .jsx), HTML (.html) e JSON (.json) não são analisados no momento. Você pode excluir pastas de compilação, dependências e arquivos gerados antes de criar o grafo. Ele mostra conexões estáticas detectadas no código selecionado; a ausência de uma linha não prova que um arquivo ou componente não é usado.
Para quem serve um grafo de importações TypeScript
- Para quem abre um repositório GitHub pela primeira vez e quer entender mais rápido sua estrutura TypeScript.
- 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 a branch e a pasta e carregue os arquivos TypeScript.
- 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 importações e dependências TypeScript?
É um mapa interativo das conexões estáticas detectadas entre arquivos, módulos e elementos do código TypeScript selecionado. Ele ajuda a ver quais partes do projeto estão relacionadas.
Preciso instalar um programa para criar o grafo?
Não. A ferramenta funciona no navegador: abra a página, informe um repositório GitHub e escolha uma branch e uma pasta com arquivos .ts ou .tsx.
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 ao qual você tenha acesso e selecione a branch e a pasta. Depois carregue os arquivos TypeScript ou TSX.
A análise de projetos TypeScript é 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?
São analisados arquivos TypeScript .ts e TSX .tsx na pasta selecionada. .js, .jsx, .html e .json não são incluídos no momento.
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 camadas, fontes, 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 mostrar uma camada?
No painel esquerdo, abra «Camadas», selecione uma pasta e clique em «Mostrar». O número ao lado do caminho indica quantos modelos ela contém. O ícone de olho oculta ou mostra a camada; o X a remove do painel.
Como mostrar um componente?
No painel esquerdo, abra «Fontes», selecione um componente e clique em «Mostrar». Ele aparecerá como fonte independente. O ícone de olho controla a visibilidade.
O que os filtros fazem?
As caixas acima do painel mostram ou ocultam fontes, camadas e arquivos .tsx ou .ts com suas relações, sem alterar os ícones de olho. «Mostrar fontes sem conexões» destaca elementos sem relações detectadas. Ao selecionar um componente, as caixas da barra lateral filtram apenas sua lista de dependências.
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 camadas e componentes pela barra lateral?
Selecione um componente no painel ou na lista de uma camada. No cartão, o seletor de pastas adiciona uma camada com o mais verde e a remove com o menos vermelho. «Adicionar às fontes» mostra o componente como fonte; «Remover das fontes» o retira. Os sinais junto às dependências controlam os componentes relacionados.
Grafo de dependências TypeScript: entenda mais rápido a arquitetura do projeto
Um grafo de dependências TypeScript 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, quais partes do código se relacionam com um componente e onde a mudança de um módulo pode afetar o restante do projeto. Isso ajuda a conhecer um repositório GitHub, preparar uma refatoração e revisar decisões de arquitetura.
O serviço cria um grafo interativo de importações para arquivos TypeScript .ts e TSX .tsx. Escolha um repositório GitHub, uma branch e uma pasta com código-fonte; depois adicione ao painel as camadas, os elementos e as conexões necessárias. Você pode ocultar o que não interessa, acompanhar cadeias de importações, encontrar módulos relacionados e perceber partes do código selecionado sem dependências detectadas.
A ferramenta serve para projetos React, Next.js e outros projetos TypeScript. Não depende de um framework específico: o importante são os arquivos .ts e .tsx. Repositórios públicos podem ser explorados sem login no GitHub; os privados exigem GitHub OAuth. Os arquivos vêm do GitHub para o navegador, onde o grafo é construído.
Use o grafo de importações para entender uma aplicação mais rápido, planejar mudanças e discutir sua estrutura com a equipe. Abra um projeto TypeScript do GitHub e comece a explorar sua arquitetura no navegador.
Crie um grafo de dependências do seu projeto TypeScript
Abra um repositório GitHub, escolha uma pasta com arquivos .ts e .tsx e explore importações, módulos relacionados e a estrutura do código. Comece gratuitamente, sem assinatura e sem enviar arquivos ao servidor da aplicação.
Criar grafo de dependênciasNão é preciso fazer login para analisar um repositório GitHub público.