3 ms·

Show HN: TSDiagram – Diagrams as Code with TypeScript

130 points by _andrei_ 3y ago

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.

yodon 3y ago
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?
- _andrei_ 3y ago
  Will add a background switcher!
vanjajaja1 3y ago
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.
throwitaway222 3y ago
Completely blank in firefox
- throwitaway222 3y ago
  it is working now
girvo 3y ago
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
- _andrei_ 3y ago
  Yes, sorry, I made a terrible mistake in not testing my state management monstrosity lib in Firefox... Should be working now!
  - whilenot-dev 3y ago
    Works for me on Firefox/Linux, thanks!
  - danmur 3y ago
    Thank you :)
20after4 3y ago
Since the page doesn't actually work, here's the repo: https://github.com/3rd/tsdiagram https://github.com/3rd/tsdiagram
_andrei_ 3y ago
Firefox update: fixed the issue, guess that's what you get if you roll your own store.
hbcondo714 3y ago
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 https://github.com/hbcondo/revenut-app/wiki#data-models
- _andrei_ 3y ago
  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.
starf1sh 3y ago
One of those "wonder why nobody's thought about this" tools. Awesome idea!
quackware 3y ago
Why is `Record<string, unknown>` converted to `Map<string, unknown>` in the diagram?
- _andrei_ 3y ago
  The label formatter doesn't preserve type, turns Record, Map, WeakMap into Map. Will fix, it's a small change.
yasuocidal 3y ago
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/ https://dbdiagram.io/
- _andrei_ 3y ago
  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.
- karmakaze 3y ago
  Yes I like dbdiagram.io and it's great that we can get something that's more flexible that works the same way.
tanepiper 3y ago
This is actually really nice! We deal with a lot of types - from our headless CMS, GraphQL, Knowledge Graph, etc - so having a visual tool for them help - typescript was the one area missing for it. Now if it can be exported as RDF or Cypher...
graup 3y ago
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/66b186e85bf176e47128d0d6b114cd54038f39d1/src/components/Renderer/Renderer.tsx#L53-L98 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?compressedContent=IYGw5g9gTglgLgCwLYC4AEJgE8CmUcAmAUDiANYB0BM+AxnDBAHboAiA8gOoByRSeYHAFECggM7o4UAK44iTCARwAFTLRz8mcCgCNKAMxgAPQgEEQMME01x0AGSEAxACoceRMQAdgtGEzAUhIIigugAbB7evv6BojjcijjoAIwRXj5+AQpKCUopEZi4+AQU6dEBQcJxAEI4cADuODhMdth4EmgALESFeISlUZmxgrk4tQ1NLW1QHak90-1lQ9nxieONza1FsxHyiWhMAMyHABwArMkAnCedqWgA3hjYENJwaADaaGIwAF5JaFcAEwAGjQlzCaAAumgAL57JQHToABlunWulzOZweTywLzen2+fxSlxBYIh0LhK0RAHZqScSZdGdjCniPl9fv8gaDwVDYfCcAdjodOidTsdOsznq82YTOSTueS+VSmMjDoCzkjqWFLslJbjpQSOcTSTyKfyDskkclhaLqUi9azDUSAfKybzKfsjuKSdSRScHQb2c6uW6zcrAZ00clOmdAVqA-ig3KTYq4ZUDhGozG4xCALQAPkF3rjfpIcQzkZ12fjBcRSLVGq1OrLggrWdjNcLXptYuFLYFTEt1pFhztaFrKtp9MBjMu-YtVp7Y4nmarHYi6cHi5Hy67yNR6Mx863w9t9onx3OVxuc03QpHouF4739fVmu1yWP++jh6xK8r0brse94+n6z51g277NnepwXNctx5l2q6ATmX5TgyTL-u2OZAA https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?c...
- _andrei_ 3y ago
  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-connectors-in-javascript-191dc2c5ff70 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.
fron 3y ago
That'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?
- _andrei_ 3y ago
  Added now, thanks for the idea!
