/tsdiagram

Create diagrams and plan your code with TypeScript.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

TSDiagram

TSDiagram is an online tool that helps you draft diagrams quickly by using TypeScript.
👉 https://tsdiagram.com

Features

  • Lets you define your data models through top-level type aliases and interfaces.
  • Automatically layouts the nodes in an efficient way.
  • ...but if you move one of the nodes manually, it will only auto-layout the other ones.
  • Saves everything in your local browser storage.
  • Exports your diagrams as PNG.

Roadmap

  • Function call representation
  • Export as SVG
  • Customizable TypeScript context (lib, etc.)
  • Bring your own storage (different vendors)

This project is not just a diagramming tool, but also the foundation for a greater code visualization project. Imagine flagging types and functions in your code editor and see how they are connected, and how data flows through them. That's the end goal, so we'll swap the TS compiler with Tree-sitter in the process.


TSDiagram Screenshot

Special thanks <3