Add VitePress documentation site with complete user guides
Covers getting started, repositories, scanning, findings, configuration, SBOM, code graph, impact analysis, DAST, AI chat, issue tracker integration, Docker deployment, environment variables, Keycloak auth, and OpenTelemetry. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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