← Zurück zum Überblick

Den Knowledge Graph nutzen

Eine interaktive Wissenslandkarte Ihrer Codebase — mit Dashboard, geführten Tours und leistungsstarken Filtern.

01

Was ist ein Knowledge Graph?

Ein Knowledge Graph ist ein Wissensnetzwerk, das Informationen als Netzwerk aus NodesKnoten im Graph. Jeder Node repräsentiert eine Komponente: ein Modul, eine Klasse, eine Funktion, ein Konzept oder eine Konfiguration. (Knoten) und EdgesKanten im Graph. Jede Edge repräsentiert eine Beziehung: imports, extends, calls, depends_on, contains, und viele mehr. (Kanten) darstellt. Im Kontext des Learning Skill sieht das so aus:

🟠

Nodes = Komponenten

Jede Datei, jedes Modul, jede Klasse wird zu einem Knoten. 13 verschiedene Node-Typen decken alle Aspekte einer Codebase ab.

↔️

Edges = Beziehungen

Abhängigkeiten, Datenflüsse, Vererbung — 26 Edge-Typen machen sichtbar, wie Teile zusammenhängen.

📚

Layers = Gruppen

Nodes werden in logische Schichten gruppiert: Frontend, Backend, Datenbank, Infrastruktur. Layers lassen sich ein- und ausblenden.

🎯

Tours = Lernpfade

Geführte Pfade durch den Graph, die wichtige Zusammenhänge Schritt für Schritt erklären.

Der große Vorteil gegenüber linearer Dokumentation: Sie können frei navigieren und Zusammenhänge entdecken, die in einem Text nicht sichtbar wären.

02

Das Dashboard

Das Dashboard ist Ihre zentrale Oberfläche zum Erkunden des Knowledge Graph. Es besteht aus der Graph-Ansicht links und der Sidebar rechts:

Knowledge Graph Dashboard
App.tsx
AuthProvider
Router
API Client
Store
Dashboard

Node-Details

Klicken Sie auf einen Knoten im Graph, um Details zu sehen.

Layer

Core Support

Das gesamte Dashboard ist eine einzige HTML-Datei. Sie können es im Browser öffnen, zoomen, verschieben und Nodes anklicken — alles ohne Server.

03

Tours — Geführte Lernpfade

Tours sind vordefinierte Pfade durch den Knowledge Graph. Sie führen Sie Schritt für Schritt durch die wichtigsten Zusammenhänge — wie ein Audioguide im Museum.

Beispiel-Tour: "Architektur-Überblick"

App.tsx ist der Einstiegspunkt. Hier wird die Anwendung initialisiert: Router, Provider und globaler State werden zusammengeführt. Von hier aus verzweigt sich die gesamte Architektur.

Jeder Tour-Schritt hebt den relevanten Node im Graph hervor, zeigt die zugehörigen Edges und liefert eine Erklärung. So verstehen Sie nicht nur einzelne Teile, sondern auch wie sie zusammenwirken.

Tours werden automatisch vom Learning Skill generiert. Die wichtigste Tour ("Architektur-Überblick") ist immer dabei. Je nach Projektgröße kommen weitere hinzu.

04

Tipps & Tricks

Mit diesen Tipps holen Sie das Maximum aus dem Knowledge Graph Dashboard:

Navigation

Mausrad zum Zoomen, Klick+Ziehen zum Verschieben. Doppelklick auf einen Node zentriert ihn.

Suche

Drücken Sie Ctrl+F oder nutzen Sie das Suchfeld in der Sidebar. Findet Nodes nach Name oder Typ.

Filter

Blenden Sie Layers ein/aus, um sich auf bestimmte Bereiche zu konzentrieren. Ideal bei großen Graphen.

Zoom-Reset

Drücken Sie Home oder den Reset-Button, um zur Gesamtansicht zurückzukehren.

Node-Details

Klick auf einen Node zeigt Details in der Sidebar: Typ, Beschreibung, verbundene Nodes und Code-Referenzen.

Export

Der Graph kann als PNG oder SVG exportiert werden — perfekt für Präsentationen oder Dokumentation.

Pro-Tipp: Starten Sie mit einer Tour, um die Architektur zu verstehen. Danach nutzen Sie die Filter, um gezielt einzelne Bereiche zu erkunden.