Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

news.ycombinator.com

Post reply on HN
Print view View original

1–10 of 90 posts

Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#1

Post by LiamPrevelige »

Hey HN — we’re Liam and Will from CodeViz (https://codeviz.ai). We're building a VS Code extension that generates interactive diagrams of codebases, from system architecture down to function call graphs. Here’s a demo where we analyze OpenHands, uv, and webviz: https://www.youtube.com/watch?v=fgfDXUtWzRk.

The extension is public if you want to try it on your own repos: https://marketplace.visualstudio.com/items?itemName=CodeViz....

Will and I started CodeViz because we wanted more intuitive representations of software. During our time at Tesla, we encountered a common problem: software engineers spend very little time actually typing code. Most development time was spent navigating convoluted files and building a mental map for each task. At the same time, whiteboard sessions were proof that code could be expressed intuitively.

We started with autogenerated technical documentation. Of course, long markdown docs are not a good solution for long files of code. We realized we needed diagrams that (a) help grasp large quantities of code and (b) can be filtered according to the developer’s task. So, we built a graph-based VS Code extension. It generates diagrams directly within VS Code, illustrating connections between functions and providing overviews of system architecture. These visualizations update as code changes.

CodeViz appears as a side panel in VS Code with two views:

(1) Call graph: as you click on functions, we show a chain of upstream and downstream references. You can navigate your codebase using the call stack and see, in one view, everywhere your functions are called. We generate this call graph using the language servers developers have already installed in VS Code

(2) Architecture diagram: we create a C4 diagram of your system, so you can see a top-level view of your codebase and click into the component layer. We were surprised to find that a small fraction of code can generate a very accurate representation of the system. We detect these important files, then use LLMs to build nested architecture diagrams at the container and component level

Developers are mainly using our extension to navigate spaghetti code, onboard new devs, and interpret open source repos. We're still figuring out our pricing. Currently, we offer basic features for free, with a paid tier for more resource-intensive tools like detailed architecture diagrams. Open to suggestions on this approach.

CodeViz is in active development and our main focus over the next couple of days is to make the call graph much easier to view and navigate. We're continuously working to make it better, so your honest feedback, suggestions, and wishes would be very helpful. Looking forward to hearing any and all thoughts, whether about the current extension, general problem space, or something else!

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#2

Post by pthangeda »

Congratulations on the launch - this looks great and I've been waiting for years for something like this! As a researcher who mostly uses Python, and explores/navigates a large number of repos for a short time, often written by other researchers not necessarily trained in software best practices, I was always frustrated (and surprised) that there was no VS Code extension or tool that gave me a quick overview/visualization to get a high level gist of different modules and code/data flow!

I tried this with a bunch of small open-source repos and it works great! I imagine using LLM might be a hard no for some people/enterprises - any plans to use stand-alone licenses with small local models? It seems like for what LLM is doing here (if I understand it right, help label the modules in natural language and perhaps help organize them into this hierarchy/modules) you don't necessarily need a SoTA model, right?

Also, this could be coming from LLMs, but I see that the visualizations are more biased towards terminology used in web-dev? (for example, one of my robot related repo was organized into front-end, back-end, etc. with I guess is kinda right but not exactly lol). It would be nice to see an interactive visualization where I can iterate on the initial viz with information I know, e.g., I drag and drop a module or rename it and then you probably do another pass with this feedback and LLMs and update my overall visualization with more domain specific labels and partitions?

Edit: Exploring CodeViz on a few more repos, and it seems like you have a set of hardcoded labels for the highest hierarchy in the architecture diagram? (so far, I've only seen Users, Databases, Backend, Frontend, and Shared Components). I am guessing this is something passed on in the prompts? It'll be nice to allow user to define their own set of labels/partitions at one or more levels and then try to create an architecture visualization that fits into these labels/constraints (although I am guessing at some point you have to be wary of hallucinations?)

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#4

Post by alixanderwang »

Hi and congrats on the launch! I run a company that also does software diagrams and we've often been posed the question of generating automated diagrams. We've never done so, primarily because I've never found auto-generated diagrams helpful yet. Code dependency graphs have existed for a generation now and I've just never seen one referenced by anyone. I wonder if things have changed now with LLMs.

The examples in your youtube video look good. I'm curious how they're generated. "We were surprised to find that a small fraction of code can generate a very accurate representation of the system." is a surprising statement to me. It's not been my experience that the code can reveal an accurate representation of human-understandable architecture beyond the call graph. The backend system generated from OpenHands (in your video) also looks pretty different from their own architecture diagram in their README: https://github.com/All-Hands-AI/OpenHands/tree/main/openhand... . How do you reconcile what an LLM says an architecture looks like with what maintainers prescribe? Is there a way to give feedback to it? (similar to pthangeda's comment on customization)

I wish there was a way to point this at a repo to test its efficacy. Though I understand that that'd be prohibitively expensive to do for free on the landing page.

I'm also curious how you guys distinguish yourself from https://docs.codesee.io/docs/review-maps-for-visual-studio-c... . They tried this for a few years but shut down recently (https://www.linkedin.com/posts/shaneak_update-codesee-has-be...)

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#5

Post by WillMcCall »

Veuxdo wrote: post #3

Going by the video, I see the diagrams have lines, but unfortunately no labels. Do lines always mean "dependency"? E.g. file dependency, dependency on a database or service, etc.

The lines represent a connection or interaction between different parts of the codebase. Most often these are dependencies like you mentioned, but a "dependency" could be a parent-child relationship, API call, imported function, and there are certain exceptions such as user interactions. Right now immediate edge labels are displayed on node hover, but I agree that the criteria for inclusion/exclusion of lines should be precisely defined. Any thoughts on what you'd like to see?

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#6

Post by WillMcCall »

alixanderwang wrote: post #4

Hi and congrats on the launch! I run a company that also does software diagrams and we've often been posed the question of generating automated diagrams. We've never done so, primarily because I've never found auto-generated diagrams helpful yet. Code dependency graphs have existed for a generation now and I've just never seen one referenced by anyone. I wonder if things have changed now with LLMs. The examples in yo…

Great points/questions. I suspect that information relevant to codebase architectures follows the 80/20 principle. For example, a router and index file in a React App will usually give you around 80% of what's needed to infer high level container info.

In terms of generating architecture diagrams, we follow the c4 model, with top level nodes defined as separately deployable units of software, and lower level component nodes being a set of functions wrapped behind a common interface. As the product develops, we'd like to include a way for feedback/fine tuning, but ideally the definition of an architecture diagram would be rigorous enough that there is no ambiguity, this is what we're aiming for. If you'd like to try it out on a specific repo, you can always use our extension for further analysis.

You're right to notice the similarity with CodeSee. Ultimately we're looking to focus on improving the developer experience without needing to leave the IDE. The idea is that CodeViz can replace or augment search and directory tree by providing a more intuitive interface for navigation!

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#7

Post by LiamPrevelige »

pthangeda wrote: post #2

Congratulations on the launch - this looks great and I've been waiting for years for something like this! As a researcher who mostly uses Python, and explores/navigates a large number of repos for a short time, often written by other researchers not necessarily trained in software best practices, I was always frustrated (and surprised) that there was no VS Code extension or tool that gave me a quick overview/visualiz…

We'd love to use local models and have played around with them a bit. Exactly right about the labeling - we didn't stick with local models because 3.5 sonnet is exceptionally good at finding niche architecture labels and merging similar modules (since code analysis is chunked). Copilot tools are becoming very popular, so companies are getting less strict around LLMs and code, but ultimately we do think everyone is better off if CodeViz is self-contained.

There is some hard coded bias for web dev. Diagram modification is definitely high on our todo, and we've been finding ways to reduce pre-defined structure in our prompts to LLMs so they work with broader tech stacks. When we sell licenses to teams, we do some manual checks for accuracy and detail, which helps us improve the public extension.

What's the name of the robotics repo? And any preference for modifying the diagram directly vs instructing changes by text?

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#9

Post by alixanderwang »

WillMcCall wrote: post #6
alixanderwang wrote: post #4

Hi and congrats on the launch! I run a company that also does software diagrams and we've often been posed the question of generating automated diagrams. We've never done so, primarily because I've never found auto-generated diagrams helpful yet. Code dependency graphs have existed for a generation now and I've just never seen one referenced by anyone. I wonder if things have changed now with LLMs. The examples in yo…

Great points/questions. I suspect that information relevant to codebase architectures follows the 80/20 principle. For example, a router and index file in a React App will usually give you around 80% of what's needed to infer high level container info. In terms of generating architecture diagrams, we follow the c4 model, with top level nodes defined as separately deployable units of software, and lower level componen…

> If you'd like to try it out on a specific repo, you can always use our extension for further analysis.

VSCode extension marketplace doesn't have the best security rails or reputation for security, and with this being closed source, just personally, installing and running it on my machine isn't something I'm comfortable doing.

> The idea is that CodeViz can replace or augment search and directory tree by providing a more intuitive interface for navigation!

That to me is a different goal than the one in your post (maybe it's just phrasing or I didn't understand the OP correctly), and is something I'd be excited to have!

> ideally the definition of an architecture diagram would be rigorous enough that there is no ambiguity

Rigor is a big "if" in software ;). See: UML's attempt. C4 is some very loose guidelines. IIRC, a big part of its attraction is the lack of rigor/formal standards.

Anyway, best of luck! Feel free to reach out if you'd like to chat diagrams

Re: Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code

#10

Post by WillMcCall »

alixanderwang wrote: post #9
WillMcCall wrote: post #6

Earlier quoted context omitted.

Great points/questions. I suspect that information relevant to codebase architectures follows the 80/20 principle. For example, a router and index file in a React App will usually give you around 80% of what's needed to infer high level container info. In terms of generating architecture diagrams, we follow the c4 model, with top level nodes defined as separately deployable units of software, and lower level componen…

> If you'd like to try it out on a specific repo, you can always use our extension for further analysis. VSCode extension marketplace doesn't have the best security rails or reputation for security, and with this being closed source, just personally, installing and running it on my machine isn't something I'm comfortable doing. > The idea is that CodeViz can replace or augment search and directory tree by providing a…

Sounds good, thanks for the feedback! Would open-sourcing CodeViz change your willingness to give it a try?

Definitely agree that rigor is a tricky term here, do you think the open-ended nature of C4 diagrams is a feature, not a bug? We've found in practice that top level diagram generation is both an art and a science, maybe it ought to stay that way.

In any case, shooting you a PM to set up some time to chat, and thanks again for the input!

Post reply on HN