\

D2: Diagram Scripting Language

163 points - yesterday at 10:40 PM

Source
  • mg

    today at 4:42 AM

    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

        today at 11:23 AM

        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

          today at 5:51 AM

          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"

          • dragonwriter

            today at 9:31 AM

            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.

        • alixanderwang

          today at 3:10 AM

          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

            • viraptor

              today at 11:46 AM

              Level 4 - dramatic mode ;) https://blog.viraptor.info/dramatic-svg/index.html

              • perching_aix

                today at 12:34 PM

                I'm a bit surprised at the first "cool slop" example, I'd expect a "more tangible" (by way of animation) data flow visualization to be useful rather than fluff. Though since it's not dynamic (it's not based on live data or anything), maybe that's why it'd be superfluous?

                  • billyp-rva

                    today at 12:50 PM

                    It's superfluous because the arrow already points in a direction; the line animation doesn't tell you anything the arrowhead doesn't.

                • napoleongl

                  today at 7:45 AM

                  What 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).

                    • today at 12:35 PM

              • rtpg

                today at 1:40 AM

                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.

              • purpleidea

                today at 10:15 AM

                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!

                  • cess11

                    today at 12:29 PM

                    Put d2 watch on a file, replace the file step by step from a script.

                    It's a hack but might be good enough.

                • viraptor

                  today at 2:54 AM

                  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.

                  • snowfield

                    today at 7:28 AM

                    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.

                      • ris

                        today at 10:23 AM

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

                        • today at 7:41 AM

                      • teleforce

                        today at 12:28 AM

                        Recent post on D2 (73 comments):

                        [1] D2 (text to diagram tool) now supports ASCII renders:

                        https://news.ycombinator.com/item?id=44954524

                        • bargainbin

                          yesterday at 11:58 PM

                          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.

                            • __fst__

                              today at 7:21 AM

                              Main "killer" features for me are:

                              - d2 is a standalone executable compiler, I once tried mermaid-cli (mmdc) but couldn't get it to work properly plus anything I need to install with npm scares the hell out of me

                              - ASCII rendering: I love rendering to ASCII which I can copy-paste around.

                              But I do use mermaid a lot embedded in other programs (e.g Obisidian). The selection of different diagram types is amazing.

                              • binsquare

                                today at 3:47 AM

                                What does that killer program need to do?

                                  • jitl

                                    today at 5:29 AM

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

                            • benzguo

                              yesterday at 11:50 PM

                              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!

                                • 0x696C6961

                                  yesterday at 11:53 PM

                                  I like d2 better than mermaid, but mermaid is natively supported in so many places making it the pragmatic choice.

                                    • tretiy3

                                      today at 5:01 AM

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

                                      • benzguo

                                        yesterday at 11:58 PM

                                        true, unfortunately not supported in most markdown renderers... generally i've chosen d2 when i want a more intricate/custom diagram

                                          • kitd

                                            today at 10:35 AM

                                            Mermaid is supported in Github Markdown though. That's a pretty large market by itself.

                                • benzguo

                                  today at 12:02 AM

                                  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.

                                    • ayewo

                                      today at 7:06 AM

                                      I’m curious: how did you go about the implementation? You built an MCP server for D2?

                                        • snowfield

                                          today at 7:24 AM

                                          D2 can be locally compiled. Llms are pretty good at generating d2 too. So all you need is to tell the LLM what to do tbh.

                                          Not my project but no need for an mcp I'd think

                                      • dalanmiller

                                        today at 2:55 AM

                                        Hi Ben! Thank you for making LinkedIn/X bearable!