Is there a good way to map out the process of code?
Posted by QuitTypical3210@reddit | ExperiencedDevs | View on Reddit | 18 comments
Usually, I just copy the links from the repo with the lines of code and sort of make a list of how code map together. But it’s mess and gets hard to look back onto.
But I’m wondering if there is a better way to do this? Basically wanted to map out how a specific legacy feature works such as how the code interacts over services, the if/else, and where it gets information from. Starting from the UI, through the UI internals all the way down to the services. Since just looking at the code is a total nightmare.
Main reason for doing this is it to ensure I’m not missing any “extra” changes that occur to the information being used and that I’m not missing anything.
abzimmerman1325@reddit
Maybe c4 diagrams
dystopiadattopia@reddit
Run it in your IDE with the debugger
QuitTypical3210@reddit (OP)
Yea unfortunately debugger doesn’t work
Hey-GetToWork@reddit
Explain
tcpukl@reddit
That's exactly what I'm doing now.
Working on a bug in systems I'm not familiar with. Game Dev fwiw.
Mapping out diagrams isn't going to help me.
I need to step through the code, placing breakpoints and seeing data structures to see why it's behaving how it is.
RoadKill_11@reddit
Ai tools are really helpful for this
Ask it to research the codebase(s), generate sequence/mermaid diagrams of how they interact + any other questions you have
WillingnessNew6847@reddit
You can generate pretty nice diagrams & docs using AI tools that can serve at least as a good starting point. e.g. i've been experimenting with Cursor recently 'generate a high level component diagram for this repo (or set of repos). Generate a sequence diagram for this API. Generate a summary of what the code does, how its structured with details where most of the complexity & logic is. etc'
nickisfractured@reddit
Yeah love using cursor for stuff like this
heitorlessa@reddit
Besides mermaid, I tend to create ASCII diagrams for entrypoint using MonoDraw or simply any AI tool
Ok_Performer4498@reddit
PlantUML
SeriousDabbler@reddit
Sequence diagrams and data flow diagrams are good. If you're just doing something for understanding or communicating, then you dont have to get all that formal, so a diagram with boxes for things and lines for events is pretty good
cachemonet0x0cf6619@reddit
https://c4model.com
hangfromthisone@reddit
I wet myself everytime I see C4model
mcampo84@reddit
I think you’re describing a sequence diagram.
Creepy-Mix-4470@reddit
I like to use mermaid sequence diagrams with permalinks to code on key points, it is easier to explain even for non technical people. And other devs can get a high level overview with it and be directed to where key code is on a single image
mcampo84@reddit
Mermaid is great because you can just insert them into your README.md and it’ll render, plus you have a revision history in git.
AndreVallestero@reddit
Mermaid digrams are an extension of markdown, meaning you can embed images and links.
I create mermaid diagrams for each service with code links for critically important API calls, logic, or interface boundaries.
Physical-Ordinary317@reddit
Yeah, what you’re doing’s a good start — it just gets messy fast lol. I usually map stuff visually in Excalidraw or Miro instead of keeping a list. Tools like Sourcegraph or CodeSee also help a ton for tracing code flow. When I’m digging into legacy code, I just follow one example (like a button click → API → service) and jot down the main files/functions. Start high-level, then fill in edge cases later. Way easier to keep your sanity that way.