CSS must be the hardest technology out there, because people write these algorithms yet their site breaks completely on iOS safari on an iPhone SE2. Reminded me of when Linear’s CEO shared a post on Twitter bragging about how they only hired the best devs, and then I sent a screenshot of their homepage with a broken horizontal scroll. They dismissed it as a fault on my end for having an unsupported device. Turns out that a single CSS2 directive from 1998 fixed the issue (my OS is from 2022).
css actually is hard, but layout is hard in general. it's a surprisingly difficult and computationally expensive problem to do things that look instinctively easy to humans.
The first few graphs are impressive, it does a much tidier job. The Go queue one is objectively worse - the other versions keep services and users grouped together, as well as a left-to-right flow. The TALA version makes it look more complicated than it is.
TALA is terrible at respecting the "direction: <up, down, left, right>" directive. It should choose an aspect ratio based on the direction, but instead it is trying to make the diagram as square as possible.
For the first one, Elk makes it obvious that everything is flowing into “database” or “reports.” This seems like an important part of the design.
The post mentions that it doesn’t do DAG as well as Dagre or Elk, so, known and honestly stated limitation. I wonder if it would have been better to start with the SoC or AWS example, though.
That's nice; my first impressions of D2 were much worse than they should have been since the default layout engine is pretty terrible for some types of graphs; ELK is a big improvement, and when I tried TALA it was sometimes a big improvement over ELK.
I never purchased TALA though because I don't use D2 at work, and the costs of buying TALA were above my "fun money" amount.
KUDOS! KUDOS! and even more KUDUS! this engine is indeed excellent, and is great contribution to everyone doing architecture around the world. Would continue using it with much love and appreciation. Also - rushing myself to the donate button which leads here precisely
then after discovering it, I was too invested in my own project to switch -- the complexity in positioning nodes, routing edges to not draw over labels, taking into account nesting and rank dir gave me an appreciation for how hard these can be, and I kinda wanted my own version (plus other features)
Always happy to see D2 on here! In my last job, I had to do several architecture diagrams. Learning D2 took maybe 1 day, and saved me much more time than that.
This is great! There's a real shortage of good layout algorithms. Everyone pretty much gave up after Graphviz.
Although tbh I have come to the conclusion that automatic layout algorithms don't work very well for large diagrams and don't save you much effort for smaller diagrams.
What I really want is some kind of interactive editor that has a go, but lets me drag nodes into more sensible positions while maintaining all the arrows. Maybe this makes that easier given its support for specifying node positions?
Another tool, that I used in the past (though not for business, because the license is ridiculously expensive) is yed graph editor. Out of all the tools I have ever used for making diagrams, it remains the one that is the most precise, good looking results, also supports auto-layout algorithms, and makes placement and aligning things easy, as well as allowing one to import more shapes and diagram types. Over time I accumulated quite a few collections of shapes. Too bad I can't even propose to use it at any job.
Nit: TALA could be another layout engine for graphviz but its not a format itself (I suggested this in comments above). Graphviz also doesn’t imply specific layout unless you mean “dot” that is default. So conversion is somewhat undefined. Maybe you mean graphviz language to d2, afaik there is no official, 100% loss-less automatic translator because of some subtle differences in these declarative languages
CSS must be the hardest technology out there, because people write these algorithms yet their site breaks completely on iOS safari on an iPhone SE2. Reminded me of when Linear’s CEO shared a post on Twitter bragging about how they only hired the best devs, and then I sent a screenshot of their homepage with a broken horizontal scroll. They dismissed it as a fault on my end for having an unsupported device. Turns out that a single CSS2 directive from 1998 fixed the issue (my OS is from 2022).
css actually is hard, but layout is hard in general. it's a surprisingly difficult and computationally expensive problem to do things that look instinctively easy to humans.
Ironic given the product is a layout engine.
The first few graphs are impressive, it does a much tidier job. The Go queue one is objectively worse - the other versions keep services and users grouped together, as well as a left-to-right flow. The TALA version makes it look more complicated than it is.
I thought "how bad could it be" and I was quite surprised :)
That's spectacularly obfuscated in comparison to the rest.
The post does highlight that in the introduction:
> It doesn't do DAGs as well. I often find myself preferring Dagre or ELK when I want a long flowing graph.
TALA is terrible at respecting the "direction: <up, down, left, right>" directive. It should choose an aspect ratio based on the direction, but instead it is trying to make the diagram as square as possible.
For the first one, Elk makes it obvious that everything is flowing into “database” or “reports.” This seems like an important part of the design.
The post mentions that it doesn’t do DAG as well as Dagre or Elk, so, known and honestly stated limitation. I wonder if it would have been better to start with the SoC or AWS example, though.
That's nice; my first impressions of D2 were much worse than they should have been since the default layout engine is pretty terrible for some types of graphs; ELK is a big improvement, and when I tried TALA it was sometimes a big improvement over ELK.
I never purchased TALA though because I don't use D2 at work, and the costs of buying TALA were above my "fun money" amount.
KUDOS! KUDOS! and even more KUDUS! this engine is indeed excellent, and is great contribution to everyone doing architecture around the world. Would continue using it with much love and appreciation. Also - rushing myself to the donate button which leads here precisely
https://hcb.hackclub.com/donations/start/d2
before discovering d2, I wrote / vibe coded my own diagram generator: https://azriel.im/disposition
then after discovering it, I was too invested in my own project to switch -- the complexity in positioning nodes, routing edges to not draw over labels, taking into account nesting and rank dir gave me an appreciation for how hard these can be, and I kinda wanted my own version (plus other features)
Always happy to see D2 on here! In my last job, I had to do several architecture diagrams. Learning D2 took maybe 1 day, and saved me much more time than that.
Would integrating/implementing this into graphviz be a good move or mixing wrong things?
Thanks for that. What do you think are the key heuristics / concepts that made it standout or be more appropriate for architecture diagrams?
I'm so happy about this, we desperately need better auto layout. I'll be adding it to Daedalus
Related:
D2 Is Non-Profit
https://news.ycombinator.com/item?id=49589768
This is great! There's a real shortage of good layout algorithms. Everyone pretty much gave up after Graphviz.
Although tbh I have come to the conclusion that automatic layout algorithms don't work very well for large diagrams and don't save you much effort for smaller diagrams.
What I really want is some kind of interactive editor that has a go, but lets me drag nodes into more sensible positions while maintaining all the arrows. Maybe this makes that easier given its support for specifying node positions?
Another tool, that I used in the past (though not for business, because the license is ridiculously expensive) is yed graph editor. Out of all the tools I have ever used for making diagrams, it remains the one that is the most precise, good looking results, also supports auto-layout algorithms, and makes placement and aligning things easy, as well as allowing one to import more shapes and diagram types. Over time I accumulated quite a few collections of shapes. Too bad I can't even propose to use it at any job.
I just started diagramming with d2- I'll have to try this one out!
This actually looks great. have to try it out!
Now I need a Graphviz/Dotty to TALA converter. Any good ones out there?
Nit: TALA could be another layout engine for graphviz but its not a format itself (I suggested this in comments above). Graphviz also doesn’t imply specific layout unless you mean “dot” that is default. So conversion is somewhat undefined. Maybe you mean graphviz language to d2, afaik there is no official, 100% loss-less automatic translator because of some subtle differences in these declarative languages
Looks like really great tool to generate some graphs and diagrams for static file blogs.