4 ms·

Show HN: Nogic – VS Code extension that visualizes your codebase as a graph

135 points by davelradindra 9mo ago

I built Nogic, a VSCode extension currently, because AI tools make code grow faster than developers can build a mental model by jumping between files. Exploring structure visually has been helping me onboard to unfamiliar codebases faster. It’s early and rough, but usable. Would love feedback on whether this is useful and what relationships are most valuable to visualize.

everlier 9mo ago
Nice, I wanted to build something similar for a long time. The coolest thing is to start summarising clusters for very large codebases, which essentially provides an LoD system for the context.
- davelradindra 9mo ago
  We were thinking of creating an MCP Server that could integrate well with the visualizer extension so that you'd understand the cluster visually and descriptively, so watch out for that! :) X: @Davellele
pentaphobe 9mo ago
All the GitHub links on your extension page are borked (including issues) From the look of the associated domain it looks like you're going full product, best of luck I'm a huge proponent of graph & visual analysis of complex systems - would have loved to try this out, but will always skip closed source editor extensions (especially in the age of widespread npm supply chain attacks & vibe coding)
- welder 9mo ago
  Here's the source code minified and bundled: https://www.gallery.vsassets.io/_apis/public/gallery/publisher/Nogic/extension/nogic/0.0.14/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage?redirect=true https://www.gallery.vsassets.io/_apis/public/gallery/publish... Unzip that archive and the source is in extension/dist folder.
  - phil-martin 9mo ago
    I’m confused - is it the actual source code, or minified/bundled code? I don’t think those two are the same thing - unless of course you write your code minified. That would be really impressive.
    - jasonm23 9mo ago
      That would be really impressive levels of psychopathy.
- davelradindra 9mo ago
  We will make this project open source soon!
Aspos 9mo ago
The illustration gif is way too fast. Hard to understand what is going on. Slow it down 2x or so.
wek 9mo ago
From your first page, this looks cool and needed. But as others have posted, I can't get to your github pages.
- davelradindra 9mo ago
  Will make it open source soon!
fpauser 9mo ago
Closed source vscode extensions: not for me.
- davelradindra 9mo ago
  Will be open source soon!
fishgoesblub 9mo ago
Unfortunately the repository links are broken and this is ARR licensed.
nebula8804 9mo ago
Very cool visualization. However it crashes on a more complex project. I added a folder with 2000+ files(included my assets) and now the visualizer locks up then shows nothing on its tab in VSCode. How do I manually delete old boards so that I can try again with a smaller slice of the code(without assets)?
Imustaskforhelp 9mo ago
Funny how world is so tiny. I am literally building myself an vscode extension which can abstract an api on top of google colab's vscode extension and I am able to effectively create a sandbox for any python code (I mean to be fair they all still share the same resource but that resource is of google) I have also hacked together a way for it to create new kernels aka new vm's itself but that becomes really really slow and also I am trying to look at other options to sandbox inside the jupyter notebook itself. The end result was very messy though so I was literally just currently experimenting with if I could just scrape/automate it from the browser directly. All in All I must admit that Vscode extensions are/feel very quite competent from what I can gather.
patabyte 9mo ago
I've been having great success with LLMs generating Mermaid diagrams and flowcharts from a repo. Claude Code and Cursor both do consistently great jobs. For example: `generate a mermaid swimlanes diagram of the XX logic flow`.
- davelradindra 9mo ago
  This is what I do previously too! The problem that I realize with them is that mermaid diagrams and flowcharts are static and sometimes oversimplified.
vmware508 9mo ago
I guess it is still useless in Ruby or Ruby on Rails. Standard "find the method declaration" or "used here" do not work in Ruby on Rails. Still, huge companies maintain that Ruby on Rails mess, where you cannot properly investigate, so you just guess and use the search and find option. Those codebases won't be replaced for a while, but good luck working on them. Such a headache!
- TheRoque 9mo ago
  How come nobody came up with an LSP that can perform this, all this time ?
  - esafak 9mo ago
    https://shopify.github.io/ruby-lsp/rails-add-on#go-to-definition https://shopify.github.io/ruby-lsp/rails-add-on#go-to-defini... ?
  - IshKebab 9mo ago
    Because it's an unsolvable problem without static type annotations and as far as I'm aware Ruby doesn't have a good solution for those yet (or if they do nobody uses it).
    - 1-more 9mo ago
      Sorbet is a decent one. I don't think it ever solved "jump to definition" though. I would just `rg def (self\.)?function_name` or I eventually developed a vibe for where things were, which is sort of the Ruby excuse for the ungreppability of everything. Sorbet did allow us to generate front end types in Elm and also allowed for type safe Haskell FFI. Past tense because it's an old job; as far as I know it's still happening.
    - hiccuphippo 9mo ago
      Someone needs to make TypeScript for Ruby.
  - federicotdn 9mo ago
