If you want to skip the blog post and poke around directly: https://play.d2lang.com/?script=qlDQtVOotFLIyFTwSEzOTi1S8Est...
For a bigger example: https://play.d2lang.com/?script=rJJBjtswDEX3OgWBrm2kzU4Feoru...
edit: fixed
Thanks again and keep up the good work!
Having to figure out the exact pixel widths defeats the point of these tools, at least for me.
Could you also get d2 into GitHub and Notion while you have it here :)
Can D2 work in browser by itself? Does the extension mentioned in the post work offline? (lots of tools do)
Check out the network tab in the d2 playground. It's powered by d2.js, a wrapper around a wasm port of d2, which we've recently been working on. Not super officially ready yet but soon to be, and will be a separate announcement.
I don't know about that Mermaid thing others are talking about in the thread so I can't compare but D2 is very easy to learn the basics of and get started with. Like a few minutes from install to your first diagram kind of easy.
Until that D2 wasm port is officially released, I don't think it's even fair to call D2 competition to Mermaid, it's on a complete other level of useability. I'm glad to see that it's close to releasing.
Edit: found it! Thanks.
2. in my opinion, what all these tools are missing is the ability to add a manual „corrective“ layer, meaning to be able to adjust the automatically created output by moving and resizing boxes by a certain x/y amount.
2. I'm not trying to advertise our paid product in this post about the open source product, but since you mentioned it, we make an IDE that adds the ability to lock in positions and dimensions: https://docs.terrastruct.com/tour/freehand
As a longtime Mermaid user that just started trying out D2 recently:
* D2's syntax is much less cumbersome to write and, from the features provided, I would expect maintain because of better abstractions.
* While D2 supports fewer canned diagram types out-of-the-box (a big advantage for Mermaid), D2 has better composition support (via layers and scenarios, particularly) than Mermaid, which is a killer feature for lots of use cases. If I need a Sankey diagram, obviously, Mermaid wins; if I want to do a leveled DFD, while I could in theory use either, D2 is much better.
* D2 has more freedom for mixing elements, because instead of being oriented around diagram types, it uses some special shapes within what amounts to a single universal diagram type ("sequence diagrams" work a bit like a diagram type, but the diagram itself is a shape that can be used like other shapes, and tables [as used in ERDs] and classes [as used in UML class diagrams] are also just shapes, not a construct available in particular diagram types.)
> in my opinion, what all these tools are missing is the ability to add a manual „corrective“ layer, meaning to be able to adjust the automatically created output by moving and resizing boxes by a certain x/y amount.
Technically, I think you can do that in Mermaid (by attaching CSS classes to the nodes that do the actual nudging) if you really want to.
Something like Struturizr? https://structurizr.com/
> I like how it looks and works
Those are "real reasons".
I hadn't heard of D2, but I love the idea that I can create my charts directly in Neovim in the terminal to get a rough draft, and do a final render with a pretty picture.
I will be playing with this shortly.
I discovered D2 about a year ago, and I use it for all of my diagrams now.
There's a sort of elegance to ASCII rendering.
I have experimented with other text-based diagrams - but this certainly looks interesting.
While I am always forced (at workplace) to use a GUI-based diagram like Visio... I see more merit to this one.
Definitely worth a play with my home-based or own business setups.
I am happy. Something to play with tonight.
While you're here, can I mention a feature request? I'd like to be able to put clickable hyperlinks into sequence diagram arrow labels (e.g. so I can link the message to where in the code it occurs).
Also, I'd like more control over vertical spacing in sequence diagrams, and perhaps the ability to define groups of columns (just visually grouped).
The key challenge is making these things presentable. Optimizing them for human editability is a secondary concern at this point. This is where a lot of these tools fall apart.
It's useful, but I think only marginally. When using a diagrams-as-code tool, having an LLM write it for you gets you up and running faster, but long term you have more control (and no hallucinations) just writing the code yourself. It'll probably be fewer keystrokes in the end. Doubly so if your diagrams-as-code tool has decent autocomplete.
when you want to make changes, you update your docs/design and repeat. think system design interview but you skip drawing it yourself at all and then sanity check your own work by interpreting the resulting graph etc
I dont really using Dlang now - but still interested in the language. This click was a win-win either way!
This new feature is interesting!
In escaped form:
\x20\n\x20\n\x20\n\n