5 ms·

Hey HN, I'm the creator of Codemap. Codemap is a codebase visualizer that displays the structure of function calls of any Javascript, Typescript, or Python cod

Hey HN, I'm the creator of Codemap. Codemap is a codebase visualizer that displays the structure of function calls of any Javascript, Typescript, or Python code. Given a local repo, Codemap statically parses the code and renders a directed graph of all function calls in the least cluttered layout. It helps programmers familiarize with a new codebase, trace possible scenarios that lead to a bug in a function, or understand the scope of impact when making a code change. Codemap runs offline on your local machine and never sends any sensitive code data to remote servers. I built Codemap because I noticed that good engineers always spend quality time understanding the code architecture before making changes. This process is crucial, and it usually requires drawing a function call diagram on a whiteboard or in the head. Some people use IDE "Find usage of function..." search box for a million times, some people ask senior engineers for tribal knowledge, and some just get lazy and start writing code with ignorance. As a software engineer, I think there's a better solution than this tedious and error-prone practice. I looked at existing code visualization tools and felt that the visualization tends to be overly cluttered and not that user-friendly. I believed that, with some level of design, I can build a tool that is pleasant to use, easy to navigate, and versatile for any codebase in the supported languages. During the development of Codemap, I would sometimes grab a popular Github repo to test the Codemap app, and I often find myself exploring its call graph for hours to satisfy my genuine curiosity of "How does <popular project> work?" I'd encourage curious HN readers to visit the website and see screenshots of call graphs from React, Keras, Django, and Typescript (yep the one from Microsoft). I would love to hear what you love and hate, as well as any questions you may have. I'll be here to respond the best I can (PST time). Thank you :)

indentit 6y ago
Looks great - how does it work? Or, what is needed to add new language support like C#? Pricing seems very reasonable.
- ru6xul6 6y ago
  Glad you like it! It uses a language-specific parser to generate function dependencies data, e.g. list of function calls, which are then consumed and visualized by shared UI components that renders the graph. To build language parsers, I started with Language Server Protocol (LSP) [1], but soon realized that some LSP libraries are outdated and I should go deeper to the core language parser, e.g. using Typescript tsserver for JS/TS code. To support a new language, I'll need to integrate a good language parser for that language, generate function dependencies, then the UI and graph rendering will take care of the rest. [1] https://microsoft.github.io/language-server-protocol/ https://microsoft.github.io/language-server-protocol/
divan 6y ago
Hey, great stuff, but my question is whether produced visualization/graph is similar to how would you "see" the code in your head yourself? The problem of familiarizing/navigating textual codebase is embarrassingly unsolved, and I was exploring this in the post "Rethinking visual programming with Go" [1], but yet my main issue with visualization tools is that they offer intermediate representation of the code, which still has to be "decoded" into proper mental map. I see the future of these visualizaton approaches in AR/VR. Code visualization should match mental map visualization as much as possible, and the better we can use spatial tools for representation the better the result. [1] https://divan.dev/posts/visual_programming_go/ https://divan.dev/posts/visual_programming_go/
- ru6xul6 6y ago
  Hey Ivan, thanks for sharing the great article! I actually read it last year and left a comment (name is Chentai). Back in 2019 I built an IntelliJ plugin [1] as a prototype for Java, and now I'm building Codemap as a natural follow-up. Glad to reconnect :) I definitely share your sentiment towards visual programming. AR/VR may be a better vehicle to convey the code structure, but I think 2D call graph, if done well, could serve as a valuable stepping stone for now. Hopefully Codemap can be the tool that inspires future design and thoughts. [1] https://plugins.jetbrains.com/plugin/12304-call-graph https://plugins.jetbrains.com/plugin/12304-call-graph
  - divan 6y ago
    That's awesome! I remember that project, yes :) BTW, there is a community for people exploring new ways of coding - https://futureofcoding.org https://futureofcoding.org. You might want to join it, if not yet.
    - ru6xul6 6y ago
      Nice, another rabbit hole for the weekend. Thanks for sharing!
- nefitty 6y ago
  Your caveman-with-a-torch analogy blew my mind.
