Show HN: TSDiagram – Diagrams as Code with TypeScript

The web page doesn&#x27;t work in Firefox :( Looks neat though, I checked it out on my phone. Right up my alley!<p>The error it throws is:<p><pre><code> TypeError: WeakMap key must be an object, got Be</code></pre>

Pretty neat! I appreciate the time that went into making the graph render nicely.<p>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 &#x27;layered&#x27; (with some tweaking of settings) produces very nice layouts, but of course, we can&#x27;t use its edge routing in real time if we want to allow users to move nodes around. Thanks for pointing me to @tisoap&#x2F;react-flow-smart-edge ! I also came up with a similar `wasManuallyMoved` logic. <a href="https:&#x2F;&#x2F;github.com&#x2F;3rd&#x2F;tsdiagram&#x2F;blob&#x2F;66b186e85bf176e47128d0d6b114cd54038f39d1&#x2F;src&#x2F;components&#x2F;Renderer&#x2F;Renderer.tsx#L53-L98">https:&#x2F;&#x2F;github.com&#x2F;3rd&#x2F;tsdiagram&#x2F;blob&#x2F;66b186e85bf176e47128d0...</a><p>Reactflow&#x27;s docs have a decent example for using ELK but I wish it went into a bit more detail regarding these choices.<p>For tweaking ELK settings, this online editor is also super valuable: <a href="https:&#x2F;&#x2F;rtsys.informatik.uni-kiel.de&#x2F;elklive&#x2F;elkgraph.html?compressedContent=IYGw5g9gTglgLgCwLYC4AEJgE8CmUcAmAUDiANYB0BM+AxnDBAHboAiA8gOoByRSeYHAFECggM7o4UAK44iTCARwAFTLRz8mcCgCNKAMxgAPQgEEQMME01x0AGSEAxACoceRMQAdgtGEzAUhIIigugAbB7evv6BojjcijjoAIwRXj5+AQpKCUopEZi4+AQU6dEBQcJxAEI4cADuODhMdth4EmgALESFeISlUZmxgrk4tQ1NLW1QHak90-1lQ9nxieONza1FsxHyiWhMAMyHABwArMkAnCedqWgA3hjYENJwaADaaGIwAF5JaFcAEwAGjQlzCaAAumgAL57JQHToABlunWulzOZweTywLzen2+fxSlxBYIh0LhK0RAHZqScSZdGdjCniPl9fv8gaDwVDYfCcAdjodOidTsdOsznq82YTOSTueS+VSmMjDoCzkjqWFLslJbjpQSOcTSTyKfyDskkclhaLqUi9azDUSAfKybzKfsjuKSdSRScHQb2c6uW6zcrAZ00clOmdAVqA-ig3KTYq4ZUDhGozG4xCALQAPkF3rjfpIcQzkZ12fjBcRSLVGq1OrLggrWdjNcLXptYuFLYFTEt1pFhztaFrKtp9MBjMu-YtVp7Y4nmarHYi6cHi5Hy67yNR6Mx863w9t9onx3OVxuc03QpHouF4739fVmu1yWP++jh6xK8r0brse94+n6z51g277NnepwXNctx5l2q6ATmX5TgyTL-u2OZAA" rel="nofollow noreferrer">https:&#x2F;&#x2F;rtsys.informatik.uni-kiel.de&#x2F;elklive&#x2F;elkgraph.html?c...</a>

That&#x27;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?

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.<p>Do you have plans on having something like export to SQL or import from SQL?<p>[1]<a href="https:&#x2F;&#x2F;dbdiagram.io&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;dbdiagram.io&#x2F;</a>

Firefox update: fixed the issue, guess that&#x27;s what you get if you roll your own store.

Thanks for sharing! I generated a png and added it to my repo&#x27;s wiki with an acknowledgment to your repo:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;hbcondo&#x2F;revenut-app&#x2F;wiki#data-models">https:&#x2F;&#x2F;github.com&#x2F;hbcondo&#x2F;revenut-app&#x2F;wiki#data-models</a>

One of those &quot;wonder why nobody&#x27;s thought about this&quot; tools. Awesome idea!

This is actually really nice! We deal with a <i>lot</i> 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.<p>Now if it can be exported as RDF or Cypher...

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.<p>Is there a way to turn off the dot grid?

This is wonderful! We also use typescript to define our data&#x2F;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.<p>One thing that could be improved are the overlapping lines. In the example, the Node-&gt;Node and Node-&gt;Task lines are undistinguishable.

Completely blank in firefox

Since the page doesn&#x27;t actually work, here&#x27;s the repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;3rd&#x2F;tsdiagram">https:&#x2F;&#x2F;github.com&#x2F;3rd&#x2F;tsdiagram</a>

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

Why is `Record&lt;string, unknown&gt;` converted to `Map&lt;string, unknown&gt;` in the diagram?

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