Show HN: TSDiagram – Diagrams as Code with TypeScript • Hacker News Board

Show HN: TSDiagram – Diagrams as Code with TypeScript

#1

Post by _andrei_ » Tue, Dec 05, 2023, 2:01 AM UTC

Made an online tool for creating diagrams with TypeScript. I quite like it for thinking about how to shape my data, even if I end up using a different language in the end.

Show HN: TSDiagram – Diagrams as Code with TypeScript
tsdiagram.com

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#2

Post by yodon » Tue, Dec 05, 2023, 3:11 AM UTC

Having just done a bunch of Mermaid diagrams this looks very cool. I particularly like having the freedom to drag nodes around in yours to improve the layout.

Is there a way to turn off the dot grid?

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#3

Post by vanjajaja1 » Tue, Dec 05, 2023, 4:25 AM UTC

I like it. I feel like I needed something like this recently but can't remember why. Not sure when I'll need this, but nice to have in the toolbelt.

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#4

Post by throwitaway222 » Tue, Dec 05, 2023, 4:40 AM UTC

Completely blank in firefox

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#5

Post by girvo » Tue, Dec 05, 2023, 5:24 AM UTC

The web page doesn't work in Firefox :( Looks neat though, I checked it out on my phone. Right up my alley!

The error it throws is:

    TypeError: WeakMap key must be an object, got Be

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#6

Post by 20after4 » Tue, Dec 05, 2023, 5:49 AM UTC

Since the page doesn't actually work, here's the repo: https://github.com/3rd/tsdiagram

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#7

Post by _andrei_ » Tue, Dec 05, 2023, 7:12 AM UTC

Firefox update: fixed the issue, guess that's what you get if you roll your own store.

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#8

Post by _andrei_ » Tue, Dec 05, 2023, 7:16 AM UTC

yodon wrote: post #2

Having just done a bunch of Mermaid diagrams this looks very cool. I particularly like having the freedom to drag nodes around in yours to improve the layout. Is there a way to turn off the dot grid?

Will add a background switcher!

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#9

Post by hbcondo714 » Tue, Dec 05, 2023, 7:30 AM UTC

Thanks for sharing! I generated a png and added it to my repo's wiki with an acknowledgment to your repo:

https://github.com/hbcondo/revenut-app/wiki#data-models

Re: Show HN: TSDiagram – Diagrams as Code with TypeScript

#10

Post by _andrei_ » Tue, Dec 05, 2023, 7:39 AM UTC

girvo wrote: post #5

The web page doesn't work in Firefox :( Looks neat though, I checked it out on my phone. Right up my alley! The error it throws is: TypeError: WeakMap key must be an object, got Be

Yes, sorry, I made a terrible mistake in not testing my state management monstrosity lib in Firefox... Should be working now!