12 ms·

D2: A new declarative language to turn text into diagrams

• rgrieselhuber 4y ago
  Looks cool. Any inherent limitations or performance issues with graphs that are very large? (20M+ elements)
  • samatman 4y ago
    Why uh. Would you expect that to work? How much of your life were you planning to dedicate to scrolling from one side of the image to another?
    • guhidalg 4y ago
      I think he expects to be able to zoom out.
      • rgrieselhuber 4y ago
        Yup for zoomed out views. It’s handy when visualizing large websites.
  • mkl95 4y ago
    Unless you use instanced rendering via some GPU API it's going to take some galaxy brain code to make that work.
    • zero_shift 4y ago
      Forget about rendering, just doing the layout would be extremely challenging.
      • stragies 4y ago
        Some of the graphs (near the bottom) of the GraphViz example page are quite large: https://graphviz.org/gallery/ https://graphviz.org/gallery/ And there's a link to a gallery with even bigger ones, so #NumberOfNodes alone does not seem to be the main limiting metric. Maybe combined with the choice of rendering layout.
    • lmeyerov 4y ago
      We do webgl rendering of big graphs as part of Graphistry, and before the 20M nodes break the system, the ~10X more edges will ;+) But more seriously, a careful webgl implementation gets you maybe halfway there, and most I've seen break well before then. It gets tricky with browser js memory limits and raw perf. We are looking into hitting more 100M level with interactive speeds... But takes creativity & opts I wouldn't expect for a diagramming tool :) and, if your kind of thing, we are hiring :)
  • alixanderwang 4y ago
    we're going to have to fallback to stable diffusion for that one
• nerdponx 4y ago
  A declarative language for diagrams without so much as a passing mention of Graphviz, or even Mermaid.js anywhere in the docs? It does look like a material upgrade from Graphviz, but even so...
  • stragies 4y ago
    graphviz svg output can be (with some tricks) CSS-styled + JS-animated, so the sky is the limit w.r.t. how fancy you want to make you DOT graphs, and their elements.
    • convolvatron 4y ago
      actually the effective limit seems to be around 50 nodes
      • stragies 4y ago
        Limit of what exactly? I've made much bigger than 50 nodes SVG-graphs using GV, and styled them with probably 50+ CSS styles and animated more than 50 nodes. So, could you please elaborate?
        • jgalt212 4y ago
          50 nodes may be close the limit of what a human can understand.
        • convolvatron 4y ago
          sorry...I do language development sometimes and GV (dot) has been a godsend for debugging. but at a certain size it just goes sideways and stops being useful and is more of a distraction. to be fair I think this more of a fundamental problem about visual understanding than some screwup in GV
• abeppu 4y ago
  The last question in the FAQ makes it clear that this can only be used in the context of their account-based online tool. Their free offering literally says "3 diagrams". Above this, the FAQ tries to compare their tool to Mermaid, Graphviz, PlantUML which are all open source, locally runnable, etc. Their comparison totally skips the fact that, because D2 can only be used in their service, a broad number of use cases (including programmatically generating diagrams inside some other application) basically aren't supported. Seems like it could have been cool, but likely will not seriously try it because of these limits.
  • kevmoo1 4y ago
    Agreed! Interesting idea, but charging for this is not going to get them very far. Gotta find a way to do an "open core" or similar.
  • geraldwhen 4y ago
    This is a complete non starter for any regulated industry. Shame. Mermaid works almost okay and often looks like garbage. I wish there was an open source effort somewhere to do better, or even a paid locally runnable tool that has no service connections.
    • Veuxdo 4y ago
      Ilograph [0] is a similar (and, in my biased opinion, better) tool that has a 100% local runtime option (called Ilograph Desktop). You can still test-drive it with the browser version, of course. [0] https://www.ilograph.com https://www.ilograph.com
    • JohnHaugeland 4y ago
      Here's an option: https://stonecypher.github.io/jssm-viz-demo/graph_explorer.html https://stonecypher.github.io/jssm-viz-demo/graph_explorer.h...
    • tonerow 4y ago
      It won't work for every use case but https://flowchart.fun https://flowchart.fun is one open-source alternative
• deleted 4y ago
  [deleted]
