Show HN: CodeDiagram – VSCode extension for quickly making code flow diagrams | Hacker News Reader

Show HN: CodeDiagram – VSCode extension for quickly making code flow diagrams

codediagram.io

11 pointskhanhhuy10 comments

Can the diagram being part of the code it self (e.g special comment string on top of certain piece, or in a special metalfiel)

It'll be really nice if the code diagram itself could be version tracked together with code.

Hi, thank you for trying the tool. I have a plan to store the diagram locally e.g. each diagram is a `.codediagram` file.

Do you think this would help your case?

Can it auto generate diagrams from the code without selecting snippets?

Hi, it cannot. Tbh, this is something that I want to build but still struggle to find a proper solution.

May I ask more about your codebase, like the languages and frameworks that you're using?

Currently I would find it interesting for my web development project, where I use VueJs and Nuxt.

I also use Vue for this tool. Great framework.

How would you imagine the auto generating feature help for your use cases? Is it for generating the Vue components dependencies?

I would use it to visualize the dependencies of the javascript modules. E.g. where do I use the pinia store, where do I use a javascript file from the usecase folder etc.

Sometimes I have to work with large legacy code bases, e.g. in Android. There it would be very useful to generate diagrams. In Android Studio I ofen use "find usages" to traverse the code dependencies. That might be easier with diagrams.

I see, this really makes sense. I'll try to figure out something for the JavaScript and Vue use cases.

I'm also struggling on the same problem. One technique is to read the code base in reverse. For example, pick a variable or a function or a statement or an expression, trace its source upwards.

This will create a graph from destination to source, then flipping the direction will help to traverse from top to down.

I get lost on the problem, I made sure I'll not use computer science concept to solve this problem.

to be simple,

For each identifier in the code base, trace its source. For each trace, sort it in order of code execution. For example, in case of javascript this is simple problem because there is no concurrancy.

I'm trying to solve this to create a code base refactoring tool, and one step further to automatically watch the code refactor itself. Initially I thought it was cool, but I couldnt take a step or two.

After some searching, I think the possible approach is to use a Language Server. For example: the "Find References" in VSCode is implemented through TypeScript Language Server.

I skimmed some LSP extensions (Vue, TS), the codes are quite complex, but you only need to interact with those language servers, not re-implement them, so that's still possible

Reply on news.ycombinator.com