suprjami 9mo ago
Only JS, TypeScript, and Python. You got me all excited for a C visualizer!
- davelradindra 9mo ago
  Will definitely come!
deleted 9mo ago
[deleted]
puppycodes 9mo ago
I definitly think more tools like this are needed, but not open sourcing it is a mistake. You will be quickly replaced by a friendlier competitor.
- dcreater 9mo ago
  There already are open source extensions. Visor is one I remember off the top of my head. https://marketplace.visualstudio.com/items?itemName=sidhantsriv.visor https://marketplace.visualstudio.com/items?itemName=sidhants...
- davelradindra 9mo ago
  We will make it open source soon! Follow me on X (@Davellele) to be updated when we do :)
  - puppycodes 9mo ago
    Thats good to hear but what are you waiting for?
  - fortyseven 9mo ago
    Twitter/X is a big nope.
tiborsaas 9mo ago
I've tried it, but it's very slow on a not too complex codebase with my M3 Macbook Air. -------------------------------------------------------------------------------- Language Files Lines Blank Comment Code -------------------------------------------------------------------------------- Typescript JSX 121 18724 1699 1051 15974 TypeScript 61 5389 629 550 4210 CSS 5 1039 50 22 967 Markdown 3 657 173 0 484 -------------------------------------------------------------------------------- It was like 5-10FPS at best, not really usable unfortunately because I like these tools. I'm using another similar one which is buttery smooth, Code Canvas.
- davelradindra 9mo ago
  We are actively improving on the performance! Also, I am a previous code canvas user too, but I felt like it didn't help me understand my codebase as much as I wanted it to.. that's why I decided to experiment something myself! :)
  - tiborsaas 9mo ago
    Thanks, CC is really helpful already for me the more tools like these exists, the better. With AI coding agents, I keep watching the visualization rather than the changeset first.
Scene_Cast2 9mo ago
I used to use Doxygen to create caller and callee graphs to understand code flow. Unfortunately, the tool hasn't really changed in more than a decade.
kachapopopow 9mo ago
I always liked the idea having relationship based programming (graph programming), but with actual code. Never actually made the effort to make something like that. Pretty neat either way.
- davelradindra 9mo ago
  Thanks! Shoot me a message if you would like to have something added :) X: @Davellele
bulletsvshumans 9mo ago
Please publish to Open VSX so it is easily available for VS Code forks like Cursor as well.
- davelradindra 9mo ago
  It's available on Open VSX now!
oersted 9mo ago
Looks great, it was actually just playing around yesterday with `code canvas app` which is similar, and also Charkoal.dev and Haystack Editor (before code-review pivot) which are related. Yours looks better than any of them already! I wish it was available in Cursor as well though. Not sure how exactly they manage their marketplace, most VSCode extensions seem to be there but now and then I encounter one that is missing for no apparent reason.
- davelradindra 9mo ago
  It is on Open VSX so you can download it directly from Cursor!
  - oersted 9mo ago
    Great! I tried it on a standard Django project but it's not displaying any edges. It is able to detect imports at least, because "Add Connected Files" works, but no edges at all. Is there a good place to report such issues?
    - ryannampham 9mo ago
      hey! one of the co-founders of nogic here. sorry for the late response!! feel free to report your bug here on the nogic discord: https://discord.gg/pE9sadAm https://discord.gg/pE9sadAm. there are a couple of issues regarding edges not showing in some cases, and we are hoping to address all of these issues by the end of the week.
dolevalgam 9mo ago
This is incredibly needed!!
matiszz 9mo ago
This is incredibly useful!
kelsolaar 9mo ago
Quite enjoying the idea as I have been looking for something like this for a while but it is reallllllly slow for our medium sized codebase, I have like 2 or 3 fps on my M1: https://github.com/colour-science/colour/tree/develop/colour https://github.com/colour-science/colour/tree/develop/colour
aqula 9mo ago
Really cool! I'm also dabbling with this idea. The biggest challenge I find is to reduce noise. Large codebases come with a lot of cruft. Surfacing every small detail in the visualization tends to make it messy and less useful. I've not seen contemporary tools tackle this, but think can be useful.
frmfrm 9mo ago
Very nice!
apem 9mo ago
Super cool! I've thought of literally this so many times. Is there any way to add a file to a board, then "explore" the imports of that file and potentially adding those files as well? I'm thinking as a way to explore a code base better. Best of luck :)
amd64 9mo ago
Recommend Lumyst - lumystai.com
doc_ick 9mo ago
I like the looks of it, but until it's open-sourced, it'll be a nope for me. As it seems like they've had their website up since late last year but no code up.