• Terretta 4y ago
  See also: https://structurizr.com/ https://structurizr.com/ - diagrams as code https://c4model.com/ https://c4model.com/ - C4 model for visualising software architecture The consistency of structurizr + c4 is great for sharing information across scaled teams of teams.
  • howeyc 4y ago
    also: https://pikchr.org/ https://pikchr.org/
  • michaelsbradley 4y ago
    also: The XState Visualizer generates nice looking statecharts. https://stately.ai/viz https://stately.ai/viz Click See an example in the left pane, then click Visualize at the bottom of the right pane. On the roadmap are visualizations for XState's actors facility, i.e. multiple statecharts interacting with one another. If you login, you can save/fork statecharts and get shareable links for them. There doesn't seem to be a way to export the diagrams (as PNG or SVG) but maybe that will be added in the future.
• ducktective 4y ago
  Is there a declarative language or framework for creating ad-hoc GUIs that consume structured data from stdin stream and spit-out a GUI? Like feedgnuplot [1] but not only restricted to graphs. [1] https://github.com/dkogan/feedgnuplot https://github.com/dkogan/feedgnuplot
  • ajstarks 4y ago
    Not a GUI, per se, but there is decksh [1] and dchart: [2] [1] https://speakerdeck.com/ajstarks/decksh-object-reference https://speakerdeck.com/ajstarks/decksh-object-reference [2] https://speakerdeck.com/ajstarks/dchart-charts-from-deck-markup https://speakerdeck.com/ajstarks/dchart-charts-from-deck-mar...
• keyboardclicker 4y ago
  Time for someone to copy the good parts and implement them as FOSS. Good luck getting enterprises to pay for diagrams.
  • stuart78 4y ago
    At the end of the video the presenter mentions that they plan to open source the language when it reaches a greater stage of maturity.
    • clcaev 4y ago
      A code dump does not make it an open source project. Sustainable OSS projects are developed publicly.
      • sharkster711 4y ago
        That's probably why they're doing a code dump
        • stragies 4y ago
          The language spec, or the rendering backend code? And even if the "complete package", if the "locally runable version" is an afterthought of the OnlineWebVersion, have previous situations like that not regularly resulted in *Paks wrapping an electron instance with some blobs under the hood?
  • zactato 4y ago
    Lucidchart has entered the chat.
• whalesalad 4y ago
  Something was posted here recently in a similar light - does anyone recall what it was?
  • tonerow 4y ago
    This was up yesterday https://news.ycombinator.com/item?id=32637689 https://news.ycombinator.com/item?id=32637689 It's similar in that it's a diagramming DSL
  • jrib 4y ago
    there are a few of these tools but https://news.ycombinator.com/item?id=31273777 https://news.ycombinator.com/item?id=31273777 was a recent reference to https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
• kgm 4y ago
  I am taken a little aback by the name. There is, of course, already the D programming language, which has even had a major version number of 2 for quite some time. It also brings to mind the JavaScript library d3, which, while not strictly for making diagrams, can easily lend itself to the purpose. Calling this thing "D2" seems potentially confusing.
  • snowcorn 4y ago
    We have: "D" the programming language [0] "D" the data language specification [1] "D" the programming language for DTrace [2] "D3" the javascript library [3] "D4" library/tool for Declarative Data-Driven Documents[4] "D4" implementation[5] of the data language specification[1] Overall, I think "D2" is objectively the best choice here. We have at least three "D"s, two "D4"s, and one "D3", so it makes sense to put it in as "D2". I certainly wouldn't want another "D" or, heaven forbid, a "D5". [0]: https://en.wikipedia.org/wiki/D_(programming_language) https://en.wikipedia.org/wiki/D_(programming_language) [1]: https://en.wikipedia.org/wiki/D_(data_language_specification) https://en.wikipedia.org/wiki/D_(data_language_specification... [2]: https://en.wikipedia.org/wiki/DTrace#Description https://en.wikipedia.org/wiki/DTrace#Description [3]: https://d3js.org/ https://d3js.org/ [4]: https://github.com/joelburget/d4 https://github.com/joelburget/d4 [5]: https://en.wikipedia.org/wiki/Dataphor#Languages https://en.wikipedia.org/wiki/Dataphor#Languages
    • tomwojcik 4y ago
      As a gamer, after reading just "D2" my brain immediately assumed it's about Diablo 2 Resurrected.
      • Ancapistani 4y ago
        I thought of the D-2 extract on Reserve in Escape from Tarkov.
    • gpm 4y ago
      "D1" CloudFlare's database thing
  • 4y ago
• JohnHaugeland 4y ago
  It's interesting. This notation is pretty similar to the notation in the FOSS tool (admittedly that I wrote) over here: https://stonecypher.github.io/jssm-viz-demo/graph_explorer.html https://stonecypher.github.io/jssm-viz-demo/graph_explorer.h... Fortunately, no need for accounts or payment there.