adriannistor 3y ago
Top tool, will be really helpful to vizualize data, gz
raselhanout 3y ago
This 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.
inshadows 3y ago
[dead]

130 points by _andrei_ 3y ago

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.

yodon 3y ago

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?

_andrei_ 3y ago
Will add a background switcher!

vanjajaja1 3y ago

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.

throwitaway222 3y ago

Completely blank in firefox

throwitaway222 3y ago
it is working now

girvo 3y ago

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

_andrei_ 3y ago
Yes, sorry, I made a terrible mistake in not testing my state management monstrosity lib in Firefox... Should be working now!
- whilenot-dev 3y ago
  Works for me on Firefox/Linux, thanks!
- danmur 3y ago
  Thank you :)

20after4 3y ago

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

_andrei_ 3y ago

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

hbcondo714 3y ago

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 https://github.com/hbcondo/revenut-app/wiki#data-models

_andrei_ 3y ago
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.

starf1sh 3y ago

One of those "wonder why nobody's thought about this" tools. Awesome idea!

quackware 3y ago

Why is `Record<string, unknown>` converted to `Map<string, unknown>` in the diagram?

_andrei_ 3y ago
The label formatter doesn't preserve type, turns Record, Map, WeakMap into Map. Will fix, it's a small change.

yasuocidal 3y ago

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/ https://dbdiagram.io/

_andrei_ 3y ago
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.
karmakaze 3y ago
Yes I like dbdiagram.io and it's great that we can get something that's more flexible that works the same way.

tanepiper 3y ago

This is actually really nice! We deal with a lot of types - from our headless CMS, GraphQL, Knowledge Graph, etc - so having a visual tool for them help - typescript was the one area missing for it. Now if it can be exported as RDF or Cypher...

graup 3y ago

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/66b186e85bf176e47128d0d6b114cd54038f39d1/src/components/Renderer/Renderer.tsx#L53-L98 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?compressedContent=IYGw5g9gTglgLgCwLYC4AEJgE8CmUcAmAUDiANYB0BM+AxnDBAHboAiA8gOoByRSeYHAFECggM7o4UAK44iTCARwAFTLRz8mcCgCNKAMxgAPQgEEQMME01x0AGSEAxACoceRMQAdgtGEzAUhIIigugAbB7evv6BojjcijjoAIwRXj5+AQpKCUopEZi4+AQU6dEBQcJxAEI4cADuODhMdth4EmgALESFeISlUZmxgrk4tQ1NLW1QHak90-1lQ9nxieONza1FsxHyiWhMAMyHABwArMkAnCedqWgA3hjYENJwaADaaGIwAF5JaFcAEwAGjQlzCaAAumgAL57JQHToABlunWulzOZweTywLzen2+fxSlxBYIh0LhK0RAHZqScSZdGdjCniPl9fv8gaDwVDYfCcAdjodOidTsdOsznq82YTOSTueS+VSmMjDoCzkjqWFLslJbjpQSOcTSTyKfyDskkclhaLqUi9azDUSAfKybzKfsjuKSdSRScHQb2c6uW6zcrAZ00clOmdAVqA-ig3KTYq4ZUDhGozG4xCALQAPkF3rjfpIcQzkZ12fjBcRSLVGq1OrLggrWdjNcLXptYuFLYFTEt1pFhztaFrKtp9MBjMu-YtVp7Y4nmarHYi6cHi5Hy67yNR6Mx863w9t9onx3OVxuc03QpHouF4739fVmu1yWP++jh6xK8r0brse94+n6z51g277NnepwXNctx5l2q6ATmX5TgyTL-u2OZAA https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?c...

_andrei_ 3y ago
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-connectors-in-javascript-191dc2c5ff70 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.

fron 3y ago

That'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?

_andrei_ 3y ago
Added now, thanks for the idea!

adriannistor 3y ago

Top tool, will be really helpful to vizualize data, gz

raselhanout 3y ago

This 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.

inshadows 3y ago

[dead]