Gibt es unverbundene Elemente?
Finden Sie Elemente ohne erkannte Beziehungen und prüfen Sie, ob sie verwendet werden.
TypeScript · React · Next.js · Analyse im Browser
Erstellen Sie einen interaktiven Abhängigkeitsgraphen für ein TypeScript-Projekt aus GitHub
Öffnen Sie ein GitHub-Repository und wählen Sie einen Branch sowie den Ordner mit dem Quellcode. Der Dienst erstellt direkt in Ihrem Browser einen interaktiven Graphen der Importe zwischen TypeScript- (.ts) und TSX-Dateien (.tsx).
Verstehen Sie die Projektstruktur schneller, prüfen Sie Modulbeziehungen und schätzen Sie die Folgen von Änderungen vor einem Refactoring ab.
Öffentliche und private Repositorys · Quellcode wird im Browser analysiert und nicht an den Anwendungsserver gesendet
Für öffentliche Repositorys ist keine GitHub-Anmeldung nötig.
Kein Code-UploadDateien gelangen direkt von GitHub in Ihren Browser
Anpassbarer GraphZeigen Sie nur die benötigten Projektteile
Analyse im BrowserDer Graph entsteht lokal, ohne Quelldateien an den Server zu senden
Kostenloser ZugangOhne Abo oder Zahlungskarte
Wozu dient der Graph?
Was ein TypeScript-Import- und Abhängigkeitsgraph zeigt
In einem großen TypeScript-Projekt ist schwer zu erkennen, wie Dateien, Komponenten, Typen und Funktionen zusammenhängen. Der Importgraph zeigt erkannte Abhängigkeiten und hilft einzuschätzen, welche Teile eine Moduländerung betreffen könnte. Beginnen Sie mit einem Ordner und fügen Sie benötigte Elemente und Verbindungen hinzu.
Welche Projektteile betrifft eine Änderung?
Prüfen Sie eingehende und ausgehende Verbindungen eines Moduls vor dem Refactoring.
Woher kommt eine Abhängigkeit?
Verfolgen Sie Importketten im Graphen und in der Liste verknüpfter Elemente.
Nach dem Öffnen des Projekts erstellt Ihr Browser eine Importkarte für TypeScript- (.ts) und TSX-Dateien (.tsx). Wählen Sie Ordner, Ebenen und Elemente, blenden Sie unnötige Verbindungen aus und folgen Sie den Abhängigkeiten. Eine Ebene fasst die Elemente eines ausgewählten Ordners im Graphen zusammen. So sehen Sie leichter, woher ein Import stammt und welche Projektteile eine Komponente verwenden.
So funktioniert es
So erstellen Sie einen Abhängigkeitsgraphen aus einem GitHub-Repository
- Öffnen Sie ein öffentliches GitHub-Repository per Link oder melden Sie sich für ein privates an.
- Wählen Sie Repository, Branch und Stammordner mit TypeScript-Code.
- Prüfen Sie die Ausschlüsse und laden Sie die .ts- und .tsx-Quelldateien.
- Fügen Sie benötigte Ebenen und Elemente hinzu und untersuchen Sie Importe und Verwendungen.
Schritt 1 / 8
Repository öffnen
Geben Sie die URL eines öffentlichen Repositorys ein oder verbinden Sie GitHub für privaten Zugriff.
TypeScript · .ts/.tsx · Analyse im Browser
Funktionen
Möglichkeiten des TypeScript-Importgraphen
Öffentliche und private Repositorys
Öffnen Sie ein öffentliches GitHub-Repository ohne Anmeldung. Für private Repositorys nutzen Sie GitHub OAuth.
Ebenen und Quellen auswählen
Gestalten Sie den Graphen: Eine Ebene zeigt Elemente eines Ordners, eine Quelle ist ein einzelnes Element auf der Zeichenfläche.
Analyse im Browser
Quelldateien gelangen von GitHub in Ihren Browser, wo der Graph entsteht. Sie werden weder zur Analyse an den Anwendungsserver gesendet noch in dessen Datenbank gespeichert.
Kostenloser Zugang
Starten Sie ohne Abo oder Zahlungskarte. API-Limits und Zugriffsregeln von GitHub können gelten.
Importgraph
Untersuchen Sie Verbindungen zwischen TypeScript-Dateien und -Elementen, folgen Sie Importen und finden Sie verwandten Code.
Unverbundene Quellen finden
Finden Sie Dateien und Elemente ohne erkannte Importe oder verwandte Abhängigkeiten im ausgewählten Code.
Analysierte Quelldateien: TypeScript (.ts) und TSX (.tsx).
Welche Dateien analysiert der Dienst?
Der Dienst analysiert TypeScript- (.ts) und TSX-Dateien (.tsx) im ausgewählten Ordner eines GitHub-Repositorys. Er eignet sich für React- und Next.js-Projekte, aber auch für andere TypeScript-Codebasen: Ein bestimmtes Framework ist nicht nötig.
JavaScript- (.js, .jsx), HTML- (.html) und JSON-Dateien (.json) werden derzeit nicht analysiert. Build-Ausgaben, Abhängigkeiten und generierte Ordner können Sie vorab ausschließen. Der Graph zeigt erkannte statische Verbindungen im ausgewählten Code; eine fehlende Verbindung beweist nicht, dass eine Datei oder Komponente ungenutzt ist.
Für wen ist ein TypeScript-Importgraph nützlich?
- Für Entwickler, die ein GitHub-Repository erstmals öffnen und seine TypeScript-Struktur schneller verstehen möchten.
- Für Teams vor einem Refactoring, um verknüpfte Module und mögliche Folgen von Änderungen zu erkennen.
- Für Code-Reviewer, die die Beziehungen einer geänderten Komponente zum Rest der Anwendung prüfen.
- Für technische Leitungen und Architekten, die die Anwendung anhand einer Abhängigkeitskarte statt nur eines Dateibaums besprechen.
Sicherheit
So behandelt der Dienst Quellcode und GitHub-Zugriff
Öffentliche Repositorys lassen sich ohne Anmeldung öffnen. Für private Repositorys wird GitHub OAuth genutzt. Ihr Browser lädt ausgewählte Quelldateien von GitHub und erstellt den Graphen lokal. Der Anwendungsserver tauscht den Autorisierungscode gegen ein Token aus, erhält jedoch keine Projektdateien zur Analyse.
Importgraph und Analyse entstehen in Ihrem Browser
Quelldateien werden nicht an den Server gesendet oder in seiner Datenbank gespeichert
Neuladen entfernt ausgewählte Quelldateien aus dem Speicher des Tabs
Neuladen löscht den geladenen Graphen und die Autorisierung
Für private Repositorys wird GitHub OAuth verwendet
Ausgewählte Quelldateien gelangen direkt von GitHub in Ihren Browser
Datenübertragung prüfen
So prüfen Sie, dass der Quellcode nicht an den Server gesendet wird
- Öffnen Sie die Entwicklertools Ihres Browsers und wechseln Sie zu Network.
- Laden Sie die Seite neu und öffnen Sie den Explorer.
- Geben Sie die URL eines öffentlichen Repositorys ein oder melden Sie sich für ein privates an.
- Wählen Sie Branch und Ordner und laden Sie die TypeScript-Dateien.
- Prüfen Sie die Anfrageadressen: Dateien kommen von GitHub. Der Anwendungsserver übernimmt OAuth, erhält aber keine Projektdateien.
Fragen und Antworten
Häufige Fragen zum Abhängigkeitsgraphen
Was ist ein TypeScript-Import- und Abhängigkeitsgraph?
Eine interaktive Karte erkannter statischer Verbindungen zwischen Dateien, Modulen und Elementen des ausgewählten TypeScript-Codes. Sie zeigt, welche Projektteile zusammenhängen.
Muss ich ein Programm installieren?
Nein. Das Werkzeug läuft im Browser. Öffnen Sie die Seite, geben Sie ein GitHub-Repository an und wählen Sie Branch und Ordner mit .ts- oder .tsx-Dateien.
Wird Quellcode an den Anwendungsserver gesendet?
Nein, Quelldateien werden dort nicht analysiert. Der Browser lädt den Code von GitHub und erstellt den Graphen lokal. Bei privaten Repositorys übernimmt der Server einen Teil der OAuth-Autorisierung.
Wie erstelle ich einen Graphen für ein privates Repository?
Melden Sie sich mit GitHub OAuth an, wählen Sie ein zugängliches privates Repository sowie Branch und Quellordner. Laden Sie anschließend die TypeScript- oder TSX-Dateien.
Ist die TypeScript-Analyse kostenlos?
Für den Einstieg brauchen Sie weder Abo noch Zahlungskarte. GitHub-API-Limits sowie Konto- und Repository-Einstellungen können den Zugriff begrenzen.
Was geschieht nach dem Neuladen mit dem Graphen?
Geladener Graph, ausgewählte Elemente und Autorisierungstoken werden aus dem Tab-Speicher gelöscht. Wählen Sie Repository, Branch und Ordner erneut, um die Analyse zu wiederholen.
Welche Dateien kann ich analysieren?
Analysiert werden TypeScript-Dateien .ts und TSX-Dateien .tsx im ausgewählten Ordner. .js, .jsx, .html und .json sind derzeit nicht enthalten.
Wie prüfe ich, dass der Code nicht auf dem Server gespeichert wird?
Öffnen Sie DevTools → Network und prüfen Sie die Anfragen. Quelldateien kommen von GitHub in den Browser. Der Server übernimmt OAuth, erhält aber keine Dateiinhalte.
Bedienung
Abhängigkeitsgraph nutzen und Zeichenfläche anpassen
Wie speichere und lade ich Einstellungen?
Klicken Sie nach dem Laden auf „Exportieren“, um eine JSON-Datei mit Ebenen, Quellen, Sichtbarkeit und Filtern zu speichern. Zum Wiederherstellen laden Sie dasselbe Repository, denselben Branch und Stammordner, klicken auf „Importieren“, wählen die Datei und bestätigen das Ersetzen. Quellcode ist nicht enthalten.
Wie zeige ich eine Ebene an?
Öffnen Sie links „Ebenen“, wählen Sie einen Ordner und klicken Sie auf „Anzeigen“. Die Zahl neben dem Pfad zeigt die Modellanzahl. Das Augensymbol blendet die Ebene aus oder ein, das Kreuz entfernt sie von der Zeichenfläche.
Wie zeige ich eine Komponente an?
Öffnen Sie links „Quellen“, wählen Sie eine Komponente und klicken Sie auf „Anzeigen“. Die Komponente erscheint als eigene Quelle; das Augensymbol steuert ihre Sichtbarkeit.
Was bewirken die Filter?
Die Kontrollkästchen über der Zeichenfläche blenden Quellen, Ebenen, .tsx- und .ts-Dateien samt Verbindungen ein oder aus, ohne die Augensymbole zu ändern. „Unverbundene Quellen anzeigen“ markiert Elemente ohne erkannte Beziehungen. Bei ausgewählter Komponente filtern die Kästchen in der Seitenleiste nur die Abhängigkeitsliste.
Wie funktioniert die Suche?
Geben Sie einen Namen oder Pfad in „Komponente suchen“ über der Zeichenfläche ein. Treffer werden markiert, andere Modelle bleiben sichtbar. Leeren Sie das Feld, um die Markierung zu entfernen.
Wie füge ich Ebenen und Komponenten über die Seitenleiste hinzu?
Wählen Sie eine Komponente auf der Zeichenfläche oder in einer Ebene. In ihrer Karte fügt das grüne Plus im Ordnerwähler eine Ebene hinzu, das rote Minus entfernt sie. „Zu Quellen hinzufügen“ zeigt die Komponente als Quelle; „Aus Quellen entfernen“ nimmt sie zurück. Plus und Minus neben Abhängigkeiten verwalten verbundene Komponenten.
TypeScript-Abhängigkeitsgraph: Projektarchitektur schneller verstehen
Ein TypeScript-Abhängigkeitsgraph zeigt die Struktur einer Anwendung nicht nur als Liste von Ordnern und Dateien, sondern als Karte erkannter Modulverbindungen. Er zeigt, welche Dateien einander importieren, welche Codeteile mit einer ausgewählten Komponente zusammenhängen und wo eine Moduländerung andere Projektteile beeinflussen könnte. Das hilft beim Kennenlernen eines GitHub-Repositorys, bei der Vorbereitung eines Refactorings und bei Architekturentscheidungen.
Der Dienst erstellt einen interaktiven Importgraphen für TypeScript-Dateien .ts und TSX-Dateien .tsx. Wählen Sie ein GitHub-Repository, einen Branch und einen Quellordner; fügen Sie dann die gewünschten Ebenen, Elemente und Verbindungen hinzu. Sie können Unwichtiges ausblenden, Importketten verfolgen, verwandte Module finden und Stellen ohne erkannte Abhängigkeiten entdecken.
Das Werkzeug eignet sich für React-, Next.js- und andere TypeScript-Projekte. Ein bestimmtes Framework ist nicht erforderlich; entscheidend sind .ts- und .tsx-Dateien. Öffentliche Repositorys lassen sich ohne GitHub-Anmeldung untersuchen, private erfordern GitHub OAuth. Die Quelldateien gelangen von GitHub in Ihren Browser, wo der Graph entsteht.
Nutzen Sie den Importgraphen, um eine Anwendung schneller zu verstehen, Änderungen vorzubereiten und die Struktur im Team zu besprechen. Öffnen Sie ein TypeScript-Projekt aus GitHub und erkunden Sie seine Architektur direkt im Browser.
Erstellen Sie einen Abhängigkeitsgraphen für Ihr TypeScript-Projekt
Öffnen Sie ein GitHub-Repository, wählen Sie einen Ordner mit .ts- und .tsx-Dateien und untersuchen Sie Importe, verwandte Module und die Codestruktur. Starten Sie kostenlos, ohne Abo und ohne Quelldateien an den Anwendungsserver zu senden.
Abhängigkeitsgraph erstellenFür die Analyse eines öffentlichen GitHub-Repositorys ist keine Anmeldung nötig.