• dalager 4y ago
  https://plantuml.com/ https://plantuml.com/ is free and nice. Plays well with Markdown and C4 diagrams. The only UML-specific diagram type I use is the sequence diagram but that is very useful IMHO.
  • be_erik 4y ago
    It can be a bit clunky setting up the jar (or hosting it yourself), but it's still the best worst option. It scales pretty well and can draw some very complex flows, while still giving you the best in just plain ole text editing. I could have never maintained the diagrams I used for other developers on my teams or folks on the audit/regulation side of thing without it. The default styles are really unprofessional looking and I think a lot of folks look the other way once they see that. C4 diagraming with PlantUML is also a breeze for systems diagrams. https://github.com/plantuml-stdlib/C4-PlantUML https://github.com/plantuml-stdlib/C4-PlantUML
    • flower-giraffe 4y ago
      I use https://github.com/yuzutech/kroki https://github.com/yuzutech/kroki in my github actions to build plantuml and other diagrams. Also playing with 11ty and this to replace our home grown tooling based on markdown with embedded dot.
    • globalise83 4y ago
      Have you seen https://sequencediagram.org/ https://sequencediagram.org/ ? No JAR needed, just a web browser
  • elmolino89 4y ago
    Here is a github repo embedding PlantUML in the Markdown: https://github.com/jonashackt/plantuml-markdown https://github.com/jonashackt/plantuml-markdown
