An interactive knowledge map of your codebase — with dashboard, guided tours, and powerful filters.
A Knowledge Graph is a knowledge network that represents information as a network of nodesPoints in the graph. Each node represents a component: a module, a class, a function, a concept, or a configuration. and edgesConnections in the graph. Each edge represents a relationship: imports, extends, calls, depends_on, contains, and many more.. In the context of the Learning Skill, this looks like:
Every file, every module, every class becomes a node. 13 different node types cover all aspects of a codebase.
Dependencies, data flows, inheritance — 26 edge types make visible how parts connect.
Nodes are grouped into logical layers: frontend, backend, database, infrastructure. Layers can be toggled on and off.
Guided paths through the graph that explain important relationships step by step.
The major advantage over linear documentation: you can navigate freely and discover connections that would not be visible in a text.
The dashboard is your central interface for exploring the Knowledge Graph. It consists of the graph view on the left and the sidebar on the right:
The entire dashboard is a single HTML file. You can open it in the browser, zoom, pan, and click nodes — all without a server.
Tours are predefined paths through the Knowledge Graph. They guide you step by step through the most important relationships — like an audio guide in a museum.
Each tour step highlights the relevant node in the graph, shows associated edges, and provides an explanation. This way you understand not just individual parts, but also how they interact.
Tours are automatically generated by the Learning Skill. The most important tour ("Architecture Overview") is always included. Depending on project size, more are added.
Get the most out of the Knowledge Graph Dashboard with these tips:
Mouse wheel to zoom, click+drag to pan. Double-click a node to center it.
Press Ctrl+F or use the search field in the sidebar. Finds nodes by name or type.
Toggle layers on/off to focus on specific areas. Ideal for large graphs.
Press Home or the reset button to return to the full view.
Click a node to see details in the sidebar: type, description, connected nodes, and code references.
The graph can be exported as PNG or SVG — perfect for presentations or documentation.
Pro tip: Start with a tour to understand the architecture. Then use filters to explore specific areas.