docs: added vite-press docs (#4)
Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com> Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
92
docs/features/graph.md
Normal file
92
docs/features/graph.md
Normal file
@@ -0,0 +1,92 @@
|
||||
# Code Knowledge Graph
|
||||
|
||||
The Code Knowledge Graph feature parses your repository source code and builds an interactive graph of symbols (functions, classes, modules) and their relationships (calls, imports, inheritance).
|
||||
|
||||
## Graph Index
|
||||
|
||||
Navigate to **Code Graph** in the sidebar to see all repositories. Click a repository card to open its graph explorer.
|
||||
|
||||
## Building a Graph
|
||||
|
||||
Before exploring, you need to build the graph:
|
||||
|
||||
1. Open the graph explorer for a repository
|
||||
2. Click **Build Graph**
|
||||
3. The agent parses all source files and constructs the graph
|
||||
4. A spinner shows build progress
|
||||
|
||||
The graph builder supports these languages:
|
||||
- Rust
|
||||
- TypeScript
|
||||
- JavaScript
|
||||
- Python
|
||||
|
||||
## Graph Explorer
|
||||
|
||||
The graph explorer provides an interactive network visualization.
|
||||
|
||||
### Canvas
|
||||
|
||||
The main area renders an interactive network diagram using vis-network:
|
||||
|
||||
- **Nodes** represent code symbols (functions, classes, structs, enums, traits, modules, files)
|
||||
- **Edges** represent relationships between symbols
|
||||
- Nodes are **color-coded by community** — clusters of highly connected symbols detected using Louvain community detection
|
||||
- Pan by dragging the background, zoom with scroll wheel
|
||||
|
||||
### Node Types
|
||||
|
||||
| Type | Description |
|
||||
|------|-------------|
|
||||
| Function | Standalone functions |
|
||||
| Method | Methods on classes/structs |
|
||||
| Class | Classes (TypeScript, Python) |
|
||||
| Struct | Structs (Rust) |
|
||||
| Enum | Enumerations |
|
||||
| Interface | Interfaces (TypeScript) |
|
||||
| Trait | Traits (Rust) |
|
||||
| Module | Modules and namespaces |
|
||||
| File | Source files |
|
||||
|
||||
### Edge Types
|
||||
|
||||
| Type | Description |
|
||||
|------|-------------|
|
||||
| Calls | Function/method invocation |
|
||||
| Imports | Module or symbol import |
|
||||
| Inherits | Class inheritance |
|
||||
| Implements | Interface/trait implementation |
|
||||
| Contains | Parent-child containment (module contains function) |
|
||||
| TypeRef | Type reference or usage |
|
||||
|
||||
### Statistics
|
||||
|
||||
The statistics panel shows:
|
||||
- Total node and edge count
|
||||
- Number of detected communities
|
||||
- Languages found in the repository
|
||||
- File tree of the codebase
|
||||
|
||||
### Search
|
||||
|
||||
Search for symbols by name:
|
||||
|
||||
1. Type at least 2 characters in the search box
|
||||
2. Matching symbols appear in a dropdown
|
||||
3. Click a result to highlight it on the canvas and open the inspector
|
||||
|
||||
### Code Inspector
|
||||
|
||||
When you click a node (on the canvas or from search), the inspector panel shows:
|
||||
|
||||
- **Symbol name** and kind (function, class, etc.)
|
||||
- **File path** with line range
|
||||
- **Source code** excerpt from the file
|
||||
- **Connected nodes** — what this symbol calls, what calls it, etc.
|
||||
|
||||
## Use Cases
|
||||
|
||||
- **Onboarding** — Understand unfamiliar codebase structure at a glance
|
||||
- **Architecture review** — Identify tightly coupled modules and circular dependencies
|
||||
- **Security** — Trace data flow from entry points to sensitive operations
|
||||
- **Refactoring** — See what depends on code you plan to change
|
||||
Reference in New Issue
Block a user