[HN Gopher] Show HN: TSDiagram - Diagrams as Code with TypeScript
___________________________________________________________________
Show HN: TSDiagram - Diagrams as Code with TypeScript
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.
Author : _andrei_
Score : 113 points
Date : 2023-12-05 02:01 UTC (21 hours ago)
(HTM) web link (tsdiagram.com)
(TXT) w3m dump (tsdiagram.com)
| yodon wrote:
| 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_ wrote:
| Will add a background switcher!
| vanjajaja1 wrote:
| 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 wrote:
| Completely blank in firefox
| girvo wrote:
| 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_ wrote:
| Yes, sorry, I made a terrible mistake in not testing my state
| management monstrosity lib in Firefox... Should be working now!
| whilenot-dev wrote:
| Works for me on Firefox/Linux, thanks!
| danmur wrote:
| Thank you :)
| 20after4 wrote:
| Since the page doesn't actually work, here's the repo:
| https://github.com/3rd/tsdiagram
| _andrei_ wrote:
| Firefox update: fixed the issue, guess that's what you get if you
| roll your own store.
| hbcondo714 wrote:
| 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
| _andrei_ wrote:
| 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.
| quackware wrote:
| Why is `Record<string, unknown>` converted to `Map<string,
| unknown>` in the diagram?
| _andrei_ wrote:
| The label formatter doesn't preserve type, turns Record, Map,
| WeakMap into Map. Will fix, it's a small change.
| starf1sh wrote:
| One of those "wonder why nobody's thought about this" tools.
| Awesome idea!
| yasuocidal wrote:
| 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/
| _andrei_ wrote:
| 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 wrote:
| Yes I like dbdiagram.io and it's great that we can get
| something that's more flexible that works the same way.
| tanepiper wrote:
| 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 wrote:
| 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...
| _andrei_ wrote:
| 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.
| fron wrote:
| 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?
| adriannistor wrote:
| Top tool, will be really helpful to vizualize data, gz
| raselhanout wrote:
| 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.
___________________________________________________________________
(page generated 2023-12-05 23:02 UTC)