Sysmap, Understand your Codebase.

I understand it now.

It took me about six months to understand my company’s codebase, and even now, there are a few concepts and components of it that I’m not exactly sure how they work. I wanted to solve this problem and help other developers understand their system at a high level while being able to go down into the nitty gritty and see how things function in the trenches of their codebase.

I’ve been really interested in the concept of system design recently due to it’s philosophical nature and how those concepts affect the scalability and maintainability of a business. I also think that in the age AI, system design expertise is a growing differentiator among software engineers. Building a tool that helps others to understand their system, felt like a passionate and natural next step.

What is Sysmap?

[Repository]

Sysmap is a visualization tool that you can run in your codebase’s terminal, and it will open up a local process in your web browser visualizing your code base at a high level. This shows you your systems subsystems and how they connect to each other.

If you click on one subsystem, you can easily see the connections it has within your code base.
You can also recursively go deeper into that system and explore it.
If you click on a connection, you can see exactly how two subsystems are connected at the file level (see panel on right).

Under the hood, this tool uses Graphify to parse your codebase. It then takes that structure and generates connections between them. With the structure and connections, we create subsystems. If a particular group of files is heavily connected, they’re classified as a subsystem. We then take these subsystems, connections, and structure and visualize them using React and that is what you see today. We take an LLM and we have it name these subsystems as well as assign an icon to it to aid visual understanding.

Read more about it and test it out here:[Repository]

Here are some of the research articles that I based the initial exploration and aspects of the implementation of this project on: