Looking at the syntax, I wonder how close one could get to it in a "normal" programming language.
x -> y: hello world
declares a connection between two
shapes, x and y, with the label,
hello world
When I read this, I see this Python line in my mind:
connect('x', 'y', 'hello world')
This is of course a lot longer. The reason is that D2 seems to rather use operators than functions. So another approach could be
'x' * 'y' + 'hello world'
This would be possible to implement if the language supports overloading the __add__ and __mul__ functions of the str class. Python does not support it though. So I guess one would have to put at least one instance of a custom class into the mix. Say 'scene', then one might be able to achieve the above with this line:
scene + 'x' * 'y' + 'hello world'
Meaning "Put a connection between x and y with label 'hello world' into the scene".
Hmm.. also not very close to the D2 syntax. So a DSL for diagrams seems to be warranted.
In Scala you can do it, because you can define your own operators (which are nothing but method names), and you can extend types you don't control. You are a bit constrained by the operator precedence rules, but it's usually good enough.
It's bad practice to make DSLs left and right, obviously. But when one is warranted, you can.
For example here you could have
"x" --> "y" | "hello world"
I have been looking at things like D2 and Penrose, trying to wrap Python around them to make it a bit easier to script up diagrams based on data.
Working through the problem I realize I probably would have a better time with something like Haskell but I do think the lower the barrier to entry is for drawing up stuff with these tools the more people will reach for programmatic diagramming to help debug and explain things.
The biggest problem with most of the declarative tools like D2,dot,mermaid etc is that they tend to not really offer "declare, then tweak" workflows. You can of course generate some SVG and then tweak it in Inkscape, but sometimes you just want to move something a bit after layout, constraints be damned.
Penrose makes that easier, at the cost of ... I guess everything else being weirder and randomized.
D2 has a lot of merits but there’s little that sells it over PlantUML or Mermaid - I do feel like diagrams-as-code is still waiting for a killer program that makes everything else obsolete.
I’m forever chasing that dragon. In the meantime I still recommend D2 if PUML is feeling a bit stale.
What does that killer program need to do?
I don't know exactly but none of the diagram building languages I've used have been a great experience. I guess they just feel "rough in the hands" somehow to me. There's always some point of frustration I get to with the layout systems. They're essential for quickly visualizing graph structures and such but even smaller hand authored ones end up feeling unwieldy too. Can't put it in to works but it feels like there could be a major improvement beyond what even D2 studio offers, when it comes to the language and workflow around it.
I feel similarly about charting libraries.
D2 has been around for a while (and has been posted here before) but still surprisingly unknown. It's so much better than mermaid – giving them a boost with this post!
I like d2 better than mermaid, but mermaid is natively supported in so many places making it the pragmatic choice.
last time i was installing mermaid with npm, noted that installation lasts too long. i checked and found that it is installing headless chrome under the hood...
true, unfortunately not supported in most markdown renderers... generally i've chosen d2 when i want a more intricate/custom diagram
I chose D2 as for our AI's "generate diagram" tool in https://zo.computer and it works quite well. I think the fact that D2 is more expressive than Mermaid is a useful property when doing AI-aided diagram generation.
Hi Ben! Thank you for making LinkedIn/X bearable!