8 ms·
D2: Diagram Scripting Language
- benzguo 1y agoD2 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!
- 0x696C6961 1y agoI like d2 better than mermaid, but mermaid is natively supported in so many places making it the pragmatic choice.
- benzguo 1y agotrue, unfortunately not supported in most markdown renderers... generally i've chosen d2 when i want a more intricate/custom diagram
- kitd 1y agoMermaid is supported in Github Markdown though. That's a pretty large market by itself.
- tretiy3 1y agolast 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...
- liqilin1567 1y agoI didn't know about D2. Mind sharing features that are better than mermaid?
- Taikonerd 1y agoI'm not the OP, but the reason I started using D2 as opposed to Mermaid is that D2 supports animations: https://d2lang.com/tour/composition/ https://d2lang.com/tour/composition/ In other words, you can have one D2 file that generates `step1.png,` `step2.png`, and `step3.png`. Useful for PowerPoint presentations!
- liqilin1567 1y agoThanks, animation is really an impressive feature.
- bargainbin 1y agoD2 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.
- binsquare 1y agoWhat does that killer program need to do?
- jitl 1y agoI 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.
- billyp-rva 1y ago> I guess they just feel "rough in the hands" somehow to me. I'd be curious to know if Ilograph is among the languages you've tried and if you feel the same way (I'm the author). Making it feel good to edit (the opposite of "rough in the hands"?) is an explicit goal, and to that end there is an IDE with context-aware autocomplete.
- benzguo 1y agoI chose D2 as for our AI's "generate diagram" tool in https://zo.computer 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.
- dalanmiller 1y agoHi Ben! Thank you for making LinkedIn/X bearable!
- benzguo 1y agoahaha hi dalan good to see you here!
- ayewo 1y agoI’m curious: how did you go about the implementation? You built an MCP server for D2?
- teleforce 1y agoRecent post on D2 (73 comments): [1] D2 (text to diagram tool) now supports ASCII renders: https://news.ycombinator.com/item?id=44954524 https://news.ycombinator.com/item?id=44954524
- dang 1y agoThanks! Macroexpanded: D2 (text to diagram tool) now supports ASCII renders - https://news.ycombinator.com/item?id=44954524 https://news.ycombinator.com/item?id=44954524 - Aug 2025 (73 comments) D2: Declarative Diagramming – A modern language that turns text to diagrams - https://news.ycombinator.com/item?id=42033790 https://news.ycombinator.com/item?id=42033790 - Nov 2024 (7 comments) D2 Playground - https://news.ycombinator.com/item?id=39805529 https://news.ycombinator.com/item?id=39805529 - March 2024 (34 comments) D2: Declarative Diagramming - https://news.ycombinator.com/item?id=36224084 https://news.ycombinator.com/item?id=36224084 - June 2023 (3 comments) Generate diagrams programmatically with D2 - https://news.ycombinator.com/item?id=34376143 https://news.ycombinator.com/item?id=34376143 - Jan 2023 (2 comments) D2 language, open source alternative to PlantUML - https://news.ycombinator.com/item?id=34064921 https://news.ycombinator.com/item?id=34064921 - Dec 2022 (70 comments) D2, a diagram scripting language that turns text to diagrams, is now open source - https://news.ycombinator.com/item?id=33704254 https://news.ycombinator.com/item?id=33704254 - Nov 2022 (155 comments) D2: A new declarative language to turn text into diagrams - https://news.ycombinator.com/item?id=32652291 https://news.ycombinator.com/item?id=32652291 - Aug 2022 (126 comments)
- rtpg 1y agoI 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.
- alixanderwang 1y agoD2 does allow custom layout tweaking in the proprietary layout engine. Sadly it's not possible in the open-source ones. https://docs.d2studio.ai/tour/freehand https://docs.d2studio.ai/tour/freehand
- viraptor 1y agoIt's got a sketch mode included! https://d2lang.com/tour/sketch/ https://d2lang.com/tour/sketch/ And tool tips / links: https://d2lang.com/tour/interactive/ https://d2lang.com/tour/interactive/ Those two make a huge difference for me.
- alixanderwang 1y agoCoauthor of D2 here. Lately I've been noodling on the idea of expanding the animation capabilities. I think out loud a bit here, and if you have thoughts, would love to hear them: https://github.com/terrastruct/d2/discussions/2677 https://github.com/terrastruct/d2/discussions/2677
- napoleongl 1y agoWhat is the purpose of those animations? If I could use them in a presentation where I click through a diagram adding things as i click and their connections being animated for highlight then sure. I don’t really like the example where the text changes in you link, the whole diagram jumping around just because a text changes seems like something that would be annoying. So I guess you would need to render everything and keep some things hidden until activated?! As a side not, I would love a proper Swimlane-diagram. I think you have all the building blocks with your ability to nest things in flowcharts, just need to force-align some boxes in different swimlanes and align the lanes themselves (and probably a lot more behind the scenes).
- deleted 1y ago[deleted]
- alixanderwang 1y agoThe purpose is to make use of a dimension of the visual space previously unused to make diagrams more expressive. Even if it's something simple like a node turning from green to red to convey it's shutting down. Maybe something like that before animations would be a text saying, "this node will shut down now", which takes reading/zooming into text. I also think it can, if used well, result in diagrams that ⋆⋆spark joy⋆⋆. People like to see diagrams like that, even if it's not more utilitarian. I think sketch mode is an example of this. It changes the font to an objectively less readable one, yet I often hear people make all their D2 diagrams in sketch mode.
- viraptor 1y agoLevel 4 - dramatic mode ;) https://blog.viraptor.info/dramatic-svg/index.html https://blog.viraptor.info/dramatic-svg/index.html
- mg 1y agoLooking 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.
- sjrd 1y agoIn 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"
- dragonwriter 1y agoNot all "normal languages" (or even "dynamic scripting languages") are created equal. While I wouldn't want to aim for something equivalent to the whole d2 syntax as an internal DSL in Ruby, if you wanted to just create edges with optional labels with a syntax where "bare" edges are: x >> y and edges with labels are: x >> y << "hello world" you can do it like this: class Diagram def initialize @nodes = Hash.new { |h, k| h[k] = Node.new(self, k) } @edges = {} end def node(name) @nodes[name] end def add_edge(edge) @edges[edge.from_node] ||= {} @edges[edge.from_node][edge.to_node] = edge end def all_edges @edges.values.flat_map(&:values) end def interpret &block interpreter = D2.new(self) interpreter.instance_eval(&block) self end def to_s all_edges.map(&:to_s) end def inspect to_s end end class D2 def initialize(diagram = nil) @diagram = diagram || Diagram.new end def method_missing(name, *args) @diagram.node(name) end end class Node def initialize(diagram, name) @diagram = diagram @name = name end def >>(other_node) Edge.new(self, other_node).tap do |edge| @diagram.add_edge(edge) end end def to_s @name end def inspect "Node(#{to_s})" end end class Edge def initialize(from_node, to_node, label = nil) @from_node = from_node @to_node = to_node @label = label end def <<(label) @label = label end def from_node @from_node end def to_node @to_node end def to_s "#{@from_node.to_s} -> #{@to_node.to_s}" + (@label ? ":#@label" : "") end def inspect "Edge(#{to_s})" end end And use it like this: irb(main):090:0> d = Diagram.new => [] irb(main):091:1* d.interpret { irb(main):092:1* x >> y << "hello, world!" irb(main):093:1* y >> z << "goodbye, cruel world!" irb(main):094:0> } => ["x -> y:hello, world!", "y -> z:goodbye, cruel world!"] OF course, this only supports a trivial subset of the functionality, and only "renders" it to a text form more like the original d2 syntax. But it does create an object model from the DSL in the Diagram class for which you could build a renderer.
- snowfield 1y agoLove d2, using it for years. I use it whenever someone asks me to create a visualisation. And I regularly tell people about d2 trying to push it internally haha Enterprise is way too expensive though. And I can't natively render it anywhere. So I'm limited to only personal use. 3000usd / year for a single TALA license is... Well, not justifiable. And I'm not sure how much d2 studio is on top... I'd love to test TALA though, but even the personal license at 120usd is steep for drawing some stuff. Just giving a helm chart or system description to an llm and having it one shot a perfect diagram which code I can easily view and edit is also a big gamechanger for me Sucks to not have it just render natively anywhere, I think confluence cloud can do it. But I think the add on is a paid addon.
- deleted 1y ago[deleted]
- ris 1y agoI can't be the only one to find the TALA output to be the worst of all the engines. I almost always end up using ELK.
- alixanderwang 1y agoWe have examples here, though I need to add more. https://d2lang.com/examples/elk/ https://d2lang.com/examples/elk/ I like ELK's output better sometimes too, e.g. the Golang Queue example. Choice is good
- purpleidea 1y agoI'm the main author of https://github.com/purpleidea/mgmt/ https://github.com/purpleidea/mgmt/ and we use a lot of graphs. (Mostly DAG's actually.) In particular we'll have a DAG and then add nodes and edges to it, and then remove some and so on... It would be nice to visualize these changes. We currently use graphviz, but it's not "stable" so a diagram jumps around a lot when we look at snapshot to snapshot... If (1) we could guarantee some kind of stability and (2) if we could even animate the transitions, that would be incredibly useful for visualization. If this is possible, I'd love to hear about it!
- cess11 1y agoPut d2 watch on a file, replace the file step by step from a script. It's a hack but might be good enough.
- nwmcsween 1y agoI just want prettier default diagrams in d2, the default theme (and other ones) is a hard sell to orgs where management isn't technical. Something similar to the Obsidian diagram theme
- aidenn0 1y agoI love D2; I just wish ELK were the default layout engine; it is extremely rare that Dagre does a better job than ELK, and it took me a while using D2 before I discovered the layout-engine property.
- h0rv 1y ago[dead]
- spopejoy 1y agoCan somebody ELI5 why this needs to exist vs graphviz? It looks very similar to dot.