Live data from Hacker News

Show HN: TSDiagram – Diagrams as Code with TypeScript

tsdiagram.com

11–20 of 28 posts

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

#11

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

Happy you like it, no need for any kind of attribution! Will add proper SVG export soon (without foreignObject), it will be much better after that.

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

#15
Wonderful tool! Reminds me of dbdiagram[1] we use at a project of mine, but that one is kinda slow and sometimes messes up the organization just because it felt like it.

Do you have plans on having something like export to SQL or import from SQL?

[1]https://dbdiagram.io/

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

#16
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!

Works for me on Firefox/Linux, thanks!

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

#18

Wonderful tool! Reminds me of dbdiagram[1] we use at a project of mine, but that one is kinda slow and sometimes messes up the organization just because it felt like it. Do you have plans on having something like export to SQL or import from SQL? [1] https://dbdiagram.io/

Shouldn't be hard to do both things, will def. add that. Part of the plan is to switch to Tree-sitter and use other languages as well.

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

#19
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!

Thank you :)

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

#20
Pretty neat! I appreciate the time that went into making the graph render nicely.

I was recently having fun with Reactflow myself. It took a bit of time to figure out custom nodes and edges. I found that ELK 'layered' (with some tweaking of settings) produces very nice layouts, but of course, we can't use its edge routing in real time if we want to allow users to move nodes around. Thanks for pointing me to @tisoap/react-flow-smart-edge ! I also came up with a similar `wasManuallyMoved` logic. https://github.com/3rd/tsdiagram/blob/66b186e85bf176e47128d0...

Reactflow's docs have a decent example for using ELK but I wish it went into a bit more detail regarding these choices.

For tweaking ELK settings, this online editor is also super valuable: https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?c...

Post reply on HN