TSDiagram
Create diagrams and plan your code with TypeScript.
Free7,115 impressions#9 of its week1 comment
Comments
>log in to comment- Bhavik (Impler.io)· 3y ago
Nice project Team. It's very useful in the world of TS projects today. I can think of the best use of it by creating one diagram for my project and pinning it on the channel so everyone can idea of the project. Would love to know your future plans!
TSDiagram converts TypeScript code into interactive diagrams for visualizing and planning code structures.
- for
- TypeScript developers who need visual models of their code.
- license
- GPL-3.0
Key features
- Code to Diagram — Automatically generates diagrams from TypeScript interfaces, type aliases, and classes.
- Interactive Editing — Select nodes or edges with Enter/Space and move, delete, or cancel using keyboard shortcuts.
- Node Details — Shows properties like id, path, source and computed getters such as meta, title, links.
- Task Modeling — Supports Task, TaskSchedule, and TaskSession types with status and timing information.
- Wiki Structure — Displays a Wiki root with navigable nodes via getNodes().
- Keyboard Navigation — Use arrow keys to reposition nodes within the diagram.
Use cases
- Visualize data models defined in TypeScript for better understanding.
- Plan application architecture by mapping classes and interfaces.
- Document API structures with automatically generated diagrams.
- Explore and refactor legacy TypeScript code through visual representation.
TSDiagram FAQ
How do I create a diagram from my TypeScript code?+
Paste or upload your TypeScript file; the tool parses interfaces, type aliases, and classes into a diagram.
Can I edit the generated diagram?+
Yes, select nodes or edges with Enter or Space, then move them with arrow keys or delete them with the Delete key.
What keyboard shortcuts are supported?+
Enter/Space to select, arrow keys to move, Delete to remove, Escape to cancel the current action.
Does TSDiagram support custom TypeScript types?+
It supports interfaces, type aliases, classes, and specific types like Task, TaskSchedule, and TaskSession as shown in the examples.
Is there a way to view node metadata?+
Each node provides getters such as meta, title, links, and backlinks for detailed information.
Summarized by DevHunt from tsdiagram.com · Oct 4, 2026. Details may change; check the official site.
