Every developer has faced this problem.
You find an interesting open-source project, clone it, open it in your editor, and then...
You're staring at hundreds (or thousands) of files wondering:
- Where does the application start?
- Which files are actually important?
- How are components connected?
- Where is authentication implemented?
- What happens when a button is clicked?
Understanding an unfamiliar codebase often takes hours—or even days.
I wanted a better way.
The Idea
Instead of reading source code file by file, what if you could see the architecture?
That's why I built RepoMap.
RepoMap analyzes a GitHub repository and converts it into an interactive knowledge graph, allowing developers to explore relationships visually instead of manually tracing imports.
Demo
🌐 Live Demo: https://repomap.armanx.online
⭐ GitHub: https://github.com/armannhansda/repomap
How It Works
The analysis pipeline is fairly straightforward.
GitHub Repository
│
▼
Repository Scanner
│
▼
AST Parser (ts-morph)
│
▼
Import Resolver
│
▼
Relationship Extraction
│
▼
Knowledge Graph Builder
│
▼
Interactive Visualization
Rather than treating files as isolated pieces of code, RepoMap builds a graph where every file becomes a node and every dependency becomes a relationship.
For example:
App.tsx
│
imports
▼
Navbar.tsx
│
renders
▼
Avatar.tsx
This makes navigating large repositories significantly easier.
Current Features
✅ Repository visualization
✅ Interactive dependency graph
✅ Repository explorer
✅ File search
✅ Import resolution
✅ Interactive graph navigation
Technical Challenges
One of the biggest challenges wasn't parsing code—it was accurately resolving imports.
Consider imports like:
import Button from "@/components/Button";
or
import Navbar from "../Navbar";
Resolving these correctly requires handling:
- Relative paths
- Path aliases
- index.ts files
- Missing file extensions
- Circular dependencies
Without proper resolution, the graph quickly becomes inaccurate.
Using ts-morph made it possible to analyze the TypeScript AST instead of relying on fragile regular expressions.
Why a Knowledge Graph?
Most dependency visualizers simply draw lines between files.
I wanted something more flexible.
Representing repositories as a knowledge graph opens the door to richer relationships, such as:
- Imports
- Function calls
- Component hierarchies
- API interactions
- Database usage
- Route relationships This foundation also enables future capabilities like impact analysis, architecture exploration, and AI-powered repository understanding.
What's Next?
RepoMap is still evolving.
Some of the features I'm currently working on include:
- Function call graphs
- Component relationship graphs
- Route visualization
- Multi-language support with Tree-sitter
- AI-powered repository exploration
- Better scalability for very large repositories
- RepoMap is Open Source
I've decided to make the entire project open source because I believe developer tools improve through community collaboration.
Whether you'd like to:
- Fix bugs
- Improve the UI
- Add support for new languages
- Optimize performance
- Improve documentation
- Suggest new features
I'd love to have your contributions.
GitHub Repository:
https://github.com/armannhansda/repomap
I'd Love Your Feedback
If you try RepoMap, I'd really appreciate your thoughts.
What would make it more useful?
Which repository should I test next?
What features would you like to see?
If you find the project interesting, consider giving it a ⭐ on GitHub.
Thanks for reading, and happy coding!
Top comments (1)
Repo maps are useful when they help answer a concrete navigation question, not just when they look impressive. The feature I would value most is showing which files explain a workflow end to end: entry point, state, side effects, tests, and deployment boundary.