Tiled Hacker news on React Router

D2: Diagram Scripting Language

290 points - 10/25/2025

alixanderwang
10/26/2025
Coauthor 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
rtpg
10/26/2025
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.

mg

10/26/2025

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.

threeducks
10/26/2025
If you are okay with the edges going from right to left instead of left to right, you can do it like this in Python:
```
    def main():
        a, b, c = Node("a"), Node("b"), Node("c")

        edges = [
            a <- b | "first edge",
            b <- c | "second edge",
            c <- a | "third edge",
        ]

        print("Edges:")
        for edge in edges:
            print(edge)

    class Node:
        def __init__(self, name):
            self.name = name

        def __lt__(self, other):
            return Edge(self, other)

        def __neg__(self):
            return self

        def __or__(self, label):
            self.label = label
            return self

    class Edge:
        def __init__(self, a, b):
            self.a = a
            self.b = b

        def __repr__(self):
            return f"{self.a.name} <- {self.b.name}: {self.b.label}"

    main()
```
It works like this:
The '-' sign is interpreted as a unary minus, which is simply discarded.
The '<' symbol is handled by the '__lt__' overload of the Node class.
The '|' operator has precedence over '<' in Python, so the edge label is stored in the right-hand side node.
That being said, I will haunt you if you actually use this in production.
sjrd
10/26/2025
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"
```
mpweiher
10/26/2025
Objective-S supports connections via → or "->".
https://objective.st
https://dl.acm.org/doi/10.1145/3689492.3690052
It can generate GraphViz documents from connected components, but you could probably put in graphical objects.

dragonwriter

10/26/2025

Not 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.

aidenn0
10/26/2025
I 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.
purpleidea
10/26/2025
I'm the main author of 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!
viraptor
10/26/2025
It's got a sketch mode included! https://d2lang.com/tour/sketch/
And tool tips / links: https://d2lang.com/tour/interactive/
Those two make a huge difference for me.
teleforce
10/26/2025
Recent post on D2 (73 comments):
[1] D2 (text to diagram tool) now supports ASCII renders:
https://news.ycombinator.com/item?id=44954524
benzguo
10/25/2025
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!
snowfield
10/26/2025
Love 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.
bargainbin
10/25/2025
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.
benzguo
10/26/2025
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.
nwmcsween
10/26/2025
I 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
spopejoy
10/27/2025
Can somebody ELI5 why this needs to exist vs graphviz? It looks very similar to dot.
h0rv
10/26/2025
[dead]

D2: Diagram Scripting Language

alixanderwang

napoleongl

alixanderwang

Taikonerd

rapnie

the_arun

alixanderwang

Taikonerd

aduwah

mrkstu

aduwah

3abiton

everforward

reality_inspctr

viraptor

alixanderwang

perching_aix

billyp-rva

perching_aix

Zhyl

alixanderwang

htamas

pfraze

fcholf

rtpg

alixanderwang

mg

threeducks

cluckindan

threeducks

sjrd

mpweiher

dragonwriter

aidenn0

nmadden

benzguo

purpleidea

cess11

viraptor

teleforce

dang

benzguo

0x696C6961

tretiy3

benzguo

kitd

liqilin1567

Taikonerd

liqilin1567

snowfield

ris

alixanderwang

bargainbin

__fst__

pphysch

oliyoung

cantor_S_drug

aitchnyu

binsquare

jitl

billyp-rva

binsquare

jitl

billyp-rva

benzguo

ayewo

snowfield

benzguo

dalanmiller

benzguo

nwmcsween

spopejoy

h0rv

fst