• wongarsu 4y ago
  Mermaid also does this, and is integrated in github/gitea/gitlab. To try it out, just open a new github issue and add ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` Or try the live editor: https://mermaid.live/ https://mermaid.live/
  • zero_shift 4y ago
    Mermaid has heaps of problems. I discovered this when I tried extending it myself. Firstly, neither its parser and its visualiser can be extracted from the library. You can't process a grammar on a backend and then render out an SVG. You can't generate an SVG as part of a CLI tool - not without spinning up a web browser in automation mode. Secondly, the grammar is messy. Really really awkward. Flowcharts are OK because they were the first Mermaid usecase, but other grammars are quite weirdly written, brittle, and try to be a mismash of other DSLs. Which in turn leads to very awkward token choices to avoid stepping on the toes of parts that are UML-like, parts that are DOT-like, etc etc My impression reading Mermaid's issues is that it was built from scratch by a JS developer who hadn't any previous experience with DSLs, parsers, or language design, and largely learned as he went along. That's acceptable for a proof of concept. But as a finished product Mermaid is a lumbering mess
• alixanderwang 4y ago
  Hi all, creator of D2 here. I posted this on Reddit to get some feedback but was hoping to improve the docs and offer a playground environment before posting on HackerNews. Ah well. I wanted to clarify some things: 1. D2 will be open source and usable outside of Terrastruct. Terrastruct will remain the best interface to D2, with bidirectional updates from GUI, but we already have vscode and vim plugins ready for local editing. We're a small team and working on one thing at a time. 2. We're aware of PlantUML, Graphviz, Mermaid, of course. These are mature offerings, but I see plenty room for improvement that we intend to tackle with D2. https://d2-lang.com/tour/faq#how-does-this-compare-to-mermaid-graphviz-plantuml https://d2-lang.com/tour/faq#how-does-this-compare-to-mermai... Feel free to ask any questions!
  • flashgordon 4y ago
    By the way do you have a BNF grammar (or something more of a formal spec for this?). The cheat sheet does look good though.
    • alixanderwang 4y ago
      No unfortunately not yet. The docs are like 75% caught up to all the language right now and it's still changing not infrequently, so we'll make some formal specs once it's stable. This reveal caught us off guard =).
      • mdaniel 4y ago
        > I posted this on Reddit to get some feedback > This reveal caught us off guard Hmmm
        • alixanderwang 4y ago
          hah, so the line of logic was: "let's post on reddit to get some low stakes feedback in preparation for a HN launch"
          • 4y ago
• sharkster711 4y ago
  Does anyone know what the clipboard tool that was being used in the youtube demo is?
  • jacobra2 4y ago
    I believe FlyCut.
• keepquestioning 4y ago
  Does this use Stable Diffusion?
  • graphviz 4y ago
    Excellent question. Hoping the community will work more on declarative 2D diagramming methods and tools. Is this project basically the New Mermaid? Why not go in a new direction. People want diagrams, not just networks, not just series-parallel graphs. Anyway, ML is changing everything. Can Stable Diffusion make crossings at right angles? Just wondering.
• deltree7 4y ago
  Sadly, any start-up tool firm can't have any other business model other than subscription.
  • throwaway69123 4y ago
    Isnt subscription the most win win revenue model?
    • deltree7 4y ago
      It is. But, someone can come and disrupt that too
• hyperpallium2 4y ago
  A problem with semantic markup is when it doesn't do what you want, and you need to wig-wam it. Does this mean you actually wanted presentation markup? Or, since you are trying to convey meaning, does it mean that the semantics aren't rich enough to describe what you mean? In this D2 example (https://d2-lang.com/assets/images/intro-example-a917149ff3b72afc02d0cecf703a49a3.png https://d2-lang.com/assets/images/intro-example-a917149ff3b7...), the diagram is nicely designed to be centered on the nexus node crawler. But the choices of which side the tributary nodes are on is not. You might want cron below and ps->express below - or to the sides. The grammar can be extended to accommodate this (maybe already has been), but what is the semantic meaning of above, below, left or right? One semantic choice is made: the "persists" arc is unidirectional, and is presented left-to-right - a natural order for many languages. (Technically, "declarative" needn't be "semantic", but arguably is the most useful one)
  • Aeolun 4y ago
    If there is semantic meaning in where your options are (or you want to assign it anyway) then an automatically generated diagram is probably a bad fit.
  • alixanderwang 4y ago
    before introducing anything, I'd like to see more instances where something needs to be on one side of something else, which I haven't found to be the case in software architecture diagrams.
    • mcherm 4y ago
      Having a diagram drawing tool that automatically lays things out in an elegant fashion by default is really wonderful -- especially when I am just getting started on any given project. But if that diagram drawing tool does not graduate to allowing me full control over every detail of the output (albeit that might be verbose or awkward) then it cannot grow with me as my requirements become more complex and it is good only for toy-sized or throw-away projects.
    • hyperpallium2 4y ago
• tonnydourado 4y ago
  I've used Plantuml extensively, and still use it a bit, now and then. I don't remember ever needing or even wanting bi-directional editing. There's a lot of interesting things in terms of syntax and semantics here, but I really do not see WHY they are tackling a very hard problem on top of an already not easy one.
  • alixanderwang 4y ago
    a low-hanging motivation: how do you choose colors for nodes?
    • tonnydourado 4y ago
      I don't. I just care about boxes and lines, most of the time. When I need to differentiate between types of boxes, I use shapes or stereotypes.
  • jrmiii 4y ago
    As a counterpoint, I also use PlantUML a lot mostly with C4 and I thought the bidirectional interaction looked very cool. I think one benefit might be getting those who don't think in specific syntax and code involved in progress elaboration of the diagrams by using the GUI portion.
• esjeon 4y ago
  > D2 has no diagram types. In other tools, you specify "this is a class diagram", or "this is a state diagram". One of the goals of D2's design is to have minimal syntax that you compose with. I think this can be really difficult...? I was fiddling with RDF and N-ary relationships some time ago, but the easiest way to express a complex relationship is to pre-define the whole relationship as an entity, and relate it to actual entities. This ends up with something similar to function call (e.g. score(subject: playerA, object: playerB, using: weapon, when: time)) or RDBMS tables. But "no DSL-in-DSL" should be a right direction. The core language should be carefully designed to allow modular approaches.
  • alixanderwang 4y ago
    indeed, i don't know if it's a principle that can be maintained as we scale features. for example, even sequence diagrams, i'd like to just be automatically detected, e.g. if you have connections numbered in order that looks like the structure of sequence diagrams, it'll render as sequence diagram. we're testing to see if there's any blocking scenarios where inference just cannot get it right
• globalise83 4y ago
  Time for a shout-out for (in my opinion) the coolest and most useful free tool on the web: https://sequencediagram.org/ https://sequencediagram.org/ Use this all the time for my work and the ability to share a diagram with a url is a killer use case
• tmm1 4y ago
  What was used to author/render these docs?
• smilingleo 4y ago
  Looking forward to the open-sourced version.
• smilingleo 4y ago
  Very cool, looking forward to the open-sourced version.
• rowanG077 4y ago
  It's not a language. It's a service. Since diagrams like this need to be embedded into doc it's not good at all for Dev documentation.
• jb3689 4y ago
  Unfortunately the real power ask is creating these offline so they can be embedded and shared in other contexts. I don’t have confidence in gating by a web service. Others have come before you and tried