Y a-t-il des éléments isolés ?
Repérez les éléments sans lien détecté et vérifiez s’ils sont utilisés.
GitHub · JavaScript/TypeScript · Vue · Python (mode test)
Créez un graphe interactif des dépendances d’un projet GitHub dans votre navigateur
Choisissez un dépôt, une branche et un dossier. JavaScript/TypeScript analyse .js, .jsx, .ts et .tsx ; les fichiers JSON, CSS/SCSS et HTML sélectionnés sont ajoutés via les liens statiques détectés. Vue analyse .vue, JavaScript et TypeScript avec les fichiers explicitement liés. Python analyse les fichiers .py en mode test.
Comprenez plus vite la structure du projet, examinez les liens entre modules et évaluez l’impact des modifications avant une refonte.
Dépôts publics et privés · Le code source est analysé dans votre navigateur et n’est pas envoyé au serveur de l’application
Les dépôts publics ne nécessitent pas de connexion à GitHub.
Aucun envoi de codeLes fichiers passent directement de GitHub à votre navigateur
Graphe personnalisableAffichez uniquement les parties utiles du projet
Analyse localeLe graphe est créé dans le navigateur, sans envoyer les fichiers au serveur
Accès gratuitSans abonnement ni carte bancaire
À quoi sert cet outil
Ce que montre un graphe de dépendances de projet
Le graphe montre les liens statiques détectés entre les fichiers du projet. Choisissez des vues pour explorer les dépendances, comparer les fichiers partagés et distincts ou voir quels importateurs une modification peut affecter.
Quelles parties seront touchées ?
Examinez les liens entrants et sortants d’un module avant de le modifier.
D’où vient une dépendance ?
Suivez la chaîne des imports dans le graphe et la liste des éléments associés.
Choisissez un analyseur : JavaScript/TypeScript, Vue ou Python (mode test). JavaScript/TypeScript lit .js, .jsx, .ts et .tsx ; les fichiers JSON, CSS/SCSS et HTML sélectionnés sont ajoutés via les liens statiques détectés. Vue lit .vue, JavaScript et TypeScript avec les fichiers explicitement liés. Python lit .py en mode test.
Fonctionnement
Comment créer un graphe de dépendances depuis un dépôt GitHub
- Ouvrez un dépôt public par son lien ou connectez-vous avec GitHub pour en choisir un privé.
- Choisissez le dépôt, la branche et le dossier racine du projet.
- Choisissez un analyseur et chargez les fichiers correspondants : JS/TS, Vue ou Python (.py, mode test).
- Choisissez une vue pour suivre sa chaîne de dépendances. Ajoutez-en d’autres pour comparer les architectures et repérer les éléments partagés.
Étape 1 / 7
Ouvrez un dépôt
Saisissez l’URL d’un dépôt public ou connectez GitHub pour accéder à un dépôt privé.
JavaScript/TypeScript · Vue · Python (mode test) · analyse dans le navigateur
Modes et comparaisons
Explorer l’architecture du projet de plusieurs façons
Graphe standard
Le graphe standard affiche les vues sélectionnées et les liens statiques détectés vers les autres fichiers. En suivant plusieurs composants, les fichiers qu’ils partagent deviennent visibles et faciles à comparer. Cette vue aide à parcourir les dépendances du projet et à repérer les modules à examiner avant une modification.
Structure des pages
La structure des pages repère par heuristique les composants Page et les exports par défaut des fichiers page.js, page.jsx, page.ts et page.tsx. Elle les place autour des autres composants pour montrer les points d’entrée possibles et leurs liens statiques détectés. La sélection met ces liens en évidence ; les routes réelles de l’application ne sont pas reconstituées.
Arbre du projet
L’arbre du projet organise les dossiers et les composants selon leur hiérarchie de rangement, sans afficher les liens de dépendance. Il aide à comprendre l’organisation du dépôt et à retrouver un composant par son dossier avant d’examiner ses liens dans une autre vue.
Impact des modifications
L’impact des modifications part du composant sélectionné et affiche ses importateurs par niveau de dépendance inverse : les importateurs directs au premier niveau, puis ceux des niveaux suivants. Cette vue aide à déterminer quels composants vérifier avant une modification. Elle repose sur les liens statiques détectés et ne décrit pas tout le comportement à l’exécution.
Classement des fichiers
Le classement des fichiers suit le critère choisi : nombre de liens entrants, de liens sortants ou absence de liens détectés. Il aide à repérer les fichiers dont beaucoup d’autres dépendent, les modules qui importent de nombreuses dépendances et, séparément, les nœuds sans lien. Un grand nombre de liens ne mesure pas la complexité du code ; l’absence de liens se vérifie dans les sources.
Comparer les fichiers partagés et uniques
Recoupements
Les recoupements montrent les fichiers communs à chaque paire et aux combinaisons plus larges. Un fichier partagé par trois vues figure aussi dans les trois paires.
Fichiers uniques
Pour chaque combinaison, les fichiers utilisés par au moins une vue, mais pas toutes, sont affichés. Dans A+B+C, ceux d’une ou deux vues restent ; ceux des trois sont exclus.
Fonctionnalités
Ce que permet le graphe de dépendances de projet
Dépôts publics et privés
Ouvrez un dépôt public sans connexion. Pour un dépôt privé, utilisez GitHub OAuth.
Architecture des vues sélectionnées
Choisissez un ou plusieurs composants comme vues et suivez leurs chaînes de dépendances, y compris les éléments partagés.
Analyse dans le navigateur
Les fichiers passent de GitHub au navigateur, où le graphe est créé. Ils ne sont ni envoyés au serveur pour analyse ni stockés dans sa base de données.
Accès gratuit
Commencez sans abonnement ni carte bancaire. Les limites de l’API GitHub et les règles d’accès aux dépôts peuvent s’appliquer.
Liens entre fichiers
Explorez les liens statiques détectés dans les fichiers JavaScript/TypeScript, Vue et Python.
Sources isolées
Repérez les fichiers et éléments sans import ni dépendance associée détectés dans le code choisi.
JavaScript/TypeScript : .js, .jsx, .ts, .tsx et fichiers JSON, CSS/SCSS et HTML sélectionnés · Vue : .vue, JS/TS et fichiers liés · Python : .py (mode test).
Quels fichiers le service analyse-t-il ?
JavaScript/TypeScript analyse .js, .jsx, .ts et .tsx. Les fichiers JSON, CSS/SCSS et HTML sélectionnés sont ajoutés via les liens statiques détectés. Vue analyse .vue, JavaScript et TypeScript avec les fichiers explicitement liés. Python analyse .py en mode test.
Le graphe reflète les liens statiques détectés dans les fichiers sélectionnés, mais ne décrit pas entièrement le comportement à l’exécution. Vous pouvez exclure les dossiers de compilation, de dépendances et de fichiers générés. L’absence de lien ne prouve pas qu’un fichier n’est pas utilisé.
À qui sert un graphe de dépendances de projet ?
- Aux développeurs qui explorent un dépôt GitHub et veulent comprendre les liens entre ses fichiers et ses modules.
- Aux équipes qui préparent une refonte et doivent repérer les modules associés et évaluer l’impact des changements.
- Aux personnes qui relisent le code et veulent vérifier les liens entre un composant modifié et le reste de l’application.
- Aux responsables techniques et architectes qui souhaitent discuter de la structure sur une carte des dépendances, et pas seulement dans une arborescence.
Sécurité
Comment le service gère le code source et l’accès à GitHub
Vous pouvez ouvrir un dépôt public sans connexion. Un dépôt privé nécessite GitHub OAuth. Votre navigateur charge les fichiers choisis depuis GitHub et crée le graphe localement. Le serveur échange le code d’autorisation contre un jeton, mais ne reçoit pas les fichiers du projet pour les analyser.
Le graphe et l’analyse des imports sont créés dans votre navigateur
Les fichiers ne sont pas envoyés au serveur ni stockés dans sa base de données
Un rechargement retire les fichiers choisis de la mémoire de l’onglet
Un rechargement efface le graphe et l’autorisation
GitHub OAuth permet l’accès aux dépôts privés
Les fichiers choisis passent directement de GitHub au navigateur
Vérifier les transferts
Comment vérifier que le code n’est pas envoyé au serveur
- Ouvrez les outils de développement et l’onglet Network.
- Rechargez la page et ouvrez l’explorateur.
- Saisissez l’URL d’un dépôt public ou connectez-vous pour un dépôt privé.
- Choisissez un analyseur et chargez les fichiers correspondants : JS/TS, Vue ou Python (.py, mode test).
- Vérifiez les adresses des requêtes : les fichiers viennent de GitHub. Le serveur gère OAuth, mais ne reçoit pas le contenu du projet.
Questions fréquentes
Questions fréquentes sur le graphe de dépendances
Que montre un graphe de dépendances ?
Il montre les liens statiques détectés entre les fichiers sélectionnés. Il permet de suivre leurs relations, mais ne décrit pas entièrement le comportement à l’exécution.
Faut-il installer un logiciel pour créer le graphe ?
Non. L’outil fonctionne dans le navigateur. Ouvrez un dépôt GitHub, choisissez une branche et un dossier, puis sélectionnez un analyseur et ses fichiers.
Le code source est-il envoyé au serveur de l’application ?
Non, aucun fichier ne lui est envoyé pour analyse. Le navigateur charge le code depuis GitHub et crée le graphe localement. Le serveur intervient dans l’autorisation OAuth des dépôts privés.
Comment créer un graphe pour un dépôt privé ?
Connectez-vous avec GitHub OAuth, choisissez un dépôt privé, puis la branche, le dossier, l’analyseur et les fichiers.
L’analyse est-elle gratuite ?
Aucun abonnement ni carte bancaire n’est nécessaire pour commencer. Les limites de l’API GitHub et les paramètres du compte ou du dépôt peuvent s’appliquer.
Que devient le graphe après un rechargement ?
Le graphe, les éléments choisis et le jeton d’autorisation sont effacés de la mémoire de l’onglet. Pour recommencer, choisissez à nouveau le dépôt, la branche et le dossier.
Quels fichiers puis-je analyser ?
JavaScript/TypeScript lit .js, .jsx, .ts et .tsx ; les fichiers JSON, CSS/SCSS et HTML sélectionnés sont ajoutés via les liens statiques détectés. Vue lit .vue, JavaScript et TypeScript avec les fichiers explicitement liés. Python lit .py en mode test. Le graphe reflète les liens statiques détectés, mais ne décrit pas entièrement le comportement à l’exécution.
Comment vérifier que le code n’est pas stocké sur le serveur ?
Ouvrez DevTools → Network et regardez les requêtes. Les fichiers viennent de GitHub dans le navigateur. Le serveur gère OAuth, mais ne reçoit pas leur contenu.
Guide d’utilisation
Utiliser le graphe de dépendances et configurer le canevas
Comment sauvegarder et restaurer les paramètres ?
Après le chargement, cliquez sur « Exporter » pour télécharger un JSON contenant les vues sélectionnées, leur visibilité et les filtres. Pour le restaurer, chargez les mêmes dépôt, branche et dossier racine, cliquez sur « Importer », choisissez le fichier et confirmez le remplacement. Le code source n’y figure pas.
Comment choisir une vue à analyser ?
Choisissez un composant dans le panneau latéral et ajoutez-le à vos vues. Le graphe affiche sa chaîne de dépendances et les dossiers concernés. Ajoutez une autre vue pour comparer les architectures et repérer les composants partagés.
À quoi servent les filtres ?
Les filtres au-dessus du canevas affichent ou masquent les types de fichiers choisis et leurs liens. Quand un composant est sélectionné, les autres nœuds restent en place et ses liens directs sont mis en évidence. Utilisez la recherche pour retrouver un fichier ou un élément.
Comment fonctionne la recherche ?
Saisissez un nom ou un chemin dans « Rechercher un composant » au-dessus du canevas. Les résultats sont mis en évidence et les autres modèles restent visibles. Effacez le champ pour retirer la surbrillance.
Comment ajouter d’autres vues ?
Choisissez un composant dans le panneau latéral et ajoutez-le à vos vues. Répétez pour d’autres points d’entrée : chaque architecture apparaît sur sa propre ligne, ce qui facilite la comparaison des éléments et liens partagés.
Graphe de dépendances de projet GitHub : comprendre les liens détectés
Un graphe de dépendances montre la structure d’une application autrement que par une liste de dossiers et de fichiers : il cartographie les liens détectés entre modules et indique où une modification pourrait toucher le reste du projet.
JavaScript/TypeScript lit .js, .jsx, .ts et .tsx. Les fichiers JSON, CSS/SCSS et HTML sélectionnés sont ajoutés via les liens statiques détectés. Vue lit .vue, JavaScript et TypeScript avec les fichiers explicitement liés. Python lit .py en mode test.
Le graphe représente les liens statiques détectés dans les fichiers sélectionnés, mais ne décrit pas entièrement le comportement à l’exécution. Les dépôts publics sont accessibles sans connexion ; les dépôts privés nécessitent GitHub OAuth. Les fichiers passent de GitHub à votre navigateur, où le graphe est créé.
Utilisez le graphe pour explorer la structure du projet, préparer des modifications et discuter des liens détectés avec votre équipe.
Créez un graphe de dépendances pour votre projet GitHub
Choisissez JavaScript/TypeScript, Vue ou Python (mode test). Le graphe affiche les liens statiques détectés dans les fichiers sélectionnés, y compris les références aux fichiers JSON, CSS/SCSS et HTML sélectionnés ; il ne décrit pas entièrement le comportement à l’exécution.
Créer un graphe de dépendancesAucune connexion n’est requise pour analyser un dépôt GitHub public.