Hello fellow devs. Just wanted to share a new feature we added this morning, though it's very alpha stage (already someone's filed a github issue for it hah)
Just wanted to thank you for a great tool :-). I love d2 and ever since I discovered it a couple of years back I've been using it for all my diagramming needs.
Llm to text to diagram is the killer workflow these days.
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.
I maintain a list of browser based text to diagram tools (which I have shared a number of times here). I recently realised that the online version of D2 does NOT work solely in browser, diagram's are generated by backend servers.
Can D2 work in browser by itself? Does the extension mentioned in the post work offline? (lots of tools do)
Clearly things have changed a bit recently but since a long time I use D2 exclusively locally. The binary has a watch mode that starts a web server and pushes changes on save so you can interactively develop your diagrams and e.g. share the web browser over a video conference or such.
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.
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.
Oh, this is excellent! The syntax of D2 is very compelling but the tooling of Mermaid has unfortunately made it win out for me more times than not in the last few years. This, however, is a genuinely novel thing that I don't think I've seen Mermaid do. Bridges the gap to https://asciiflow.com/ quite nicely.
1. how does this add value over mermaid? I like how it looks and works, but is there any real reason to switch over.
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.
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.
27 comments
[ 2.7 ms ] story [ 54.5 ms ] threadIf 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...
Thanks again and keep up the good work!
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.
I dont really using Dlang now - but still interested in the language. This click was a win-win either way!
Can D2 work in browser by itself? Does the extension mentioned in the post work offline? (lots of tools do)
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.
This new feature is interesting!
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.
Having to figure out the exact pixel widths defeats the point of these tools, at least for me.
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.
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.
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.
https://text-to-diagram.com/