Gibt es unverbundene Elemente?
Finden Sie Elemente ohne erkannte Beziehungen und prüfen Sie, ob sie verwendet werden.
GitHub · JavaScript/TypeScript · Vue · Python (Testmodus)
Erstellen Sie einen interaktiven Abhängigkeitsgraphen für Ihr GitHub-Projekt im Browser
Wählen Sie Repository, Branch und Ordner. JavaScript/TypeScript analysiert .js, .jsx, .ts und .tsx. Ausgewählte JSON-, CSS/SCSS- und HTML-Dateien werden über erkannte statische Verweise ergänzt. Vue analysiert .vue, JavaScript und TypeScript samt ausdrücklich verknüpften Dateien. Python analysiert .py-Dateien im Testmodus.
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 Abhängigkeitsgraph für ein GitHub-Projekt zeigt
Der Graph zeigt erkannte statische Verbindungen zwischen Projektdateien. Wählen Sie Ansichten, um Abhängigkeiten zu erkunden, gemeinsame und unterschiedliche Dateien zu vergleichen oder mögliche Auswirkungen auf Importierer einzuschätzen.
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.
Wählen Sie einen Analysator: JavaScript/TypeScript, Vue oder Python (Testmodus). JavaScript/TypeScript liest .js, .jsx, .ts und .tsx. Ausgewählte JSON-, CSS/SCSS- und HTML-Dateien werden über erkannte statische Verweise ergänzt. Vue liest .vue, JavaScript und TypeScript mit ausdrücklich verknüpften Dateien. Python liest .py-Dateien im Testmodus.
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 des Projekts.
- Wählen Sie einen Analysator und laden Sie die zugehörigen Dateien: JS/TS, Vue oder Python (Testmodus).
- Wählen Sie eine Ansicht und verfolgen Sie ihre Abhängigkeiten. Fügen Sie weitere Ansichten hinzu, um gemeinsame Elemente und Verbindungen zu vergleichen.
Schritt 1 / 7
Repository öffnen
Geben Sie die URL eines öffentlichen Repositorys ein oder verbinden Sie GitHub für privaten Zugriff.
JavaScript/TypeScript · Vue · Python (Testmodus) · Analyse im Browser
Ansichten und Vergleiche
Die Projektarchitektur auf verschiedenen Wegen erkunden
Standardgraph
Der Standardgraph zeigt die ausgewählten Ansichten und die gefundenen statischen Verbindungen zu erreichbaren Dateien. Mit mehreren Komponenten im Blick lassen sich gemeinsam genutzte Dateien verfolgen und vergleichen. Das erleichtert die Orientierung im Projekt und hilft, die Module für eine Änderung einzugrenzen.
Seitenstruktur
Die Seitenstruktur erkennt heuristisch Page-Komponenten und Default-Exporte aus Dateien namens page.js, page.jsx, page.ts oder page.tsx. Sie ordnet diese um die übrigen Komponenten an und zeigt mögliche Einstiegspunkte sowie deren gefundene statische Verbindungen. Bei Auswahl werden Verbindungen hervorgehoben; tatsächliche Anwendungsrouten werden nicht rekonstruiert.
Projektbaum
Der Projektbaum ordnet Ordner und Komponenten nach ihrer Ablagehierarchie und zeigt keine Abhängigkeitslinien. So lässt sich nachvollziehen, wie das Repository aufgebaut ist und in welchem Ordner eine Komponente liegt, bevor ihre Verbindungen in einer anderen Ansicht untersucht werden.
Auswirkungen von Änderungen
Ausgangspunkt ist eine ausgewählte Komponente. Angezeigt werden ihre direkten Importierer auf Ebene eins und weitere Importierer auf den folgenden Ebenen der rückwärts verfolgten statischen Verbindungen. So lässt sich abschätzen, welche Komponenten vor einer Änderung geprüft werden sollten. Die Ansicht bildet nicht das gesamte Laufzeitverhalten ab.
Dateirangliste
Die Dateirangliste sortiert nach dem gewählten Kriterium: Anzahl eingehender Verbindungen, Anzahl ausgehender Verbindungen oder keine erkannten Verbindungen. Damit lassen sich Dateien finden, von denen viele andere abhängen, Module mit vielen Abhängigkeiten sowie separat Knoten ohne Verbindungen. Viele Verbindungen bedeuten nicht automatisch komplexe Logik; fehlende Verbindungen sollten im Quellcode geprüft werden.
Gemeinsame und einzigartige Dateien vergleichen
Überschneidungen
Überschneidungen zeigen gemeinsame Dateien für jedes Paar und größere Kombinationen. Dateien aus allen drei Ansichten erscheinen auch in den drei Paargruppen.
Einzigartige Dateien
Je Kombination erscheinen Dateien, die mindestens eine, aber nicht alle Ansichten nutzen. Bei A+B+C bleiben Dateien aus einer oder zwei Ansichten; allen drei gemeinsame entfallen.
Funktionen
Möglichkeiten des Projekt-Abhängigkeitsgraphen
Öffentliche und private Repositorys
Öffnen Sie ein öffentliches GitHub-Repository ohne Anmeldung. Für private Repositorys nutzen Sie GitHub OAuth.
Ausgewählte Ansichten erkunden
Wählen Sie eine oder mehrere Komponenten als Ansichten und verfolgen Sie ihre erkannten Abhängigkeiten, einschließlich gemeinsam genutzter Projektteile.
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 erkannte statische Verbindungen in JavaScript/TypeScript-, Vue- und Python-Dateien.
Unverbundene Quellen finden
Finden Sie Dateien und Elemente ohne erkannte Importe oder verwandte Abhängigkeiten im ausgewählten Code.
JavaScript/TypeScript: .js, .jsx, .ts, .tsx sowie ausgewähltes JSON, CSS/SCSS und HTML · Vue: .vue, JS/TS und verknüpfte Dateien · Python: .py (Testmodus).
Welche Dateien analysiert der Dienst?
JavaScript/TypeScript liest .js, .jsx, .ts und .tsx. Ausgewählte JSON-, CSS/SCSS- und HTML-Dateien werden über erkannte statische Verweise ergänzt. Vue liest .vue, JavaScript und TypeScript samt ausdrücklich verknüpften Dateien. Python analysiert .py-Dateien im Testmodus.
Der Graph bildet erkannte statische Verbindungen in den ausgewählten Dateien ab; das Verhalten der Anwendung zur Laufzeit kann er nicht vollständig abbilden. Build-Ausgaben, Abhängigkeiten und generierte Ordner können Sie ausschließen. Eine Datei ohne erkannte Verbindung ist nicht automatisch ungenutzt.
Für wen ist ein Projekt-Abhängigkeitsgraph nützlich?
- Für Entwickler, die ein GitHub-Repository untersuchen und seine Datei- und Modulverbindungen besser 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, Ordner und Analysator; laden Sie JS/TS-, Vue- oder Python-Dateien (.py, Testmodus).
- 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 zeigt ein Abhängigkeitsgraph?
Er zeigt erkannte statische Verbindungen zwischen ausgewählten Projektdateien. So lassen sich Beziehungen nachvollziehen; das Verhalten der Anwendung zur Laufzeit kann er nicht vollständig abbilden.
Muss ich ein Programm installieren?
Nein. Das Werkzeug läuft im Browser. Öffnen Sie ein GitHub-Repository, wählen Sie Branch und Ordner sowie einen Analysator und die zugehörigen 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 und wählen Sie ein zugängliches privates Repository sowie Branch, Ordner, Analysator und Dateien.
Ist die 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?
JavaScript/TypeScript analysiert .js, .jsx, .ts und .tsx; ausgewählte JSON-, CSS/SCSS- und HTML-Dateien werden über erkannte statische Verweise ergänzt. Vue analysiert .vue, JavaScript und TypeScript sowie ausdrücklich verknüpfte Dateien. Python analysiert .py-Dateien im Testmodus. Der Graph zeigt erkannte statische Verbindungen; das Verhalten der Anwendung zur Laufzeit kann er nicht vollständig abbilden.
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 ausgewählten Ansichten, 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 wähle ich eine Ansicht zur Analyse aus?
Wählen Sie in der Seitenleiste eine Komponente und fügen Sie sie Ihren Ansichten hinzu. Der Graph zeigt ihre Abhängigkeitskette und die beteiligten Ordner. Fügen Sie eine weitere Ansicht hinzu, um Architekturen zu vergleichen und gemeinsam genutzte Komponenten zu finden.
Was bewirken die Filter?
Die Filter über der Zeichenfläche blenden ausgewählte Dateitypen und ihre Verbindungen ein oder aus. Bei Auswahl einer Komponente bleiben die übrigen Knoten an ihrem Platz; direkte Verbindungen werden hervorgehoben. Über die Suche finden Sie Dateien und Elemente im Graphen.
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 weitere Ansichten hinzu?
Wählen Sie in der Seitenleiste eine Komponente und fügen Sie sie Ihren Ansichten hinzu. Wiederholen Sie dies für weitere Einstiegspunkte: Jede Architektur erscheint in einer eigenen Zeile, sodass sich gemeinsame Elemente und Verbindungen vergleichen lassen.
Abhängigkeitsgraph für GitHub-Projekte: erkannte Verbindungen erkunden
Ein 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 und wo Änderungen andere Projektteile beeinflussen könnten.
JavaScript/TypeScript analysiert .js, .jsx, .ts und .tsx. Ausgewählte JSON-, CSS/SCSS- und HTML-Dateien werden über erkannte statische Verweise ergänzt. Vue analysiert .vue, JavaScript und TypeScript samt ausdrücklich verknüpften Dateien. Python analysiert .py-Dateien im Testmodus.
Der Graph zeigt erkannte statische Verbindungen in ausgewählten Dateien; das Verhalten der Anwendung zur Laufzeit kann er nicht vollständig abbilden. Ö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 Graphen, um die Projektstruktur zu erkunden, Änderungen vorzubereiten und erkannte Verbindungen im Team zu besprechen.
Erstellen Sie einen Abhängigkeitsgraphen für Ihr GitHub-Projekt
Wählen Sie JavaScript/TypeScript, Vue oder Python (Testmodus). Der Graph zeigt erkannte statische Verbindungen in ausgewählten Dateien, einschließlich ausgewählter JSON-, CSS/SCSS- und HTML-Verweise.
Abhängigkeitsgraph erstellenFür die Analyse eines öffentlichen GitHub-Repositorys ist keine Anmeldung nötig.