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/r…
Show HN: TSDiagram – Diagrams as Code with TypeScript
21–28 of 28 posts
Glad we share the same pain!
I'm not happy with the edge routing, it's ok in most cases, but it could be so much better. It's definitely where most of the upcoming development time will go.
I'll bite the bullet and make something custom with what I can learn from react-fow-smart-edge and https://medium.com/swlh/routing-orthogonal-diagram-connector..., I really really want the edges not to overlap, but be a bit spaced out, so it's clear where each one goes.
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#22That's super cool! Is there a way to save the editor and diagram state into a URL hash so we can share tsdiagram links with others, similar to how the TypeScript Playground works?
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#23Wonderful 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/
Yes I like dbdiagram.io and it's great that we can get something that's more flexible that works the same way.
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#24Top tool, will be really helpful to vizualize data, gz
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#25This is wonderful! We also use typescript to define our data/database structure for our non-ts projects and this could be a very handy tool. I will definitely use it whenever I get a chance to.
One thing that could be improved are the overlapping lines. In the example, the Node->Node and Node->Task lines are undistinguishable.
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#26[dead]
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#27Completely blank in firefox
it is working now
Re: Show HN: TSDiagram – Diagrams as Code with TypeScript
#28That's super cool! Is there a way to save the editor and diagram state into a URL hash so we can share tsdiagram links with others, similar to how the TypeScript Playground works?
Added now, thanks for the idea!