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)
I thought your playground wasn't working as it renders black text on black background. Maybe I have darkmode enabled or something. Other renderers work, but ascii is invisible.
So from TFA it just downscales from ELK? Do I have to specify ELK for this to work, or will it automagically enable if I try to output a .txt? (Really I'm just curious becasue I use ELK already for most of my d2 diagrams).
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.
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)
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.
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.
Yes, but why have all that effort in spinning a web server when I can just give a link to a place where I have embedded the chart? Or even embed it in whatever chat you have that presentation on? Don't need the binary anywhere, that's the strength of Mermaid
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.
Like I said, I know nothing of this Mermaid and did not make such a comparison, and I'm fine with it since all I want to produce is a SVG that I can then embed wherever and D2 is more than adequate for this purpose.
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.
1. It depends on what you value =). For some, those 2 you mentioned are enough. For others, it can be something like the our CLI doesn't require a chromium browser to render SVGs (https://news.ycombinator.com/item?id=31275754). It doesn't cover every difference, but we made a little comparison site if it helps: https://text-to-diagram.com
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
By the way, it looks like the MermaidJS implementation of the WiiU example is broken due to subgraphs not creating namespaces. That is, the `rom` node in the `amd` subgraph is overwriting the one in the `ibm` subgraph.
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.
> 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.
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.
Using it - better: used it. It's outdated, doesn't understand key words of recent D2 - versions and doesn't integrate well with emacs, i.e. default key bindings are IMHO not very emacsish.
Yeah that one's a community plugin vs an officially maintained one, which can have a range of activity from graveyard to some being maintained better than many of our official ones. That maintainer seems active on GitHub though and the d2-emacs plugin is his top pinned repo (https://github.com/andorsk), I think he'd be receptive if you let him know your interest!
Vim is basically dead. Most new plugins are written in Lue (for Neovim). I don’t like Lue much but it’s 1000x better than vim script. I occasionally tweak my Neovim plugins but don’t bother with those written in Vimscript.
Unfortunately not, I've tried reaching out to GH folks but no dice. However it should be noted that d2.js, which enables client-side renders, didn't really become usable until this month and still isn't really officially released (kind of hidden). So, we'll see if the official release (soon™) changes things. If any D2-enjoyers reading this knows anyone on the GH frontend team, plz bend their ear =)
Good luck, it would be fantastic if you can get it accepted as a mermaid alternative; it's much, much niceer than mermaid, both the visual result, and the language. I've used D2 heavily for a couple of years or so now. It's really fantastic. I hope you're paid product is healthy. Sequence diagrams are my most common diagram type by some way I think. And I seem to always use the sketch rendering over the last year.
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).
No, sadly. That's still the biggest obstacle for a lot of my documentation. I push mermaid perhaps a little farther than it wants to go just so I don't have to spend the time setting up a CI pipe to compile the D2 into a PNG which is embedded in the documentation.
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.
> Llm to text to diagram is the killer workflow these days.
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.
i think d2 looks sick , and i'm not op, but i do love just describing my system and telling the LLM to draw it. so having it "draw" d2 seems like a great new step?
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
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...