135 points by davelradindra 9mo ago

everlier 9mo ago

Nice, I wanted to build something similar for a long time. The coolest thing is to start summarising clusters for very large codebases, which essentially provides an LoD system for the context.

davelradindra 9mo ago
We were thinking of creating an MCP Server that could integrate well with the visualizer extension so that you'd understand the cluster visually and descriptively, so watch out for that! :) X: @Davellele

pentaphobe 9mo ago

All the GitHub links on your extension page are borked (including issues) From the look of the associated domain it looks like you're going full product, best of luck I'm a huge proponent of graph & visual analysis of complex systems - would have loved to try this out, but will always skip closed source editor extensions (especially in the age of widespread npm supply chain attacks & vibe coding)

welder 9mo ago
Here's the source code minified and bundled: https://www.gallery.vsassets.io/_apis/public/gallery/publisher/Nogic/extension/nogic/0.0.14/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage?redirect=true https://www.gallery.vsassets.io/_apis/public/gallery/publish... Unzip that archive and the source is in extension/dist folder.
- phil-martin 9mo ago
  I’m confused - is it the actual source code, or minified/bundled code? I don’t think those two are the same thing - unless of course you write your code minified. That would be really impressive.
  - jasonm23 9mo ago
    That would be really impressive levels of psychopathy.
davelradindra 9mo ago
We will make this project open source soon!

Aspos 9mo ago

The illustration gif is way too fast. Hard to understand what is going on. Slow it down 2x or so.

wek 9mo ago

From your first page, this looks cool and needed. But as others have posted, I can't get to your github pages.

davelradindra 9mo ago
Will make it open source soon!

fpauser 9mo ago

Closed source vscode extensions: not for me.

davelradindra 9mo ago
Will be open source soon!

fishgoesblub 9mo ago

Unfortunately the repository links are broken and this is ARR licensed.

nebula8804 9mo ago

Very cool visualization. However it crashes on a more complex project. I added a folder with 2000+ files(included my assets) and now the visualizer locks up then shows nothing on its tab in VSCode. How do I manually delete old boards so that I can try again with a smaller slice of the code(without assets)?

Imustaskforhelp 9mo ago

Funny how world is so tiny. I am literally building myself an vscode extension which can abstract an api on top of google colab's vscode extension and I am able to effectively create a sandbox for any python code (I mean to be fair they all still share the same resource but that resource is of google) I have also hacked together a way for it to create new kernels aka new vm's itself but that becomes really really slow and also I am trying to look at other options to sandbox inside the jupyter notebook itself. The end result was very messy though so I was literally just currently experimenting with if I could just scrape/automate it from the browser directly. All in All I must admit that Vscode extensions are/feel very quite competent from what I can gather.

patabyte 9mo ago

I've been having great success with LLMs generating Mermaid diagrams and flowcharts from a repo. Claude Code and Cursor both do consistently great jobs. For example: `generate a mermaid swimlanes diagram of the XX logic flow`.

davelradindra 9mo ago
This is what I do previously too! The problem that I realize with them is that mermaid diagrams and flowcharts are static and sometimes oversimplified.

vmware508 9mo ago

I guess it is still useless in Ruby or Ruby on Rails. Standard "find the method declaration" or "used here" do not work in Ruby on Rails. Still, huge companies maintain that Ruby on Rails mess, where you cannot properly investigate, so you just guess and use the search and find option. Those codebases won't be replaced for a while, but good luck working on them. Such a headache!

TheRoque 9mo ago
How come nobody came up with an LSP that can perform this, all this time ?
- esafak 9mo ago
  https://shopify.github.io/ruby-lsp/rails-add-on#go-to-definition https://shopify.github.io/ruby-lsp/rails-add-on#go-to-defini... ?
- IshKebab 9mo ago
  Because it's an unsolvable problem without static type annotations and as far as I'm aware Ruby doesn't have a good solution for those yet (or if they do nobody uses it).
  - 1-more 9mo ago
    Sorbet is a decent one. I don't think it ever solved "jump to definition" though. I would just `rg def (self\.)?function_name` or I eventually developed a vibe for where things were, which is sort of the Ruby excuse for the ungreppability of everything. Sorbet did allow us to generate front end types in Elm and also allowed for type safe Haskell FFI. Past tense because it's an old job; as far as I know it's still happening.
  - hiccuphippo 9mo ago
    Someone needs to make TypeScript for Ruby.
