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.
TypeScript · React · Next.js · Analyse dans le navigateur
Créez un graphe interactif des dépendances d’un projet TypeScript depuis GitHub
Ouvrez un dépôt GitHub, puis choisissez une branche et le dossier contenant le code source. Le service crée dans votre navigateur un graphe interactif des imports entre fichiers TypeScript (.ts) et TSX (.tsx).
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 des imports et dépendances TypeScript
Dans un grand projet TypeScript, il n’est pas toujours simple de voir comment fichiers, composants, types et fonctions sont liés. Le graphe montre les dépendances détectées et aide à estimer ce qu’une modification de module pourrait affecter. Commencez par un dossier, puis ajoutez au canevas les éléments et liens utiles.
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.
Une fois le projet ouvert, le navigateur crée une carte des imports entre fichiers TypeScript (.ts) et TSX (.tsx). Choisissez dossiers, couches et éléments, masquez les liens superflus et parcourez les dépendances. Une couche regroupe sur le graphe les éléments d’un dossier choisi. Vous voyez ainsi plus facilement d’où vient un import et quelles parties du projet utilisent un composant.
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 contenant le code TypeScript.
- Vérifiez les exclusions et chargez les fichiers source .ts et .tsx.
- Ajoutez au graphe les couches et éléments utiles, puis explorez les imports et utilisations.
Étape 1 / 8
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é.
TypeScript · .ts/.tsx · analyse dans le navigateur
Fonctionnalités
Ce que permet le graphe des imports TypeScript
Dépôts publics et privés
Ouvrez un dépôt public sans connexion. Pour un dépôt privé, utilisez GitHub OAuth.
Couches et sources au choix
Configurez le graphe : une couche affiche les éléments d’un dossier et une source est un élément individuel ajouté au canevas.
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.
Graphe des imports
Explorez les liens entre fichiers et éléments TypeScript, suivez les imports et trouvez le code associé.
Sources isolées
Repérez les fichiers et éléments sans import ni dépendance associée détectés dans le code choisi.
Fichiers source analysés : TypeScript (.ts) et TSX (.tsx).
Quels fichiers le service analyse-t-il ?
Le service analyse les fichiers TypeScript (.ts) et TSX (.tsx) dans le dossier choisi d’un dépôt GitHub. Il convient aux projets React et Next.js, mais aussi à d’autres bases de code TypeScript : aucun framework particulier n’est requis.
Les fichiers JavaScript (.js, .jsx), HTML (.html) et JSON (.json) ne sont pas encore analysés. Vous pouvez exclure les dossiers de compilation, de dépendances et de fichiers générés avant de créer le graphe. Celui-ci montre les liens statiques détectés dans le code choisi ; l’absence d’un lien ne prouve pas qu’un fichier ou composant est inutilisé.
À qui sert un graphe des imports TypeScript ?
- Aux développeurs qui ouvrent un dépôt GitHub pour la première fois et veulent comprendre plus vite sa structure TypeScript.
- 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 la branche et le dossier, puis chargez les fichiers TypeScript.
- 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
Qu’est-ce qu’un graphe des imports et dépendances TypeScript ?
C’est une carte interactive des liens statiques détectés entre fichiers, modules et éléments du code TypeScript choisi. Elle aide à voir quelles parties du projet sont liées.
Faut-il installer un logiciel pour créer le graphe ?
Non. L’outil fonctionne dans le navigateur : ouvrez la page, indiquez un dépôt GitHub, puis choisissez une branche et un dossier avec des fichiers .ts ou .tsx.
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é auquel vous avez accès, puis la branche et le dossier source. Chargez ensuite les fichiers TypeScript ou TSX.
L’analyse d’un projet TypeScript 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 ?
Le service analyse les fichiers TypeScript .ts et TSX .tsx du dossier choisi. Les fichiers .js, .jsx, .html et .json ne sont pas pris en charge actuellement.
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 couches, sources, visibilité et 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 afficher une couche ?
Dans le panneau de gauche, ouvrez « Couches », choisissez un dossier et cliquez sur « Afficher ». Le nombre à côté du chemin indique le nombre de modèles. L’icône œil masque ou affiche la couche ; la croix la retire du canevas.
Comment afficher un composant ?
Dans le panneau de gauche, ouvrez « Sources », choisissez un composant et cliquez sur « Afficher ». Il apparaît comme source distincte. L’icône œil contrôle sa visibilité.
À quoi servent les filtres ?
Les cases au-dessus du canevas affichent ou masquent les sources, couches et fichiers .tsx ou .ts ainsi que leurs liens, sans changer les icônes œil. « Afficher les sources sans lien » met en évidence les éléments isolés. Les cases du panneau latéral, lorsqu’un composant est sélectionné, filtrent seulement sa liste de dépendances.
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 des couches et composants depuis le panneau latéral ?
Sélectionnez un composant sur le canevas ou dans une couche. Dans sa fiche, le sélecteur de dossiers ajoute une couche avec le plus vert et la retire avec le moins rouge. « Ajouter aux sources » affiche le composant comme source ; « Retirer des sources » l’enlève. Les signes près des dépendances gèrent les composants liés.
Graphe de dépendances TypeScript : comprendre plus vite l’architecture d’un projet
Un graphe de dépendances TypeScript 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. Il indique quels fichiers s’importent mutuellement, quelles parties du code sont liées à un composant et où la modification d’un module pourrait toucher le reste du projet. Cette vue aide à découvrir un dépôt GitHub, préparer une refonte et examiner des choix d’architecture.
Le service crée un graphe interactif des imports pour les fichiers TypeScript .ts et TSX .tsx. Choisissez un dépôt GitHub, une branche et un dossier source, puis ajoutez au canevas les couches, éléments et liens utiles. Vous pouvez masquer le superflu, suivre les chaînes d’imports, trouver des modules liés et repérer les parties du code choisi sans dépendance détectée.
L’outil convient aux projets React, Next.js et autres projets TypeScript. Aucun framework particulier n’est requis : ce sont les fichiers .ts et .tsx qui comptent. Les dépôts publics sont accessibles sans connexion à GitHub ; 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 des imports pour comprendre plus vite une application, préparer des modifications et discuter de sa structure avec votre équipe. Ouvrez un projet TypeScript depuis GitHub et explorez son architecture dans votre navigateur.
Créez un graphe de dépendances pour votre projet TypeScript
Ouvrez un dépôt GitHub, choisissez un dossier avec des fichiers .ts et .tsx et explorez les imports, les modules liés et la structure du code. Commencez gratuitement, sans abonnement ni envoi des fichiers au serveur de l’application.
Créer un graphe de dépendancesAucune connexion n’est requise pour analyser un dépôt GitHub public.