@zoldia/omnigraph 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +188 -0
- package/dist/cli.js +261531 -0
- package/package.json +42 -0
- package/ui/assets/index-CLCEDDVO.css +1 -0
- package/ui/assets/index-DKa11qnN.js +11 -0
- package/ui/index.html +13 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 RMV-Coder
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# OmniGraph
|
|
2
|
+
|
|
3
|
+
A multi-language, AST-driven dependency visualizer for complex codebases.
|
|
4
|
+
|
|
5
|
+
OmniGraph is a free, local developer tool that statically analyzes full-stack monorepos and generates an interactive, Obsidian-style dependency graph. It maps out how files and framework-specific modules connect — helping developers onboard onto complex, undocumented codebases in seconds.
|
|
6
|
+
|
|
7
|
+
## Supported Languages & Frameworks
|
|
8
|
+
|
|
9
|
+
| Language | Extensions | Framework Detection |
|
|
10
|
+
|----------|-----------|-------------------|
|
|
11
|
+
| **TypeScript** | `.ts`, `.tsx` | NestJS (`@Controller`, `@Injectable`, `@Module`) |
|
|
12
|
+
| **JavaScript** | `.js`, `.jsx` | CommonJS and ES module imports |
|
|
13
|
+
| **Python** | `.py` | FastAPI (`@router.get`, `@app.post`), Flask (`@app.route`), Django (Views, Models) |
|
|
14
|
+
| **PHP** | `.php` | Laravel (Controllers, Models, Middleware, Route definitions) |
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
**Prerequisites:** Node.js >= 18, npm >= 9
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
# Clone the repository
|
|
22
|
+
git clone https://github.com/RMV-Coder/OmniGraph.git
|
|
23
|
+
cd OmniGraph
|
|
24
|
+
|
|
25
|
+
# Install dependencies
|
|
26
|
+
npm install
|
|
27
|
+
|
|
28
|
+
# Build all packages
|
|
29
|
+
npm run build
|
|
30
|
+
|
|
31
|
+
# Analyze a repository
|
|
32
|
+
npm run dev -- --path ../my-project
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Then open `http://localhost:3000` in your browser.
|
|
36
|
+
|
|
37
|
+
### CLI Options
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
omnigraph --path <repo-path> # Required: path to the repo to analyze
|
|
41
|
+
omnigraph --path <repo-path> --port 4000 # Optional: custom port (default 3000)
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Features
|
|
45
|
+
|
|
46
|
+
### Multi-Language Dependency Graph
|
|
47
|
+
Point OmniGraph at any project containing TypeScript, JavaScript, Python, or PHP files. It recursively walks the directory, respects `.gitignore`, and builds a dependency graph from import/require statements.
|
|
48
|
+
|
|
49
|
+
### Framework-Aware Parsing
|
|
50
|
+
OmniGraph doesn't just find imports — it understands framework patterns:
|
|
51
|
+
- **NestJS**: Detects `@Controller`, `@Injectable`, `@Module` decorators with route metadata
|
|
52
|
+
- **FastAPI/Flask**: Detects route decorators (`@router.get("/users")`) with HTTP methods and paths
|
|
53
|
+
- **Django**: Detects class-based views (`APIView`, `ViewSet`) and models
|
|
54
|
+
- **Laravel**: Detects controllers, models, middleware, and `Route::get()` definitions
|
|
55
|
+
|
|
56
|
+
### Interactive Visualization
|
|
57
|
+
- **5 Layout Presets**: Directory (grouped by folder), Hierarchical, Force-Directed, Grid, Mind Map (LR/RL)
|
|
58
|
+
- **Live Force Simulation**: In force-directed mode, dragging a node causes nearby nodes to push and pull reactively via d3-force physics
|
|
59
|
+
- **Search & Filter**: Search nodes by name, filter by type with color-coded toggle chips
|
|
60
|
+
- **Node Inspector**: Click any node to see its file path, type, route metadata, and ID in the sidebar
|
|
61
|
+
- **Color-Coded Types**: Each node type has a distinct color — controllers (red), injectables (blue), modules (orange), Python files (blue), FastAPI routes (teal), Laravel controllers (red), and more
|
|
62
|
+
|
|
63
|
+
### Sidebar Controls
|
|
64
|
+
All controls live in a clean right sidebar:
|
|
65
|
+
- Layout preset selector with mind map direction toggle
|
|
66
|
+
- Real-time search with match count
|
|
67
|
+
- Type filter chips with color legend
|
|
68
|
+
- Node inspector panel below a divider
|
|
69
|
+
|
|
70
|
+
## Technology Stack
|
|
71
|
+
|
|
72
|
+
| Component | Technology |
|
|
73
|
+
|-----------|-----------|
|
|
74
|
+
| Monorepo | npm workspaces (5 packages) |
|
|
75
|
+
| CLI | Node.js + TypeScript + Commander.js |
|
|
76
|
+
| Server | Express.js with rate limiting |
|
|
77
|
+
| TypeScript/JS Parser | `@typescript-eslint/typescript-estree` |
|
|
78
|
+
| Python Parser | Regex-based AST extraction |
|
|
79
|
+
| PHP Parser | Regex-based AST extraction |
|
|
80
|
+
| Frontend | React 18 + Vite |
|
|
81
|
+
| Graph Engine | React Flow |
|
|
82
|
+
| Layout Engines | dagre (hierarchical/mind map), d3-force (force-directed) |
|
|
83
|
+
| Testing | Vitest |
|
|
84
|
+
|
|
85
|
+
## Architecture
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
CLI (@omnigraph/cli) → Server (@omnigraph/server) → Parsers (@omnigraph/parsers) → Types (@omnigraph/types)
|
|
89
|
+
Server also serves → UI (@omnigraph/ui) UI also uses → Types
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**Data flow:** Filesystem → AST parsing → OmniGraph model (nodes/edges) → JSON API (`/api/graph`) → React Flow UI
|
|
93
|
+
|
|
94
|
+
## How to Add a New Language Parser
|
|
95
|
+
|
|
96
|
+
OmniGraph is extensible by design. To add support for a new language or framework:
|
|
97
|
+
|
|
98
|
+
1. Create a new file in `packages/parsers/src/<language>/<language>-parser.ts`
|
|
99
|
+
2. Implement the `IParser` interface:
|
|
100
|
+
```typescript
|
|
101
|
+
import { IParser } from '../IParser';
|
|
102
|
+
import { OmniGraph } from '../types';
|
|
103
|
+
|
|
104
|
+
export class MyLanguageParser implements IParser {
|
|
105
|
+
canHandle(filePath: string): boolean {
|
|
106
|
+
return /\.mylang$/.test(filePath);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
parse(filePath: string, source: string): Partial<OmniGraph> {
|
|
110
|
+
// Extract nodes and edges from source code
|
|
111
|
+
return { nodes: [...], edges: [...] };
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
3. Register your parser in `packages/parsers/src/parser-registry.ts`:
|
|
116
|
+
```typescript
|
|
117
|
+
import { MyLanguageParser } from './mylanguage/mylanguage-parser';
|
|
118
|
+
const parsers: IParser[] = [..., new MyLanguageParser()];
|
|
119
|
+
```
|
|
120
|
+
4. Add node colors in `packages/ui/src/layout/shared.ts` and labels in `packages/ui/src/components/Sidebar.tsx`
|
|
121
|
+
|
|
122
|
+
No changes to the server, CLI, or graph engine are needed — the plugin architecture handles the rest.
|
|
123
|
+
|
|
124
|
+
## Omni JSON Schema
|
|
125
|
+
|
|
126
|
+
All parsers produce a standardized graph format regardless of source language:
|
|
127
|
+
|
|
128
|
+
```json
|
|
129
|
+
{
|
|
130
|
+
"nodes": [
|
|
131
|
+
{
|
|
132
|
+
"id": "src/users/users.controller.ts",
|
|
133
|
+
"type": "nestjs-controller",
|
|
134
|
+
"label": "users.controller",
|
|
135
|
+
"metadata": {
|
|
136
|
+
"filePath": "/absolute/path/src/users/users.controller.ts",
|
|
137
|
+
"route": "/users"
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
],
|
|
141
|
+
"edges": [
|
|
142
|
+
{
|
|
143
|
+
"id": "e-src/users/users.controller.ts->src/users/users.service.ts",
|
|
144
|
+
"source": "src/users/users.controller.ts",
|
|
145
|
+
"target": "src/users/users.service.ts",
|
|
146
|
+
"label": "imports"
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Running Tests
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npx vitest run # Run all tests (56 tests across 6 files)
|
|
156
|
+
npx vitest --watch # Watch mode
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## Contributing
|
|
160
|
+
|
|
161
|
+
Contributions are welcome! Here's how to get started:
|
|
162
|
+
|
|
163
|
+
1. **Fork the repo** and create a feature branch
|
|
164
|
+
2. **Install dependencies**: `npm install`
|
|
165
|
+
3. **Build**: `npm run build`
|
|
166
|
+
4. **Run tests**: `npx vitest run` — make sure all tests pass
|
|
167
|
+
5. **Submit a PR** with a clear description of what you changed and why
|
|
168
|
+
|
|
169
|
+
### Good First Issues
|
|
170
|
+
|
|
171
|
+
- Add a new language parser (Go, Rust, Java, C#, Ruby)
|
|
172
|
+
- Add export functionality (SVG, PNG, JSON)
|
|
173
|
+
- Improve import resolution for edge cases (barrel exports, dynamic imports)
|
|
174
|
+
- Add dark/light theme toggle
|
|
175
|
+
|
|
176
|
+
## Project Documentation
|
|
177
|
+
|
|
178
|
+
| Document | Description |
|
|
179
|
+
|----------|-------------|
|
|
180
|
+
| [PRD](docs/PRD.md) | Product requirements, feature status, and roadmap |
|
|
181
|
+
| [SAD](docs/SAD.md) | Software architecture, data flow, and design decisions |
|
|
182
|
+
| [ADR-001](docs/adr/ADR-001-parsing-engine.md) | Why typescript-estree for Phase 1 |
|
|
183
|
+
| [ADR-002](docs/adr/ADR-002-phase2-multi-language-parsing.md) | Why regex-based parsing for Phase 2 Python/PHP |
|
|
184
|
+
| [API Spec](docs/API-SPEC.md) | HTTP endpoint and CLI interface documentation |
|
|
185
|
+
|
|
186
|
+
## License
|
|
187
|
+
|
|
188
|
+
MIT
|