You know that kind of tired, where your body has clearly given up for the day but your brain keeps coming up with new ideas anyway?
I had been working on the same project for 8 months, day and night. It started as a POC for my Computer Science dissertation, just a handful of files to prove a concept, and 8 months later (because obviously I made it into a full SaaS, Patcherly) it turned into a monster with several hundred files, hundreds of dependencies and sleepless nights.
I was proud of it, but I also couldn't hold every single moving part in my head anymore, it had simply become too big.
So one night, instead of letting me sleep like a normal person, my brain went: hey, what if you could actually see each one of those connections?
What if you could watch the whole thing grow, from the very first commit?
Now, when you are already exhausted, the sensible thing to do is rest... so obviously I started a second project.
I didn't want another dependency graph or a git stat. We have all seen those, they either look super boring or like someone dropped a plate of spaghetti on a whiteboard.
What I wanted was more like a film, see my code evolution through time, with pretty colors. Every file is a star, every import is a line between two stars, and each top-level folder gets its own cluster, each star shining brighter depending on its importance, every change reverberating depending on code churn.
You press play and the git history runs from the first commit until today, with files showing up on the day they were actually written.
That's how Repo Visualizer was born. There's a live demo too, in case you'd rather see it in action on a small repo.
And since apparently I didn't have enough to do already, I also gave it 4 themes: Galaxy (my favorite one), Organic, Neural and Minimal (which is also pretty cool and sort of "more serious").
At first I built it for the animation (and also to show my non-dev friends & fam the project I had been obsessing over for months), but let's be honest, I just wanted to look at something pretty.
Then I added a small thing: you click on a star and it tells you what that file depends on, and which other files import it.
Guess which part I actually use every day now?
Whenever I need to know what's going to break if I touch a file, that's where I go, instead of searching through hundreds of files (there's a search file function too).
So the tool I made half asleep, out of curiosity and boredom, ended up being useful... which was never the plan.
If you want to try it on your own repo, it only takes a minute:
git clone https://github.com/Jany-M/repo-visualizer
cd repo-visualizer
npm install
npm run analyze -- /path/to/your/repo
npm run dev
It tracks JS/TS, Python, Go, Rust, Java/Kotlin, Ruby, PHP and CSS and you can export the whole thing as a video or a GIF (it makes for a fun way to explain people that have no idea what we're talking about most of the time, that that's what we do all day, sort of... "see I create files, then connect other files to them... and they all work together").
It's open source, so go ahead and point it at your repo, and if it looks good share the clip!
Let me know if you like it and happy coding!
Top comments (0)