¿Hay elementos sin conexiones?
Encuentra elementos sin relaciones detectadas y comprueba si se utilizan.
GitHub · JavaScript/TypeScript · Vue · Python (modo de prueba)
Crea un grafo interactivo de dependencias para tu proyecto de GitHub en el navegador
Abre un repositorio de GitHub y elige una rama y una carpeta con código fuente. JavaScript/TypeScript analiza .js, .jsx, .ts y .tsx; los archivos JSON, CSS/SCSS y HTML seleccionados se añaden mediante referencias estáticas detectadas. Vue analiza .vue, JavaScript y TypeScript junto con archivos vinculados. Python analiza .py en modo de prueba.
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 dependencias de un proyecto
El grafo muestra las relaciones estáticas detectadas entre archivos. Elige vistas para explorar las dependencias, comparar archivos compartidos y distintos o ver qué importadores puede afectar un cambio.
¿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.
Elige un analizador: JavaScript/TypeScript, Vue o Python (modo de prueba). JavaScript/TypeScript analiza .js, .jsx, .ts y .tsx; los archivos JSON, CSS/SCSS y HTML seleccionados se añaden mediante referencias estáticas detectadas. Vue analiza .vue, JavaScript y TypeScript junto con archivos vinculados. Python analiza .py en modo de prueba.
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 del proyecto.
- Elige el analizador y carga sus archivos: JS/TS, Vue o Python (modo de prueba).
- Elige una vista para seguir su cadena de dependencias. Añade otras vistas para comparar su arquitectura y sus elementos compartidos.
Paso 1 / 7
Abre un repositorio
Introduce la URL de un repositorio público o conecta GitHub para acceder a uno privado.
JavaScript/TypeScript · Vue · Python (modo de prueba) · análisis en el navegador
Modos y comparaciones
Formas de explorar la arquitectura del proyecto
Grafo estándar
El grafo estándar muestra las vistas seleccionadas y los enlaces estáticos detectados entre ellas y otros archivos. Al seguir varias vistas, se ve qué componentes llegan a archivos compartidos y se pueden comparar esas partes comunes. Así resulta más sencillo recorrer las dependencias del proyecto y decidir qué módulos conviene revisar antes de modificarlos.
Estructura de páginas
La estructura de páginas detecta de forma heurística los componentes Page y las exportaciones predeterminadas de archivos page.js, page.jsx, page.ts y page.tsx. Los sitúa alrededor del resto para mostrar posibles puntos de entrada y sus enlaces estáticos con el proyecto. Al seleccionar uno, se resaltan los enlaces detectados; no se reconstruyen las rutas reales de la aplicación.
Árbol del proyecto
El árbol del proyecto muestra carpetas y componentes según su ubicación, organizados en una jerarquía y sin líneas de dependencias. Permite entender cómo se distribuyen los archivos y encontrar componentes por su carpeta antes de revisar sus conexiones en otra vista.
Impacto de los cambios
El impacto de los cambios parte del componente seleccionado y muestra sus importadores en sentido inverso: los directos en el primer nivel y los siguientes en niveles sucesivos. Sirve para valorar qué componentes conviene revisar antes de modificar el archivo. El resultado se basa en enlaces estáticos detectados y no representa todo el comportamiento de la aplicación en ejecución.
Clasificación de archivos
La clasificación de archivos ordena según el criterio elegido: cantidad de enlaces entrantes, salientes o ausencia de enlaces detectados. Ayuda a localizar archivos de los que dependen muchos otros, módulos que importan muchas dependencias y, por separado, nodos sin conexiones. Un número alto de enlaces no mide la complejidad del código; la falta de conexiones se comprueba en los archivos fuente.
Comparar archivos compartidos y únicos
Intersecciones
Las intersecciones muestran los archivos comunes en cada pareja y combinación de mayor tamaño. Los archivos comunes a tres vistas también aparecen en los tres grupos de parejas.
Archivos únicos
Para cada combinación, aparecen los archivos usados por al menos una vista, pero no por todas. En A+B+C quedan los de una o dos vistas; los compartidos por las tres se excluyen.
Funciones
Qué puedes hacer con un grafo de dependencias de proyectos
Repositorios públicos y privados
Abre un repositorio público sin iniciar sesión. Usa GitHub OAuth para acceder a uno privado.
Explora las vistas seleccionadas
Elige uno o varios componentes como vistas y sigue sus cadenas de dependencias detectadas, incluidos los elementos compartidos.
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.
Relaciones estáticas
Explora las relaciones estáticas detectadas en archivos JavaScript/TypeScript, Vue y Python.
Fuentes sin conexiones
Encuentra archivos y elementos sin importaciones ni dependencias relacionadas detectadas en el código seleccionado.
JavaScript/TypeScript: .js, .jsx, .ts, .tsx y JSON, CSS/SCSS, HTML seleccionados · Vue: .vue, JS/TS y archivos vinculados · Python: .py (modo de prueba).
Qué archivos y proyectos analiza el servicio
El analizador JavaScript/TypeScript lee .js, .jsx, .ts y .tsx. Los archivos JSON, CSS/SCSS y HTML seleccionados se añaden mediante referencias estáticas detectadas. El analizador Vue lee .vue, JavaScript y TypeScript junto con los archivos vinculados. Python lee .py y está en modo de prueba.
El grafo refleja las relaciones estáticas detectadas en los archivos seleccionados, no todo el comportamiento dinámico o en tiempo de ejecución. Puedes excluir carpetas de compilación, dependencias y archivos generados. Que un archivo no tenga relaciones detectadas no significa necesariamente que no se utilice.
A quién le sirve un grafo de dependencias de proyectos
- A quien explora un repositorio GitHub y quiere entender las conexiones entre sus archivos y módulos.
- 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 el analizador y carga sus archivos: JavaScript/TypeScript, Vue o Python (.py, modo de prueba).
- 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é muestra un grafo de dependencias?
Muestra las relaciones estáticas detectadas entre los archivos seleccionados. Permite seguir conexiones, pero no representa todo el comportamiento dinámico o en tiempo de ejecución.
¿Tengo que instalar un programa para crear el grafo?
No. La herramienta funciona en el navegador. Abre un repositorio GitHub, elige una rama y carpeta, y selecciona el analizador y sus archivos.
¿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 y selecciona la rama, la carpeta, el analizador y los archivos.
¿Es gratuito analizar un proyecto?
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?
JavaScript/TypeScript analiza .js, .jsx, .ts y .tsx; JSON, CSS/SCSS y HTML seleccionados se añaden mediante relaciones estáticas detectadas. Vue analiza .vue, JavaScript y TypeScript junto con archivos vinculados. Python analiza .py en modo de prueba. El grafo refleja relaciones estáticas detectadas, no todo el comportamiento dinámico o en ejecución.
¿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 las vistas seleccionadas, la visibilidad y los 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 elijo una vista para analizar?
Selecciona un componente en el panel lateral y añádelo a tus vistas. El grafo mostrará su cadena de dependencias y las carpetas que intervienen. Añade otra vista para comparar arquitecturas y encontrar componentes compartidos.
¿Qué hacen los filtros?
Los filtros sobre el lienzo muestran u ocultan los tipos de archivo seleccionados y sus relaciones. Al seleccionar un componente, los demás nodos permanecen en su sitio y se destacan sus conexiones directas. Usa la búsqueda para localizar un archivo o elemento.
¿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 más vistas?
Elige un componente en el panel lateral y añádelo a tus vistas. Repite el proceso con otros puntos de entrada: cada arquitectura aparecerá en su propia fila para comparar elementos y conexiones compartidos.
Grafo de dependencias de proyectos GitHub: comprende su arquitectura
Un grafo de dependencias 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 un cambio puede afectar al resto.
JavaScript/TypeScript analiza .js, .jsx, .ts y .tsx. Los archivos JSON, CSS/SCSS y HTML seleccionados se añaden mediante relaciones estáticas detectadas. Vue analiza .vue, JavaScript y TypeScript junto con archivos vinculados. Python analiza .py en modo de prueba.
El grafo refleja las relaciones estáticas detectadas en los archivos seleccionados, no todo el comportamiento dinámico o en ejecución. Puedes explorar repositorios públicos sin iniciar sesión; para los privados se utiliza GitHub OAuth. Los archivos se cargan desde GitHub en el navegador, donde se crea el grafo.
Utiliza el grafo para explorar la estructura del proyecto, preparar cambios y comentar las relaciones detectadas con el equipo.
Crea un grafo de dependencias de tu proyecto de GitHub
Elige JavaScript/TypeScript, Vue o Python (modo de prueba). El grafo muestra las relaciones estáticas detectadas en los archivos seleccionados, incluidas las referencias a JSON, CSS/SCSS y HTML seleccionados.
Crear grafo de dependenciasNo necesitas iniciar sesión para analizar un repositorio GitHub público.