The building of the visualiser was less interesting to me than the result and your conclusion. I agree that finding new ways to ingest the structure and logic of software would be very useful, and I like your solution. Is there a way to test it out?
This may be where AI coding tools unlock us. Being able to build tooling against novel concepts that change how we approach reading and writing code. I like it!
I always thought to do this visualization in 3d and maybe with VR. Not sure how useful or pleasing experience it would be. Kudos to the author of the project to get this done!
This is an interesting approach. I think, in a way, it mirrors what I do. Having contracted for much of my career, I’ve had to get up to speed on a number of codebases quickly. When I have a choice of how to do this, I find a recently closed issue and try to write a unit test for it. If nothing else, you learn where the tests live, assuming they exist, and how much of a safety net you have if you start hacking away at things. Once I know how to add tests and run them (which is a really good way to deal with the codebase setup problem mentioned in the article because a lot of onboarding docs only get you to the codebase running without all the plumbing you need), I feel like I can get by without a full understanding of the code as I can throw in a couple of tests to prove what I want to get to and then hope the tests or CI or hooks prevent me from doing A Bad Thing. Not perfect and it varies depending on on how well the project is built and maintained, but if I can break things easily, people are probably used to things breaking and then I have an avenue to my first meaningful contribution. Making things break less.
I am quite skeptical and reserved when it comes to AI, particularly as it relates to impacts of the next generation of engineers. But using AI to learn a code base has been life-changing. Using a crutch to feel your way around. Then ditching the crutch when things are familiar, like using a map until you learn the road yourself.
Your visualizer looks great! I really like that it queues up tasks to run instead of only operating on the code during runtime attachment. I haven't seen that kind of thing before.
I built my own node graph utility to do this for my code, after using Unreal's blueprints for the first time. Once it clicked for me that the two are different views of the same codebase, I was in love. It's so much easier for me to reason about node graphs, and so much easier for me to write code as plain text (with an IDE/language server). I share your wish that there were a more general utility for it, so I could use it for languages other than js/ts.
Very cool! For all its faults, seeing control and value change flows through execution is one of the things I really liked about Unreal's Blueprint viz scripting system. This looks like a better take on that.
And for huge git repos I always like to generate a Gource animation to understand how the repo grew, when big rearrangements and refactors happened, what the most active parts of the codebase are, etc.
When I have a codebase I dont know or didn’t touch in some time and there’s a bug, first step is reproduce it an then set a breakpoint early on somewhere, crab some coffee and spend some time to step through it looking at state until I know what’s happening and from there its usually kind of obvious.
Why would one need a graph view to learn a codebase when you can just slap a red dot next to the route and step a few times?
The unit test approach from the contractor in the thread is gold: "find a recently closed issue and try to write a unit test for it." This forces you to understand the test infrastructure, the module boundaries, and the actual behavior — not just the code structure.
I'd add one more technique that's worked well for me: trace a single request from HTTP endpoint to database and back. In a FastAPI app, that means starting at the route handler, following the dependency injection chain, seeing how the ORM/query layer works, and understanding the response serialization. You touch every layer of the stack by following one real path instead of trying to understand the whole codebase at once.
Visualizers are nice for the "big picture" but they rarely help you understand why the code works the way it does. The why is in the git history and the closed issues, not in a dependency graph.
The problem with most people's code is that it's full of unnecessary complexity and creates a ton of work. I swear at least 90% of projects from 'top' companies, by 'top' engineers is full of unnecessary complexity which slows everything down significantly. They literally need a team of 20+ engineers to do the work which could have been done more effectively with 1 good engineer.
Based on modern metrics for code quality, almost nobody will realize that they're looking at bad code. I've seen a lot of horrible codebases which looked pretty good superficially; good linting, consistent naming, functional programming, static typing, etc... But architecturally, it's just shockingly bad; it's designed such that you need to refactor the code constantly; there is no clear business layer; business logic traverses all components including all the supposedly generic ones.
With bad code, any business requirement change requires a deep refactoring... And people will be like "so glad we use TypeScript so that I don't accidentally forget to update a reference across 20 different files required as part of this refactoring" - Newsflash: Your tiny business requirement change requires you to update 20+ files because your code sucks! Sure TypeScript helps in this case, but type safety should be the least of your concerns. If code is well architected, complex abstractions don't generally end up stretching across more than one or two files.
There's a reason we say "Leaky abstraction" - If a complex abstraction leaks through many file boundaries; it's an abstraction and it's leaky!
There should be more writing and discussion in this area for several reasons. Simplest reason because we're curious about how others do this. But also because it's an interesting topic, IMHO, because layers of abstraction--code designed to run other code--can be difficult to talk about, because the referents get messy. How do you rhetorically step through layers of abstraction?
Score Breakdown
ND
PreamblePreamble
Content is technical tutorial with no observable alignment or misalignment with UDHR preamble values.
ND
Article 1Freedom, Equality, Brotherhood
No observable content addressing equal dignity and rights.
+0.05
Article 2Non-Discrimination
Low Practice
Editorial
ND
Structural
+0.05
SETL
ND
Combined
ND
Context Modifier
ND
Dark mode accessibility feature represents mild positive structural practice for non-discrimination; modest evidence.
ND
Article 3Life, Liberty, Security
No observable content addressing right to life, liberty, security.
ND
Article 4No Slavery
No observable content addressing slavery or servitude.
ND
Article 5No Torture
No observable content addressing torture or cruel treatment.
ND
Article 6Legal Personhood
No observable content addressing right to recognition as person before law.
ND
Article 7Equality Before Law
No observable content addressing equality before law.
ND
Article 8Right to Remedy
No observable content addressing effective remedy for rights violations.
ND
Article 9No Arbitrary Detention
No observable content addressing arbitrary arrest or detention.
ND
Article 10Fair Hearing
No observable content addressing fair trial or judicial process.
ND
Article 11Presumption of Innocence
No observable content addressing criminal procedure or presumption of innocence.
ND
Article 12Privacy
No observable content addressing privacy or family interference.
ND
Article 13Freedom of Movement
No observable content addressing freedom of movement.
ND
Article 14Asylum
No observable content addressing asylum or refugee protection.
ND
Article 15Nationality
No observable content addressing nationality or state membership.
ND
Article 16Marriage & Family
No observable content addressing marriage or family rights.
ND
Article 17Property
No observable content addressing property rights.
ND
Article 18Freedom of Thought
No observable content addressing freedom of thought, conscience, religion.
+0.23
Article 19Freedom of Expression
Medium Advocacy Practice
Editorial
+0.15
Structural
+0.10
SETL
+0.09
Combined
ND
Context Modifier
ND
Content demonstrates freedom of expression through detailed technical writing sharing knowledge. Free access without gatekeeping reflects positive structural stance on information freedom.
ND
Article 20Assembly & Association
No observable content addressing freedom of assembly or association.
ND
Article 21Political Participation
No observable content addressing political participation or voting.
ND
Article 22Social Security
No observable content addressing social security or welfare.
ND
Article 23Work & Equal Pay
No observable content addressing work, employment, or labor rights.
ND
Article 24Rest & Leisure
No observable content addressing rest, leisure, or working hours.
ND
Article 25Standard of Living
No observable content addressing standard of living, health, or social services.
+0.18
Article 26Education
Medium Advocacy Practice
Editorial
+0.20
Structural
+0.15
SETL
+0.10
Combined
ND
Context Modifier
ND
Content promotes education and skill development through technical knowledge sharing. Explicit teaching methodology reflects commitment to education accessible to readers.
+0.10
Article 27Cultural Participation
Low Framing
Editorial
+0.10
Structural
ND
SETL
ND
Combined
ND
Context Modifier
ND
Content engages with software development community and intellectual endeavors, though not explicitly cultural. Modest positive framing.
ND
Article 28Social & International Order
No observable content addressing social and international order to realize rights.
ND
Article 29Duties to Community
No observable content addressing duties to community or limitations on rights.
ND
Article 30No Destruction of Rights
No observable content addressing prevention of destruction of rights.