dnt404-1 6y ago
I was thinking about a tool as such and wanted to build after I finished my Master's when I would have time (as I work full-time). The experience you described is exactly why I wanted to build such a tool in the first-place. And, this is going to be really useful. However, is there a Windows version? That is, unfortunately, what I have to use at work.
- ru6xul6 6y ago
  Hey, the Windows version is ready. Please visit the download page [1] to try it out :) [1] https://codemap.app/download https://codemap.app/download
- ru6xul6 6y ago
  Sorry for not supporting Windows yet. As I'm less familiar with the Windows toolchain, it takes me a little longer to port to Windows. If you don't mind, please feel free to shoot me an email (in my profile), so I can notify you once it's released.
lgregg 6y ago
Can this be used inversely to find dead code?
- ru6xul6 6y ago
  Absolutely. All those individual nodes linked to nothing else are good suspects.
techsin101 6y ago
Can you black box framework code. How does it work with react context or redux
- ru6xul6 6y ago
  Only functions that are defined in your codebase will be rendered in the graph. Thus framework functions are excluded.

indentit 6y ago

Looks great - how does it work? Or, what is needed to add new language support like C#? Pricing seems very reasonable.

ru6xul6 6y ago
Glad you like it! It uses a language-specific parser to generate function dependencies data, e.g. list of function calls, which are then consumed and visualized by shared UI components that renders the graph. To build language parsers, I started with Language Server Protocol (LSP) [1], but soon realized that some LSP libraries are outdated and I should go deeper to the core language parser, e.g. using Typescript tsserver for JS/TS code. To support a new language, I'll need to integrate a good language parser for that language, generate function dependencies, then the UI and graph rendering will take care of the rest. [1] https://microsoft.github.io/language-server-protocol/ https://microsoft.github.io/language-server-protocol/

divan 6y ago

Hey, great stuff, but my question is whether produced visualization/graph is similar to how would you "see" the code in your head yourself? The problem of familiarizing/navigating textual codebase is embarrassingly unsolved, and I was exploring this in the post "Rethinking visual programming with Go" [1], but yet my main issue with visualization tools is that they offer intermediate representation of the code, which still has to be "decoded" into proper mental map. I see the future of these visualizaton approaches in AR/VR. Code visualization should match mental map visualization as much as possible, and the better we can use spatial tools for representation the better the result. [1] https://divan.dev/posts/visual_programming_go/ https://divan.dev/posts/visual_programming_go/

ru6xul6 6y ago
Hey Ivan, thanks for sharing the great article! I actually read it last year and left a comment (name is Chentai). Back in 2019 I built an IntelliJ plugin [1] as a prototype for Java, and now I'm building Codemap as a natural follow-up. Glad to reconnect :) I definitely share your sentiment towards visual programming. AR/VR may be a better vehicle to convey the code structure, but I think 2D call graph, if done well, could serve as a valuable stepping stone for now. Hopefully Codemap can be the tool that inspires future design and thoughts. [1] https://plugins.jetbrains.com/plugin/12304-call-graph https://plugins.jetbrains.com/plugin/12304-call-graph
- divan 6y ago
  That's awesome! I remember that project, yes :) BTW, there is a community for people exploring new ways of coding - https://futureofcoding.org https://futureofcoding.org. You might want to join it, if not yet.
  - ru6xul6 6y ago
    Nice, another rabbit hole for the weekend. Thanks for sharing!
nefitty 6y ago
Your caveman-with-a-torch analogy blew my mind.

dnt404-1 6y ago

I was thinking about a tool as such and wanted to build after I finished my Master's when I would have time (as I work full-time). The experience you described is exactly why I wanted to build such a tool in the first-place. And, this is going to be really useful. However, is there a Windows version? That is, unfortunately, what I have to use at work.

ru6xul6 6y ago
Hey, the Windows version is ready. Please visit the download page [1] to try it out :) [1] https://codemap.app/download https://codemap.app/download
ru6xul6 6y ago
Sorry for not supporting Windows yet. As I'm less familiar with the Windows toolchain, it takes me a little longer to port to Windows. If you don't mind, please feel free to shoot me an email (in my profile), so I can notify you once it's released.

lgregg 6y ago

Can this be used inversely to find dead code?

ru6xul6 6y ago
Absolutely. All those individual nodes linked to nothing else are good suspects.

techsin101 6y ago

Can you black box framework code. How does it work with react context or redux

ru6xul6 6y ago
Only functions that are defined in your codebase will be rendered in the graph. Thus framework functions are excluded.