- federicotdn 9mo ago

suprjami 9mo ago

Only JS, TypeScript, and Python. You got me all excited for a C visualizer!

davelradindra 9mo ago
Will definitely come!

deleted 9mo ago

[deleted]

puppycodes 9mo ago

I definitly think more tools like this are needed, but not open sourcing it is a mistake. You will be quickly replaced by a friendlier competitor.

dcreater 9mo ago
There already are open source extensions. Visor is one I remember off the top of my head. https://marketplace.visualstudio.com/items?itemName=sidhantsriv.visor https://marketplace.visualstudio.com/items?itemName=sidhants...
davelradindra 9mo ago
We will make it open source soon! Follow me on X (@Davellele) to be updated when we do :)
- puppycodes 9mo ago
  Thats good to hear but what are you waiting for?
- fortyseven 9mo ago
  Twitter/X is a big nope.

tiborsaas 9mo ago

I've tried it, but it's very slow on a not too complex codebase with my M3 Macbook Air. -------------------------------------------------------------------------------- Language Files Lines Blank Comment Code -------------------------------------------------------------------------------- Typescript JSX 121 18724 1699 1051 15974 TypeScript 61 5389 629 550 4210 CSS 5 1039 50 22 967 Markdown 3 657 173 0 484 -------------------------------------------------------------------------------- It was like 5-10FPS at best, not really usable unfortunately because I like these tools. I'm using another similar one which is buttery smooth, Code Canvas.

davelradindra 9mo ago
We are actively improving on the performance! Also, I am a previous code canvas user too, but I felt like it didn't help me understand my codebase as much as I wanted it to.. that's why I decided to experiment something myself! :)
- tiborsaas 9mo ago
  Thanks, CC is really helpful already for me the more tools like these exists, the better. With AI coding agents, I keep watching the visualization rather than the changeset first.

Scene_Cast2 9mo ago

I used to use Doxygen to create caller and callee graphs to understand code flow. Unfortunately, the tool hasn't really changed in more than a decade.

kachapopopow 9mo ago

I always liked the idea having relationship based programming (graph programming), but with actual code. Never actually made the effort to make something like that. Pretty neat either way.

davelradindra 9mo ago
Thanks! Shoot me a message if you would like to have something added :) X: @Davellele

bulletsvshumans 9mo ago

Please publish to Open VSX so it is easily available for VS Code forks like Cursor as well.

davelradindra 9mo ago
It's available on Open VSX now!

oersted 9mo ago

Looks great, it was actually just playing around yesterday with `code canvas app` which is similar, and also Charkoal.dev and Haystack Editor (before code-review pivot) which are related. Yours looks better than any of them already! I wish it was available in Cursor as well though. Not sure how exactly they manage their marketplace, most VSCode extensions seem to be there but now and then I encounter one that is missing for no apparent reason.

davelradindra 9mo ago
It is on Open VSX so you can download it directly from Cursor!
- oersted 9mo ago
  Great! I tried it on a standard Django project but it's not displaying any edges. It is able to detect imports at least, because "Add Connected Files" works, but no edges at all. Is there a good place to report such issues?
  - ryannampham 9mo ago
    hey! one of the co-founders of nogic here. sorry for the late response!! feel free to report your bug here on the nogic discord: https://discord.gg/pE9sadAm https://discord.gg/pE9sadAm. there are a couple of issues regarding edges not showing in some cases, and we are hoping to address all of these issues by the end of the week.

dolevalgam 9mo ago

This is incredibly needed!!

matiszz 9mo ago

This is incredibly useful!

kelsolaar 9mo ago

Quite enjoying the idea as I have been looking for something like this for a while but it is reallllllly slow for our medium sized codebase, I have like 2 or 3 fps on my M1: https://github.com/colour-science/colour/tree/develop/colour https://github.com/colour-science/colour/tree/develop/colour

aqula 9mo ago

Really cool! I'm also dabbling with this idea. The biggest challenge I find is to reduce noise. Large codebases come with a lot of cruft. Surfacing every small detail in the visualization tends to make it messy and less useful. I've not seen contemporary tools tackle this, but think can be useful.

frmfrm 9mo ago

Very nice!

apem 9mo ago

Super cool! I've thought of literally this so many times. Is there any way to add a file to a board, then "explore" the imports of that file and potentially adding those files as well? I'm thinking as a way to explore a code base better. Best of luck :)

amd64 9mo ago

Recommend Lumyst - lumystai.com

doc_ick 9mo ago

I like the looks of it, but until it's open-sourced, it'll be a nope for me. As it seems like they've had their website up since late last year but no code up.