¿Hay elementos sin conexiones?
Encuentra elementos sin relaciones detectadas y comprueba si se utilizan.
TypeScript · React · Next.js · Análisis en el navegador
Crea un grafo interactivo de dependencias de un proyecto TypeScript desde GitHub
Abre un repositorio de GitHub y elige una rama y una carpeta con el código fuente. El servicio creará en tu navegador un grafo interactivo de importaciones entre archivos TypeScript (.ts) y TSX (.tsx).
Comprende antes la estructura del proyecto, revisa las relaciones entre módulos y evalúa el impacto de los cambios antes de refactorizar.
Repositorios públicos y privados · El código se analiza en tu navegador y no se envía al servidor de la aplicación
No necesitas iniciar sesión en GitHub para abrir un repositorio público.
Sin enviar códigoLos archivos se cargan directamente de GitHub en tu navegador
Grafo configurableMuestra solo las partes del proyecto que necesitas
Análisis localEl grafo se crea en el navegador, sin enviar archivos al servidor
Acceso gratuitoSin suscripción ni tarjeta de pago
Para qué sirve
Qué muestra un grafo de importaciones y dependencias TypeScript
En un proyecto TypeScript grande no siempre es fácil ver cómo se relacionan los archivos, componentes, tipos y funciones. El grafo muestra las dependencias detectadas y ayuda a valorar qué puede verse afectado al cambiar un módulo. Empieza por una carpeta y añade al lienzo los elementos y enlaces que necesites.
¿Qué partes afectará un cambio?
Revisa los enlaces entrantes y salientes de un módulo antes de refactorizar.
¿De dónde viene una dependencia?
Sigue la cadena de importaciones en el grafo y la lista de elementos relacionados.
Al abrir el proyecto, el navegador crea un mapa de importaciones entre archivos TypeScript (.ts) y TSX (.tsx). Elige carpetas, capas y elementos; oculta enlaces innecesarios y recorre las dependencias. Una capa agrupa en el grafo los elementos de una carpeta seleccionada. Así es más fácil ver de dónde llega una importación y qué partes del proyecto usan un componente.
Cómo funciona
Cómo crear un grafo de dependencias de un repositorio GitHub
- Abre un repositorio público mediante su enlace o inicia sesión con GitHub para elegir uno privado.
- Elige el repositorio, la rama y la carpeta raíz con código TypeScript.
- Revisa las exclusiones y carga los archivos fuente .ts y .tsx.
- Añade al grafo las capas y elementos que necesites y explora sus importaciones y usos.
Paso 1 / 8
Abre un repositorio
Introduce la URL de un repositorio público o conecta GitHub para acceder a uno privado.
TypeScript · .ts/.tsx · análisis en el navegador
Funciones
Qué puedes hacer con un grafo de importaciones TypeScript
Repositorios públicos y privados
Abre un repositorio público sin iniciar sesión. Usa GitHub OAuth para acceder a uno privado.
Capas y fuentes a tu elección
Configura el grafo: una capa muestra elementos de una carpeta; una fuente es un elemento individual que añades al lienzo.
Análisis en el navegador
Los archivos se cargan desde GitHub en tu navegador, donde se construye el grafo. No se envían al servidor para analizarlos ni se guardan en su base de datos.
Acceso gratuito
Empieza sin suscripción ni tarjeta. Pueden aplicarse límites de la API de GitHub y restricciones de acceso al repositorio.
Grafo de importaciones
Explora relaciones entre archivos y elementos TypeScript, sigue importaciones y encuentra código relacionado.
Fuentes sin conexiones
Encuentra archivos y elementos sin importaciones ni dependencias relacionadas detectadas en el código seleccionado.
Archivos fuente analizados: TypeScript (.ts) y TSX (.tsx).
Qué archivos analiza el servicio
El servicio analiza archivos TypeScript (.ts) y TSX (.tsx) de la carpeta seleccionada de un repositorio GitHub. Sirve para proyectos React y Next.js, pero también para otras bases de código TypeScript: no requiere un framework concreto.
Por ahora no analiza archivos JavaScript (.js, .jsx), HTML (.html) ni JSON (.json). Antes de crear el grafo puedes excluir carpetas de compilación, dependencias y archivos generados. El grafo muestra relaciones estáticas detectadas en el código seleccionado; que no aparezca una línea no demuestra que un archivo o componente no se utilice.
A quién le sirve un grafo de importaciones TypeScript
- A quien abre por primera vez un repositorio GitHub y quiere entender más rápido la estructura del código TypeScript.
- A los equipos que preparan una refactorización y necesitan ver módulos relacionados y evaluar el impacto de los cambios.
- A quienes revisan código y quieren comprobar cómo se relaciona un componente modificado con el resto de la aplicación.
- A responsables técnicos y arquitectos que prefieren comentar la estructura como mapa de dependencias, no solo como árbol de archivos.
Seguridad
Cómo se gestionan el código fuente y el acceso a GitHub
Puedes abrir un repositorio público sin iniciar sesión. Para uno privado se usa GitHub OAuth. Tu navegador carga los archivos seleccionados desde GitHub y crea el grafo localmente. El servidor intercambia un código de autorización por un token, pero no recibe archivos del proyecto para analizarlos.
El grafo y el análisis de importaciones se crean en tu navegador
Los archivos no se envían al servidor ni se guardan en su base de datos
Al recargar se eliminan los archivos seleccionados de la memoria de la pestaña
Al recargar se borran el grafo y la autorización
GitHub OAuth permite acceder a repositorios privados
Los archivos seleccionados se cargan directamente de GitHub en el navegador
Comprueba la transferencia de datos
Cómo comprobar que el código no se envía al servidor
- Abre DevTools y ve a la pestaña Network.
- Recarga la página y abre el explorador.
- Introduce la URL de un repositorio público o inicia sesión para acceder a uno privado.
- Elige la rama y la carpeta y carga los archivos TypeScript.
- Comprueba las URL de las solicitudes: los archivos vienen de GitHub. El servidor gestiona OAuth, pero no recibe el contenido del proyecto.
Preguntas frecuentes
Preguntas sobre el grafo de dependencias
¿Qué es un grafo de importaciones y dependencias TypeScript?
Es un mapa interactivo de relaciones estáticas detectadas entre archivos, módulos y elementos del código TypeScript seleccionado. Ayuda a ver qué partes del proyecto están conectadas.
¿Tengo que instalar un programa para crear el grafo?
No. La herramienta funciona en el navegador: abre la página, indica el repositorio GitHub y elige una rama y una carpeta con archivos .ts o .tsx.
¿Se envía el código fuente al servidor de la aplicación?
No se envían archivos al servidor para analizarlos. El navegador los carga desde GitHub y crea el grafo localmente. El servidor interviene en la autorización OAuth de los repositorios privados.
¿Cómo creo un grafo para un repositorio privado?
Inicia sesión con GitHub OAuth, elige un repositorio privado al que tengas acceso y selecciona la rama y la carpeta. Después carga los archivos TypeScript o TSX.
¿Es gratuito analizar un proyecto TypeScript?
No necesitas suscripción ni tarjeta para empezar. Pueden aplicarse límites de la API de GitHub según el acceso, las solicitudes y la configuración de la cuenta.
¿Qué pasa con el grafo al recargar la página?
El grafo, los elementos seleccionados y el token se borran de la memoria de la pestaña. Para repetir el análisis, vuelve a elegir el repositorio, la rama y la carpeta.
¿Qué archivos puedo analizar?
Se analizan archivos TypeScript .ts y TSX .tsx de la carpeta seleccionada. Por ahora no se incluyen .js, .jsx, .html ni .json.
¿Cómo compruebo que el código no se guarda en el servidor?
Abre DevTools → Network y revisa las solicitudes. Los archivos se cargan desde GitHub en el navegador; el servidor gestiona OAuth, pero no recibe su contenido.
Cómo usarlo
Cómo utilizar el grafo y configurar el lienzo
¿Cómo guardo y restauro mi configuración?
Después de cargar el proyecto, usa «Exportar» para descargar un JSON con capas, fuentes, visibilidad y filtros. Para restaurarlo, carga el mismo repositorio, rama y carpeta raíz; pulsa «Importar», elige el archivo y confirma el reemplazo. El código no se incluye.
¿Cómo muestro una capa?
En el panel izquierdo, abre «Capas», selecciona una carpeta y pulsa «Mostrar». El número junto a la ruta indica cuántos modelos contiene. El icono de ojo oculta o muestra la capa; la cruz la quita del lienzo.
¿Cómo muestro un componente?
En el panel izquierdo, abre «Fuentes», selecciona un componente y pulsa «Mostrar». Aparecerá como una fuente independiente. El icono de ojo controla su visibilidad.
¿Qué hacen los filtros?
Las casillas sobre el lienzo muestran u ocultan fuentes, capas y archivos .tsx o .ts con sus relaciones, sin modificar los iconos de ojo. «Mostrar fuentes sin conexiones» destaca elementos sin relaciones detectadas. Las casillas del panel lateral, al seleccionar un componente, solo filtran su lista de dependencias.
¿Cómo funciona la búsqueda?
Escribe un nombre o una ruta en «Buscar componente» sobre el lienzo. Se destacan las coincidencias y los demás modelos permanecen visibles. Borra la búsqueda para quitar el resaltado.
¿Cómo añado capas y componentes desde el panel lateral?
Selecciona un componente en el lienzo o en una capa. En su ficha, el selector de carpetas permite añadir con el más verde o quitar con el menos rojo. «Añadir a las fuentes» muestra el componente como fuente; «Quitar de las fuentes» lo retira. Los signos junto a las dependencias hacen lo mismo con los componentes relacionados.
Grafo de dependencias TypeScript: comprende antes la arquitectura de un proyecto
Un grafo de dependencias TypeScript permite ver una aplicación como algo más que una lista de carpetas y archivos: muestra las relaciones detectadas entre módulos. Indica qué archivos se importan entre sí, qué partes del código se relacionan con un componente y dónde el cambio de un módulo puede afectar al resto. Resulta útil al conocer un repositorio GitHub, preparar una refactorización o revisar decisiones de arquitectura.
El servicio crea un grafo interactivo de importaciones para archivos TypeScript .ts y TSX .tsx. Elige un repositorio GitHub, una rama y una carpeta con código; después añade al lienzo las capas, elementos y relaciones que necesites. Puedes ocultar lo superfluo, seguir cadenas de importaciones, encontrar módulos relacionados y detectar partes del código seleccionado sin dependencias encontradas.
La herramienta sirve para proyectos React, Next.js y otros proyectos TypeScript. No depende de un framework concreto: lo importante son los archivos .ts y .tsx. Puedes explorar repositorios públicos sin iniciar sesión en GitHub; para los privados se utiliza GitHub OAuth. Los archivos se cargan desde GitHub en tu navegador, donde se crea el grafo.
Utiliza el grafo para entender antes una aplicación, preparar cambios y comentar su estructura con el equipo. Abre un proyecto TypeScript desde GitHub y empieza a explorar su arquitectura en el navegador.
Crea un grafo de dependencias de tu proyecto TypeScript
Abre un repositorio GitHub, elige una carpeta con archivos .ts y .tsx y explora importaciones, módulos relacionados y la estructura del código. Empieza gratis, sin suscripción y sin enviar los archivos al servidor de la aplicación.
Crear grafo de dependenciasNo necesitas iniciar sesión para analizar un repositorio GitHub público.