Show HN: Codemap – Codebase Visualizer for JavaScript, TypeScript, and Python

Hey HN, I&#x27;m the creator of Codemap.<p>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.<p>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 &quot;Find usage of function...&quot; 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.<p>As a software engineer, I think there&#x27;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.<p>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 &quot;How does &lt;popular project&gt; work?&quot; I&#x27;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).<p>I would love to hear what you love and hate, as well as any questions you may have. I&#x27;ll be here to respond the best I can (PST time). Thank you :)

This looks cool! Pricing looks reasonable.<p>My main piece of feedback is that it&#x27;s still a bit difficult to tell what this does, and more specifically how it solves the problem of understanding a codebase. For example, how well does it understand my code (does it use language servers?), are there any views other than the tree, can I jump into a file and choose a function, etc<p>Even if I download it to try it out, the 100 function limit on the free plan seems like it would be quite limiting to trying the tool as part of my workflow (I think a codebase that I have difficulty navigating tends to be larger than that).<p>The tool is cheap enough that I wouldn&#x27;t mind skipping the free plan entirely, but it doesn&#x27;t seem like there&#x27;s a way to purchase just one month.<p>One question about the performance side, is the app native, and how massive of a codebase can it handle while staying snappy?

Some time ago I tried building something like this too, but lost interest at the end. Feel free to pick ideas if you find them interesting:<p><a href="http:&#x2F;&#x2F;iswaac.dev&#x2F;blog&#x2F;2019-12-14&#x2F;" rel="nofollow">http:&#x2F;&#x2F;iswaac.dev&#x2F;blog&#x2F;2019-12-14&#x2F;</a><p>The basic idea is to use nested boxes to represent ownership and lines to represent dependencies. I only did the first part to some extent: parsed JS and rendered the AST into a treemap using WebGL.<p>What I actually envisioned in my mind is a 3d nested boxes rendered in a &quot;galaxy style&quot; where you can fly from one box to another, click on boxes to show their sub-boxes and see the lines that represent connections. The 3d space would allow to unclutter the image.<p>Edit1. While I think that nested boxes is the natural way to represent ownership, it&#x27;s often difficult to figure this ownership from the code. For example, class A is really the owner of B and C, but those are given to A as args in the constructor, so to an unsophisticated analyzer tool, B and C would be just deps. Perhaps the tool should allow the user to adjust the relationship status between objects based on some a priori knowledge. The changes would need to be saved, so next time the diagram is rebuilt from code, the visualizer would remember that A owns B and C. I believe this would be really useful in big companies that struggle to keep such diagrams up to date.<p>Edit2. I&#x27;m reading my own note about WebGL and matrix projections and laughing: I wouldn&#x27;t write that nonsense with my current understanding of webgl.

This looks cool. Indexing node_modules feels like the wrong default. I waited several minutes with cpu at 100 after startup for a fairly small React project.<p>And maybe the free tree could start at a more useful place? index.js or App.jsx or App.vue? In my case, the 100 functions are all instrumentation and polyfills, which doesn&#x27;t give me much sense of the potential utility.<p>In a Django project, I see...nothing.<p>Good luck! This seems like it could be useful.

How do you determine whether python is installed?<p>I&#x27;m getting this error on OSX: &gt; Please make sure Python3 is installed on your computer.<p>My python3 installation works fine and is located at: &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python3

I’ve been using SourceTrail[0] since they open sourced it to get my head around a large Java project. It doesn’t yet support TypeScript projects so I’m really interested to see how Codemap goes on our React app.<p>[0] <a href="https:&#x2F;&#x2F;www.sourcetrail.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.sourcetrail.com&#x2F;</a>

I&#x27;m unable to get anything other than a message saying &quot;Empty graph&quot; for Python. Does it need to <i>know</i> about venv somehow?<p>JS works fine.

``` Uncaught (in promise) abort(&quot;Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 16777216, (2) compile with -s ALLOW_MEMORY_GROWTH=1 which allows increasing the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or (4) if you want malloc to return NULL (0) instead of this abort, compile with -s ABORTING_MALLOC=0 &quot;). Build with -s ASSERTIONS=1 for more info. ```

I have done this kinda thing to great effect using Doxygen, although this solution adds a bit of dynamism that is really appreciated. Having the call graphs, especially for a new&#x2F;unfamiliar code base is a great way to gain understanding. Kuddos on the launch, i think a lot of engineers will find this pretty useful once you expand on it a bit.

OMG this would have been handy so much. I used to track the call stack by following functions and writing it out to a text file.