Codemap

The code visualizer you wished for

7 followers

The code visualizer you wished for

7 followers

Visit website

Data visualization tools

•

AI Coding Agents

•

Code Review Tools

Codemap visualizes any codebase as a graph for software engineers to quickly understand the code architecture. Supports Typescript, Python, Java, PHP, Ruby, Go (Golang), and Terraform.

Launch tags:Design Tools•Productivity•Developer Tools

Launch Team

Dropbox SignSimple, secure eSignatures for the way your team works.

Promoted

ntwrk

For the security warning on macOS, can't you get a code signing certificate or something and at least sign your code for macOS not to give you this warning?

Report

6yr ago

Codemap

Maker

@joshuapinter totally, and that's something on my TODO list to resolve

Report

6yr ago

Codemap

Maker

Hi folks, I'm the maker of Codemap. I shared Codemap on Hacker News 2 weeks ago and planned to share it with Product Hunt after adding Windows support. Well, I guess @anamari04907875 beats me to it, thanks Ana :). I was surprised to notice that a large portion of my website's traffic came from Product Hunt, and that's how I found this post. Thanks for the positive feedback, and sorry for the late reply. I'll post the intro below. 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 work?" I'd encourage curious users 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. Thank you!

Report

6yr ago

ntwrk

In case anyone is wondering, your code is never shared, synced or saved, as per their Privacy Policy: > YOUR USER CONTENT > > Your User Content will be treated as follows: The Apps reads directly into your codebase without making any interference. Operations you make using the Apps are only accessible by you. We never sync or send your code, queries, history, screenshots or any of your codebase content to any of our servers. The credentials are always being saved securely on your device's hard drive.

Report

6yr ago

Codemap

Maker

@joshuapinter Thanks for highlighting this important info. You're absolutely right. Codemap will never ever store/sync/share the code or "call home". I think trust is the most important thing when building a product, especially developer tools that touches sensitive data.

Report

6yr ago

Looks useful. Would have loved to try it out on a large PHP project but no support for that language right now. Adding to my bookmarks to keep an eye on it though.

Report

6yr ago

Codemap

Maker

@elindydotcom thanks for the interest! I'm evaluating which additional language to support next, and I'll keep PHP on my mind!

Report

6yr ago

This seems petty useful, is there a mailing list for Windows?

Report

6yr ago

Codemap

Maker

@ethan_glover the Windows version went live last week. Please take a look!

Report

6yr ago

@chentai This is looking really good on small projects. I can imagine it's usefulness on larger. It's a great idea, I'm liking it so far and I'm for sure going to be playing with it a lot. EDIT: On trying with a larger project: "FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" To be fair, I'm trying it on an awfully old and unorganized project. I can't make sense of a single page. But it would be nice to get a print out of where these errors are happening, as in, if it's a specific file that's causing the trouble.

Report

6yr ago

Codemap

Maker

@ethan_glover That's a really good point! Let me improve it by displaying the file name that's causing the trouble. Hold tight, I'll get back to you later! EDIT: the heap out of memory issue may occur even if Codemap is able to parse your code but failed when rendering the graph (which is held in memory). If that's the case, loading fewer folders or files may help.

Report

6yr ago