interactive-report.html•27 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeGraph Architecture - Interactive Report</title>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
// Configure Mermaid with interactivity enabled
mermaid.initialize({
startOnLoad: true,
securityLevel: 'loose', // Enable click events
theme: 'default',
themeVariables: {
primaryColor: '#e3f2fd',
primaryTextColor: '#1976d2',
primaryBorderColor: '#1976d2',
lineColor: '#666',
sectionBkgColor: '#f5f5f5',
altSectionBkgColor: '#fff',
gridColor: '#ddd',
secondaryColor: '#e8f5e8',
tertiaryColor: '#fff3e0'
},
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'cardinal'
},
architecture: {
useMaxWidth: true
}
});
// Navigation functions
window.navigateToComponent = function(component) {
const section = document.getElementById(`section-${component}`);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
showComponentDetails(component);
}
};
window.showComponentDetails = function(component) {
const details = {
'core': {
name: 'codegraph-core',
description: 'Foundation crate providing core types, traits, and shared functionality',
features: ['Error handling with thiserror', 'Configuration management', 'Memory management utilities', 'Cross-platform support'],
dependencies: ['tokio', 'serde', 'anyhow', 'uuid']
},
'vector': {
name: 'codegraph-vector',
description: 'Vector storage and similarity search using FAISS',
features: ['FAISS integration', 'OpenAI embeddings', 'Vector similarity search', 'Persistent storage'],
dependencies: ['faiss', 'ndarray', 'reqwest', 'memmap2']
},
'graph': {
name: 'codegraph-graph',
description: 'Graph data structures and RocksDB storage',
features: ['RocksDB persistence', 'Graph algorithms', 'Batch operations', 'Column families'],
dependencies: ['rocksdb', 'crossbeam', 'parking_lot']
},
'parser': {
name: 'codegraph-parser',
description: 'Tree-sitter based code parsing for multiple languages',
features: ['Multi-language support', 'AST generation', 'Syntax highlighting', 'Code analysis'],
dependencies: ['tree-sitter', 'tree-sitter-rust', 'tree-sitter-python', 'tree-sitter-javascript']
},
'api': {
name: 'codegraph-api',
description: 'REST API server using Axum with GraphQL support',
features: ['REST endpoints', 'GraphQL API', 'WebSocket support', 'Authentication'],
dependencies: ['axum', 'async-graphql', 'tower', 'hyper']
},
'cache': {
name: 'codegraph-cache',
description: 'Memory cache with dashboard and profiling capabilities',
features: ['Memory management', 'Performance profiling', 'Cache dashboard', 'Optimization tools'],
dependencies: ['dashmap', 'memmap2', 'parking_lot']
}
};
const info = details[component];
if (info) {
alert(`${info.name}\n\n${info.description}\n\nKey Features:\n• ${info.features.join('\n• ')}\n\nMain Dependencies:\n• ${info.dependencies.join('\n• ')}`);
}
};
window.showLayerInfo = function(layer) {
const layerInfo = {
'foundation': 'Core foundation providing types, traits, and zero-copy serialization',
'storage': 'Persistent storage layer with RocksDB, FAISS, and memory caching',
'processing': 'Code parsing, Git integration, and concurrent processing',
'api': 'Web API layer with REST, GraphQL, MCP protocol support'
};
alert(`${layer.toUpperCase()} LAYER\n\n${layerInfo[layer]}`);
};
window.showTechDetails = function(tech) {
const techInfo = {
'tokio': 'Asynchronous runtime for Rust providing async/await support',
'axum': 'Modern web framework built on Hyper and Tower',
'rocksdb': 'High-performance embedded database for key-value storage',
'faiss': 'Library for efficient similarity search and clustering',
'mermaid': 'JavaScript diagramming library for creating flowcharts and diagrams'
};
if (techInfo[tech]) {
alert(`${tech.toUpperCase()}\n\n${techInfo[tech]}`);
}
};
</script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
background: white;
border-radius: 15px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.header h1 {
color: #2c3e50;
font-size: 2.5em;
margin-bottom: 10px;
font-weight: 300;
}
.header p {
color: #7f8c8d;
font-size: 1.2em;
margin: 0;
}
.nav-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.nav-btn {
background: linear-gradient(45deg, #3498db, #2980b9);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
.section {
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.section h2 {
color: #2c3e50;
font-size: 1.8em;
margin-bottom: 20px;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
.diagram-container {
background: #fafafa;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
border: 1px solid #ecf0f1;
}
.diagram-title {
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.1em;
}
.description {
background: #e8f4fd;
border-left: 4px solid #3498db;
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.description p {
margin: 0;
color: #2c3e50;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.feature-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-card h3 {
margin: 0 0 10px 0;
font-size: 1.2em;
}
.feature-card p {
margin: 0;
opacity: 0.9;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
border: 2px solid #ecf0f1;
transition: border-color 0.3s ease;
}
.stat-card:hover {
border-color: #3498db;
}
.stat-number {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
display: block;
}
.stat-label {
color: #7f8c8d;
font-size: 0.9em;
margin-top: 5px;
}
.interactive-notice {
background: linear-gradient(45deg, #27ae60, #2ecc71);
color: white;
padding: 15px 20px;
border-radius: 10px;
margin: 20px 0;
text-align: center;
font-weight: 500;
}
.footer {
text-align: center;
padding: 40px 20px;
color: #7f8c8d;
font-style: italic;
}
@media (max-width: 768px) {
.container { padding: 10px; }
.header { padding: 20px; }
.header h1 { font-size: 2em; }
.nav-buttons { gap: 10px; }
.nav-btn { padding: 10px 20px; font-size: 13px; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🏗️ CodeGraph Architecture</h1>
<p>Interactive Architecture Visualization & Documentation</p>
<div class="nav-buttons">
<a href="#section-overview" class="nav-btn">📊 System Overview</a>
<a href="#section-dependencies" class="nav-btn">🔗 Dependencies</a>
<a href="#section-dataflow" class="nav-btn">🌊 Data Flow</a>
<a href="#section-performance" class="nav-btn">⚡ Performance</a>
<a href="#section-deployment" class="nav-btn">🚀 Deployment</a>
</div>
<div class="interactive-notice">
🖱️ Click on diagram components for detailed information
</div>
</div>
<div class="stats-grid">
<div class="stat-card">
<span class="stat-number">15</span>
<div class="stat-label">Total Crates</div>
</div>
<div class="stat-card">
<span class="stat-number">7</span>
<div class="stat-label">Languages Supported</div>
</div>
<div class="stat-card">
<span class="stat-number">4</span>
<div class="stat-label">Architecture Layers</div>
</div>
<div class="stat-card">
<span class="stat-number">3</span>
<div class="stat-label">API Types</div>
</div>
</div>
<!-- System Overview Section -->
<div id="section-overview" class="section">
<h2>🏛️ System Architecture Overview</h2>
<div class="description">
<p>CodeGraph is a sophisticated code analysis and embedding system built in Rust. The architecture follows a layered approach with clear separation of concerns, enabling scalable code understanding and analysis.</p>
</div>
<div class="diagram-container">
<div class="diagram-title">High-Level Architecture (Click components for details)</div>
<pre class="mermaid">
graph TB
subgraph "Client Layer"
WebUI[Web UI]
CLI[CLI Client]
SDK[SDK/API Clients]
end
subgraph "API Gateway"
API[CodeGraph API<br/>Axum + GraphQL]
Auth[Authentication<br/>JWT]
RateLimit[Rate Limiting<br/>Governor]
end
subgraph "Core Services"
Parser[Code Parser<br/>Tree-sitter]
Vector[Vector Engine<br/>FAISS]
Graph[Graph Store<br/>RocksDB]
Cache[Cache Layer<br/>Memory Cache]
end
subgraph "Processing Layer"
Queue[Task Queue<br/>Async Processing]
Git[Git Integration<br/>Repository Scanner]
MCP[MCP Server<br/>Protocol Handler]
end
subgraph "Storage Layer"
RocksDB[(RocksDB<br/>Graph Storage)]
FAISS[(FAISS Index<br/>Vector Search)]
MemCache[(Memory Cache<br/>Hot Data)]
end
subgraph "Infrastructure"
Monitor[Monitoring<br/>Prometheus]
Trace[Tracing<br/>OpenTelemetry]
Config[Configuration<br/>TOML/ENV]
end
%% Client connections
WebUI --> API
CLI --> API
SDK --> API
%% API Gateway flow
API --> Auth
API --> RateLimit
API --> Parser
API --> Vector
API --> Graph
API --> Cache
%% Service integrations
Parser --> Queue
Vector --> FAISS
Graph --> RocksDB
Cache --> MemCache
%% Processing layer
Queue --> Git
Queue --> MCP
Git --> Parser
MCP --> API
%% Infrastructure connections
API --> Monitor
API --> Trace
Config --> API
Config --> Parser
Config --> Vector
Config --> Graph
click Parser call showComponentDetails("parser")
click Vector call showComponentDetails("vector")
click Graph call showComponentDetails("graph")
click Cache call showComponentDetails("cache")
click API call showComponentDetails("api")
click RocksDB call showTechDetails("rocksdb")
click FAISS call showTechDetails("faiss")
%% Styling
classDef client fill:#e1f5fe
classDef api fill:#f3e5f5
classDef core fill:#e8f5e8
classDef storage fill:#fff3e0
classDef infra fill:#fce4ec
class WebUI,CLI,SDK client
class API,Auth,RateLimit api
class Parser,Vector,Graph,Cache,Queue,Git,MCP core
class RocksDB,FAISS,MemCache storage
class Monitor,Trace,Config infra
</pre>
</div>
</div>
<!-- Component Dependencies Section -->
<div id="section-dependencies" class="section">
<h2>🔗 Component Dependencies</h2>
<div class="description">
<p>The dependency graph shows the relationships between all 15 crates in the CodeGraph workspace. Each layer builds upon the previous, with codegraph-core serving as the foundation.</p>
</div>
<div class="diagram-container">
<div class="diagram-title">Crate Dependency Graph (Click crates for information)</div>
<pre class="mermaid">
graph TB
subgraph "Foundation Layer"
core[codegraph-core<br/>Types & Traits]
zerocopy[codegraph-zerocopy<br/>Serialization]
end
subgraph "Storage Layer"
graph_db[codegraph-graph<br/>RocksDB Storage]
vector[codegraph-vector<br/>FAISS Search]
cache[codegraph-cache<br/>Memory Cache]
end
subgraph "Processing Layer"
parser[codegraph-parser<br/>Tree-sitter]
concurrent[codegraph-concurrent<br/>Parallel Processing]
queue[codegraph-queue<br/>Task Queue]
git[codegraph-git<br/>Git Integration]
end
subgraph "API Layer"
api[codegraph-api<br/>REST/GraphQL]
mcp[codegraph-mcp<br/>MCP Protocol]
lb[codegraph-lb<br/>Load Balancer]
rag_server[core-rag-mcp-server<br/>RAG Server]
end
%% Dependencies
core --> graph_db
core --> vector
core --> cache
core --> parser
core --> concurrent
core --> queue
core --> git
core --> api
core --> mcp
core --> lb
zerocopy --> cache
zerocopy --> graph_db
graph_db --> api
vector --> api
cache --> api
parser --> api
mcp --> rag_server
parser --> rag_server
vector --> rag_server
concurrent --> queue
queue --> api
git --> parser
git --> api
lb --> api
%% Click events
click core call showComponentDetails("core")
click vector call showComponentDetails("vector")
click graph_db call showComponentDetails("graph")
click parser call showComponentDetails("parser")
click api call showComponentDetails("api")
click cache call showComponentDetails("cache")
%% Styling
classDef coreStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef storageStyle fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
classDef processingStyle fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
classDef apiStyle fill:#fff3e0,stroke:#e65100,stroke-width:2px
class core,zerocopy coreStyle
class graph_db,vector,cache storageStyle
class parser,concurrent,queue,git processingStyle
class api,mcp,lb,rag_server apiStyle
</pre>
</div>
</div>
<!-- Data Flow Section -->
<div id="section-dataflow" class="section">
<h2>🌊 Data Flow Architecture</h2>
<div class="description">
<p>This sequence diagram illustrates how data flows through the system during a typical code analysis request, showing the interaction between different components.</p>
</div>
<div class="diagram-container">
<div class="diagram-title">Request Processing Flow</div>
<pre class="mermaid">
sequenceDiagram
participant Client as Client Applications
participant API as API Gateway
participant Auth as Authentication
participant Parser as Code Parser
participant Graph as Graph Store
participant Vector as Vector Engine
participant Cache as Cache Layer
participant External as External APIs
Client->>API: Request with JWT
API->>Auth: Validate token
Auth-->>API: Token valid
API->>Cache: Check cached result
alt Cache hit
Cache-->>API: Return cached data
API-->>Client: Response
else Cache miss
API->>Parser: Parse code files
Parser->>External: Fetch Git Repository
External-->>Parser: Source Code
Parser->>Graph: Store AST nodes
Parser->>Vector: Generate embeddings
Vector->>External: OpenAI API Call
External-->>Vector: Embeddings
Vector->>Graph: Link vector indices
Graph-->>API: Analysis complete
API->>Cache: Store result
API-->>Client: Response
end
Note over Parser,Vector: Parallel processing for large codebases
Note over Cache: TTL-based invalidation
</pre>
</div>
</div>
<!-- Performance Section -->
<div id="section-performance" class="section">
<h2>⚡ Performance Optimization</h2>
<div class="description">
<p>CodeGraph employs multiple optimization strategies across different layers to achieve high performance for code analysis and vector search operations.</p>
</div>
<div class="feature-grid">
<div class="feature-card" onclick="alert('Zero-copy serialization using rkyv archives eliminates intermediate allocations and provides direct memory access to serialized data.')">
<h3>🚀 Zero-Copy Serialization</h3>
<p>rkyv archives for high-performance data access</p>
</div>
<div class="feature-card" onclick="alert('Parallel processing using Rayon and Crossbeam for concurrent operations on multi-core systems.')">
<h3>⚡ Parallel Processing</h3>
<p>Multi-threaded analysis and indexing</p>
</div>
<div class="feature-card" onclick="alert('Multi-level caching with memory cache, disk cache, and distributed cache for optimal performance.')">
<h3>💾 Smart Caching</h3>
<p>Multi-level cache hierarchy</p>
</div>
<div class="feature-card" onclick="alert('Memory mapping for large files and FAISS indices, reducing memory footprint and improving access speed.')">
<h3>📊 Memory Mapping</h3>
<p>Efficient large file handling</p>
</div>
</div>
<div class="diagram-container">
<div class="diagram-title">Performance Optimization Layers</div>
<pre class="mermaid">
flowchart TD
subgraph "Request Layer"
A[HTTP Request] --> B[Load Balancer]
B --> C[Rate Limiting]
C --> D[Request Router]
end
subgraph "Caching Layer"
D --> E{Memory Cache}
E -->|Hit| F[Return Cached]
E -->|Miss| G[Process Request]
end
subgraph "Processing Layer"
G --> H[Thread Pool]
H --> I[Queue System]
I --> J[Concurrent Workers]
end
subgraph "Storage Optimization"
J --> K{Zero-Copy?}
K -->|Yes| L[Direct Memory Access]
K -->|No| M[Standard Serialization]
L --> N[RocksDB]
M --> N
J --> O[FAISS Index]
end
subgraph "Response Optimization"
N --> P[Compression]
O --> P
P --> Q[Streaming Response]
Q --> R[Client Response]
end
click B call showTechDetails("balancer")
click E call showTechDetails("cache")
click H call showTechDetails("tokio")
click N call showTechDetails("rocksdb")
click O call showTechDetails("faiss")
%% Styling
classDef requestStyle fill:#e3f2fd,stroke:#0d47a1
classDef cacheStyle fill:#f1f8e9,stroke:#33691e
classDef processStyle fill:#fce4ec,stroke:#880e4f
classDef storageStyle fill:#fff8e1,stroke:#ff6f00
classDef responseStyle fill:#f3e5f5,stroke:#4a148c
class A,B,C,D requestStyle
class E,F,G cacheStyle
class H,I,J processStyle
class K,L,M,N,O storageStyle
class P,Q,R responseStyle
</pre>
</div>
</div>
<!-- Deployment Section -->
<div id="section-deployment" class="section">
<h2>🚀 Deployment Architecture</h2>
<div class="description">
<p>The deployment architecture shows how CodeGraph components can be distributed across multiple tiers for scalability and reliability in production environments.</p>
</div>
<div class="diagram-container">
<div class="diagram-title">Production Deployment Topology</div>
<pre class="mermaid">
graph TB
subgraph "Load Balancer Tier"
LB[Load Balancer<br/>codegraph-lb]
Health[Health Checks<br/>HTTP/TCP]
end
subgraph "Application Tier"
API1[API Instance 1<br/>codegraph-api]
API2[API Instance 2<br/>codegraph-api]
API3[API Instance N<br/>codegraph-api]
end
subgraph "Processing Tier"
Worker1[Worker Node 1<br/>Parser + Vector]
Worker2[Worker Node 2<br/>Parser + Vector]
Queue[Message Queue<br/>Redis/RabbitMQ]
end
subgraph "Storage Tier"
RocksCluster[RocksDB Cluster<br/>Sharded Storage]
FAISSCluster[FAISS Cluster<br/>Distributed Index]
CacheCluster[Cache Cluster<br/>Redis/Memcached]
end
subgraph "Monitoring Tier"
Prometheus[Prometheus<br/>Metrics Collection]
Grafana[Grafana<br/>Visualization]
Jaeger[Jaeger<br/>Distributed Tracing]
end
%% Load balancing
LB --> API1
LB --> API2
LB --> API3
Health --> API1
Health --> API2
Health --> API3
%% API to processing
API1 --> Queue
API2 --> Queue
API3 --> Queue
Queue --> Worker1
Queue --> Worker2
%% Storage connections
API1 --> RocksCluster
API2 --> RocksCluster
API3 --> RocksCluster
Worker1 --> FAISSCluster
Worker2 --> FAISSCluster
API1 --> CacheCluster
API2 --> CacheCluster
API3 --> CacheCluster
%% Monitoring connections
API1 --> Prometheus
API2 --> Prometheus
API3 --> Prometheus
Worker1 --> Prometheus
Worker2 --> Prometheus
Prometheus --> Grafana
click LB call showTechDetails("balancer")
click Queue call showTechDetails("queue")
click RocksCluster call showTechDetails("rocksdb")
click FAISSCluster call showTechDetails("faiss")
click Prometheus call showTechDetails("monitoring")
%% Styling
classDef lb fill:#e3f2fd
classDef app fill:#e8f5e8
classDef processing fill:#fff3e0
classDef storage fill:#f3e5f5
classDef monitoring fill:#fce4ec
class LB,Health lb
class API1,API2,API3 app
class Worker1,Worker2,Queue processing
class RocksCluster,FAISSCluster,CacheCluster storage
class Prometheus,Grafana,Jaeger monitoring
</pre>
</div>
</div>
<div class="footer">
<p>📊 Generated by CodeGraph Documentation Specialist - Interactive Architecture Report</p>
<p>🔄 Last updated: <span id="last-updated"></span></p>
</div>
</div>
<script>
// Set last updated date
document.getElementById('last-updated').textContent = new Date().toLocaleDateString();
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>