A few months ago I was working on a TypeScript codebase at my job. It wasn’t overly complex, but it contained enough types that jumping back and forth between files was not sufficient to grasp the overall structure. I like typing things, but there comes a point of diminishing returns. This project was well past that point. I spent some time looking for tools that could turn the code into a UML diagram to help me understand it easier. Unfortunately, everything I found was either too clunky or lacked some features I needed—such as the ability to filter types by folder or by kind (e.g., interface, class, enum).
So, I built my own tool: ts2uml. It’s a VS Code extension (and also a website) that generates UML diagrams directly from a TypeScript folder.
As of now, the tool can automatically generate the diagram and its layout. You can filter by folder, file, model, or type. I also added a few features so you can save the diagram as a PNG or JSON (the JSON can also be imported later). Additionally, there’s a share functionality that provides a link which, when opened online, displays the diagram you shared.
My idea was to start working on some automation (perhaps generating Markdown files from the graph JSON) to automate part of the documentation process. This is particularly important since I work with small teams and keeping the documentation aligned with the code is always a struggle.
But maybe my idea is wrong—that’s why I’m coming to you:
Could something like ts2uml help you?
What features would you like it to have?
Do you think the next step should be documentation automation, or should I focus on adding more diagram features?
Hi all,
A few months ago I was working on a TypeScript codebase at my job. It wasn’t overly complex, but it contained enough types that jumping back and forth between files was not sufficient to grasp the overall structure. I like typing things, but there comes a point of diminishing returns. This project was well past that point. I spent some time looking for tools that could turn the code into a UML diagram to help me understand it easier. Unfortunately, everything I found was either too clunky or lacked some features I needed—such as the ability to filter types by folder or by kind (e.g., interface, class, enum).
So, I built my own tool: ts2uml. It’s a VS Code extension (and also a website) that generates UML diagrams directly from a TypeScript folder.
As of now, the tool can automatically generate the diagram and its layout. You can filter by folder, file, model, or type. I also added a few features so you can save the diagram as a PNG or JSON (the JSON can also be imported later). Additionally, there’s a share functionality that provides a link which, when opened online, displays the diagram you shared.
My idea was to start working on some automation (perhaps generating Markdown files from the graph JSON) to automate part of the documentation process. This is particularly important since I work with small teams and keeping the documentation aligned with the code is always a struggle.
But maybe my idea is wrong—that’s why I’m coming to you: Could something like ts2uml help you? What features would you like it to have? Do you think the next step should be documentation automation, or should I focus on adding more diagram features?
I’m eager to hear what you think.
Joan
PD: This is my first submission to HN :).