[HN Gopher] D2, a diagram scripting language that turns text to ...
       ___________________________________________________________________
        
       D2, a diagram scripting language that turns text to diagrams, is
       now open source
        
       Author : alixanderwang
       Score  : 487 points
       Date   : 2022-11-22 10:37 UTC (12 hours ago)
        
 (HTM) web link (github.com)
 (TXT) w3m dump (github.com)
        
       | causi wrote:
       | I like the idea of an OpenSCAD for diagramming. Rather surprised
       | it didn't exist already.
        
         | kasbah wrote:
         | It has since at least 1991 when Graphviz was first released.
         | 
         | https://en.wikipedia.org/wiki/Graphviz
        
           | tleb_ wrote:
           | An even earlier tool: Pic, which had its paper released in
           | 1981. It belongs to the troff ecosystem of tools. I'd be
           | interested to know about other tools from this era!
           | 
           | Paper: https://dl.acm.org/doi/10.1145/872730.806459
           | 
           | Mention in troff doc: https://www.troff.org/prog.html#pic
           | 
           | Wikipedia page:
           | https://en.wikipedia.org/wiki/PIC_(markup_language)
        
             | blutack wrote:
             | Pikchr is a modern implementation of PIC (with some nice
             | new features) from Sqlite/Fossil!
             | 
             | https://pikchr.org/home/doc/trunk/homepage.md
        
       | sgt wrote:
       | Getting this on macOS after installing                 dyld:
       | cannot load 'd2' (load command 0x80000033 is unknown)       Abort
       | trap: 6
        
         | nhooyr wrote:
         | What version of macOS are you using? We built on macOS 13.0
         | with go1.19.3.
         | 
         | If you're subsantially older, you'll probably have to install
         | from source due to the c dependencies.
         | 
         | See
         | https://github.com/terrastruct/d2/blob/master/docs/INSTALL.m...
        
           | sgt wrote:
           | Using 10.14.6 (Mojave). I was running go 1.17 so the build
           | didn't work at first. With go1.19 it worked and I am now
           | running the d2 software.
        
       | dang wrote:
       | _D2: A new declarative language to turn text into diagrams_ -
       | https://news.ycombinator.com/item?id=32652291 - Aug 2022 (126
       | comments)
        
         | alixanderwang wrote:
         | Hi dang, that post wasn't posted by me and it was a premature
         | release, where the top comments questioned why it's not open
         | source. the original title for this was that it's now open
         | source. hopefully it's not counted as a repost, perhaps the
         | title could be reverted to its original to avoid any potential
         | penalty of dupe?
         | 
         | related: https://news.ycombinator.com/item?id=32656873
        
           | dang wrote:
           | Ok, I've put open source back in the title.
        
             | alixanderwang wrote:
             | thanks
        
       | j_m_b wrote:
       | I use Graphviz to create Entity Relationship (ER) diagrams for my
       | database schemas. One pain point with graphviz is that once the
       | database table schema becomes large (> 10-15 tables), the layout
       | of the tables becomes awkward. There are times when I would like
       | to move tables to have less overlap of relationship arrows, but
       | this is difficult. Does D2 allow for better control of object
       | placement in the output graph?
        
         | alixanderwang wrote:
         | Not in the core language currently. You can do it on the
         | Terrastruct web app (dragging things around after render).
         | We're thinking about ways to better specify exact positioning
         | in D2 CLI, perhaps something like a flag to lock in x,y
         | coordinates that can be changed post-render.
        
       | Garlef wrote:
       | What would be a reasonable way to bring the diagrams to a
       | frontend and make them interactive? Not in the sense of editing
       | the diagrams but rather attaching onClick handlers to nodes, or
       | displaying metadata when hovering over a node or edge?
        
         | nhooyr wrote:
         | To further elaborate, the output is an SVG so you can embed it
         | into your DOM and then add make it interactive like any other
         | part of the DOM. Though until we set each svg node's ID to its
         | D2 ID, you'll have to add event handlers by selecting on value.
        
         | alixanderwang wrote:
         | interactive tooltips are a wip, but to the larger point, D2 has
         | a plugin system which enables extensions like this
         | (https://github.com/terrastruct/d2/pull/91). there's still some
         | fleshing out to do with the API, but once it's up, it should be
         | a straightforward plugin for custom handlers.
         | 
         | made an issue to track:
         | https://github.com/terrastruct/d2/issues/134
        
           | alixanderwang wrote:
           | Actually, we'll give each node ID the ID you specify, and
           | then you can just target it after render with DOM selectors.
           | That should be the easiest way!
        
       | automatic6131 wrote:
       | This looks really interesting. I hope a Windows installer is out
       | soon
        
         | jmartrican wrote:
         | +1 for Windows installer. In case the authors are reading this.
        
           | alixanderwang wrote:
           | we'll get this up next week.
           | 
           | https://github.com/terrastruct/d2/issues/96
        
       | kidsil wrote:
       | This is exactly what I was looking for several months ago for
       | describing processes in a readable and maintainable way.
       | 
       | Basically the choices were down to:
       | 
       | 1. Graphics tools (Google Drawings / Draw.io) - which were a pain
       | for complex charts and maintenance.
       | 
       | 2. Code-based tools such as plantUML which was mature and solid,
       | but required Java :|
        
       | pedrovhb wrote:
       | This looks pretty great, though I'm surprised at the filesize for
       | a simple diagram - 333kb from a simple test I made. A cat of the
       | SVG prints out some base64 which I didn't try decoding, but I'd
       | assume it's the bundled font that takes up most of the space?
       | It'd be nice if it contained only the characters necessary for
       | the diagram itself.
        
         | alixanderwang wrote:
         | yeah there's overhead with the fonts bundled in. we might
         | change this, https://github.com/terrastruct/d2/discussions/132
         | 
         | i wasn't aware you could selectively choose characters for
         | fonts, but that'd be ideal
        
           | andix wrote:
           | Maybe don't bundle the font by default? Can't you just use
           | the standard system fonts like tailwind does, and gives quite
           | good results?                 font-family: ui-sans-serif,
           | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
           | Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
           | "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
           | "Noto Color Emoji";
        
       | ohmahjong wrote:
       | When it comes to generating diagrams that look nice from just
       | about any diagram scripting language, I tend to go to "Kroki!".
       | Hopefully they'll do some work to support D2 as well, although
       | going from D2 -> PlantUML is something you can do in the
       | meantime.
       | 
       | * https://kroki.io/
        
         | alixanderwang wrote:
         | the creator of kroki is on it!
         | https://github.com/yuzutech/kroki/issues/1323
        
       | undershirt wrote:
       | Thanks for the excellent example diagram in the readme. It
       | actually seems like the best way to understand the cheating
       | scandal.
        
       | LeonidBugaev wrote:
       | 1. Is it possible to re-use part of diagram, like require
       | statement in PlantUML?
       | 
       | 2. Any plans for native C4 model support, or examples how to
       | emulate it?
       | 
       | 3. What about layout control? By default D2 generate way nicer
       | layout, but it is synthetic. How I can tune it, give some hints,
       | etc?
        
         | numbsafari wrote:
         | I have basically the same set of questions.
        
         | alixanderwang wrote:
         | 1. not currently, but it's on the roadmap!
         | 
         | 2. with any integration, if there's enough demand, we'll do it.
         | Once we add interactivity to diagrams, it should be trivial to
         | emulate. However I should mention that Simon Brown (the creator
         | of C4) has his own DSL for C4
         | https://github.com/structurizr/dsl)! We have no intention of
         | competing with it.
         | 
         | 3. Currently the options to tune are limited. The Terrastruct
         | app has granular layout control via drag-and-drop, and we're
         | working to bring some of that to native/open-source.
        
       | xbar wrote:
       | Charming example.
        
       | pyrolistical wrote:
       | Love the layout this generates, but a killer feature of
       | mermaidjs/plantuml is it works in the browser with the document
       | embedded in the url:
       | 
       | https://mermaid.live/edit#pako:eNpVkEFrwzAMhf-K0GmD5A_kMFiTr...
       | 
       | https://www.planttext.com/?text=SoWkIImgAStDuU9ooazIqBLJSCp9...
        
         | alixanderwang wrote:
         | love this idea. https://github.com/terrastruct/d2/issues/153
        
       | arriu wrote:
       | I got excited that the title was for the D2 game. Cool project
       | nonetheless
        
       | GnarfGnarf wrote:
       | I would love to see this as a plugin for an IDE like Visual
       | Studio or Qt Creator. The diagram commands would be in comments,
       | and the graphic representation rendered in-line with the source
       | code.
        
         | [deleted]
        
           | g_ali wrote:
        
         | alixanderwang wrote:
         | you can do this in VSCode now actually. the CLI has a live-
         | reloader, so if you put the PNG on a side by side window with
         | the code, every code change will see the PNG change.
        
         | [deleted]
        
       | aargh_aargh wrote:
       | Sorry, I'm just annoyed about the demo .gif. Why is it not a
       | video I can watch full-screen? I want to actually see the text.
       | Why is there a huge empty border around the window?
       | 
       | Otherwise, the shown workflow seems nice. I'll check out the
       | syntax to see what it brings in comparison to DOT. Thank you.
        
         | nhooyr wrote:
         | Whoops, sorry. I opened
         | https://github.com/terrastruct/d2/issues/140 to address.
         | 
         | For now, we zoomed the gif in so you can see it better. And we
         | added a syntax example front and center.
        
         | justsomehnguy wrote:
         | Demo gif is not annoying per se, but UX is awful: not only I
         | can't see anything on a FullHD monitor, I needed two right
         | clicks to get to the actual .gif, I still needed to go to a
         | fullscreen view to see the text, it is still ends too soon and
         | I have no way to pause/stop the playback.
         | 
         | I saw a no border version (why was it recorded with a border in
         | the first place?), but still the left part could be easily half
         | the size, it would integrate nicely in the GH page. If you
         | increase the notes font than it would be (probably) legible
         | even on GH.
         | 
         | I think it's a classical example of 'works for me'.
         | 
         | But anyway, is there are plans for Win* release?
        
           | alixanderwang wrote:
           | > is there are plans for Win* release?
           | 
           | yep. should be in a week or so, along with other installation
           | stuff: https://github.com/terrastruct/d2/blob/master/docs/INS
           | TALL.m...
        
         | alixanderwang wrote:
         | here ya go:
         | https://raw.githubusercontent.com/terrastruct/d2/d320f57beff...
         | 
         | and if you want to see a fuller static text and rendering:
         | https://text-to-diagram.com/?example=wiiu
        
         | adrianmonk wrote:
         | > _a video I can watch full-screen_
         | 
         | Plus controls. This is a separate rant, but for
         | incomprehensible reasons, Chrome removed the ability to even
         | enable controls for animated GIFs.
         | 
         | So if I miss some detail I was interested in, I can't rewind. I
         | have to wait for it to loop around again. And when it does come
         | back up, I can't pause there; instead, I have to frantically
         | try to memorize what I saw.
         | 
         | Also, I don't know the length, so I don't know if it's worth my
         | time investment to wait for it to loop.
        
       | imiric wrote:
       | Looks very neat, congrats on the launch!
       | 
       | The syntax is much friendlier than any other tool of this sort,
       | and being programmable and extensible from Go is a great plus. I
       | think you should add this aspect to your comparison on
       | https://text-to-diagram.com/ (also a nice touch!), as I don't
       | remember this being possible with others, though I might be
       | wrong.
       | 
       | I'm looking forward to this having sequence diagram support, and
       | it might just become my go-to next time. Definitely keeping an
       | eye on this project.
        
       | pipeline_peak wrote:
       | Doesn't html + css solve this?
        
         | jeddy3 wrote:
         | how?
        
           | pipeline_peak wrote:
           | By creating some sort of model to draw diagrams.
           | 
           | https://code.tutsplus.com/tutorials/how-to-draw-a-pie-
           | chart-...
        
       | lloydatkinson wrote:
       | Very cool - how does it compare to mermaid?
        
         | [deleted]
        
         | taink wrote:
         | They put up a site here: https://text-to-diagram.com/
         | 
         | It's buried in the FAQ but it was an interesting comparison
        
           | lloydatkinson wrote:
           | Wow. I thought mermaid was the future but I think I've been
           | won over by D2. Can use markdown inside, can use code inside,
           | and has some auto formatting tools apparently. This seems
           | like such a better experience than literally any of the other
           | comparisons.
        
       | hammeiam wrote:
       | Is it possible to integrate this with a library like networkx? D2
       | has great layouts and seems very simple to create ad-hoc graphs,
       | but it would also be nice to support graph data structures that
       | you can slice up how you want, like this
       | https://github.com/hammeiam/saddle-data-graph/blob/master/Sa...
        
         | alixanderwang wrote:
         | D2 has an AST API, so you should be able to transpile from
         | other graph libraries easily. see the second half of
         | https://github.com/terrastruct/d2#d2-as-a-library
        
       | shoelessone wrote:
       | This looks great, but sequence diagrams are one of the things I
       | use most with PlantUML. Most commonly I find these super useful
       | to document various caching scenarios, and I use them all the
       | time to help explain payment processing flows.
       | 
       | https://text-to-diagram.com/ says the sequence diagrams aren't
       | supported, but your github description says
       | 
       | > D2 intends to integrate with a variety of layout engines, e.g.
       | dot, as well as single-purpose layout types like sequence
       | diagrams. You can choose whichever layout engine you like and
       | works best for the diagram you're making.
       | 
       | Can you explain a bit more about this, if I wanted to create a
       | sequence diagram with D2 today is there a simple path to follow
       | to do this?
       | 
       | Thanks for the work on the project!
        
         | alixanderwang wrote:
         | that's not contradictory. we plan to do this in the next month
         | or so, but text-to-diagram reflects current state, so it'll say
         | it's not supported until it's publicly released. if this is a
         | blocker, feel free to watch this issue to be notified!
         | https://github.com/terrastruct/d2/issues/99
        
       | napier wrote:
       | This, but with a NLP/GPT interface for code generation.
        
       | WalterBright wrote:
       | There was a popular program in the 1970s that turned Fortran into
       | flowcharts. The flowcharts were useless, but the program was
       | created due to some government requirement that Fortran code be
       | accompanied by flowchats.
        
       | darkteflon wrote:
       | Just looking at the documentation on themes
       | (https://d2lang.com/tour/themes) - the themes themselves are
       | great but I can't see any way to set a dark (or alternate color)
       | background?
        
         | alixanderwang wrote:
         | ty for the suggestion, our designer will come up with some!
         | https://github.com/terrastruct/d2/issues/158
        
       | CubsFan1060 wrote:
       | Is there any way to choose if the arrows overlap other objects?
       | 
       | Through certain configurations, the arrows will end up going
       | directly through unrelated objects.
       | 
       | A crappy example here. The line from x -> cont3.y goes through
       | the cont2 container:
       | 
       | x -> cont.y -> z
       | 
       | x -> cont2.y
       | 
       | x -> cont3.y
       | 
       | cont {
       | 
       | x -> y -> z
       | 
       | }
       | 
       | cont2 {
       | 
       | x -> y -> z
       | 
       | }
       | 
       | cont3 {
       | 
       | x -> y -> z
       | 
       | }
        
         | alixanderwang wrote:
         | interesting, what layout engine are you running that on?
         | different ones will have different routing algorithms
        
       | andruby wrote:
       | I like it and the comparison site on https://text-to-diagram.com
       | 
       | I just wanted to drop a reference to Burnt Sushi's ERD tool [0].
       | It only does one diagram type: Entity Relationship Diagram. It's
       | wonderful. Human-first syntax, code comments, and some simple
       | formatting settings like colors and font sizes that help make
       | more complex diagram pleasing and informative.
       | 
       | [0] https://github.com/BurntSushi/erd
        
         | adammarples wrote:
         | In theory could ERD be quite easily extended to use D2 as
         | another renderer? It looks very simple with one render.hs file
         | which uses Graphviz but that could be parametrized.
        
         | alixanderwang wrote:
         | ERDs in TALA are about to get exact-column matching in its
         | connections in the next release. e.g.:
         | https://imgur.com/a/UUb2RfA
        
       | Existenceblinks wrote:
       | Q: Anyone know any text-to-diagram that's like a hand-drawn
       | style?
        
         | alixanderwang wrote:
         | this is coming soon to D2:
         | https://github.com/terrastruct/d2/pull/91
        
       | darkteflon wrote:
       | Really like the syntax - I find it much more intuitive than
       | Mermaid. Going to give this a try.
       | 
       | VS Code extension, too: https://github.com/terrastruct/d2-vscode
        
       | blutack wrote:
       | I recently discovered Pikchr from Sqlite/Fossil [0] if anyone is
       | looking for something in a similar vein, although it has it's own
       | scripting/layout language rather than using go (a plus IMO, as
       | it's not tied to a specific ecosystem).
       | 
       | It's fantastic for making diagrams when you want more control
       | over the layout than graphviz or mermaidjs but are looking for a
       | similar type of tool. It's also clean C so easy to embed, and
       | there's a WASM build for browser use.
       | 
       | It is fairly simple in any general purpose language to output
       | pikchr code - I've done this previously for producing
       | autogenerated packet diagrams in documentation.
       | 
       | 0: https://pikchr.org/home/doc/trunk/homepage.md
        
         | zellyn wrote:
         | I am a huge fan of Pikchr. I ported it to Go, and integrated it
         | with Hugo, for my blog. I need to get back to fixing it though
         | -- a big reorganization commit in either Hugo or Goldmark made
         | it stop working
         | 
         | You can see the results at https://zellyn.com/2022/02/cs-
         | ramble/
        
           | blutack wrote:
           | That's some serious Pikchr-Fu! Nice that you kept the
           | diagrams clickable to see the code.
        
         | mehmd2002h wrote:
        
       | lamuswawir wrote:
       | Good work. Love the simplicity.
        
       | pizza234 wrote:
       | I've been using PlantUML and Mermaid for my own diagrams.
       | 
       | Mermaid is quite basic; it lacks functionalities that for me were
       | necessary; for example, direct connection between attributes of
       | different classes.
       | 
       | All in all, PlantUML seems superior to Mermaid, at no cost (both
       | languages are relatively simple to learn).
       | 
       | Mermaid is supported by Github, which may be a necessary
       | requirement for some. On the other hand, among the many
       | functionalities, PlantUML's JSON is unusually good looking out of
       | the box, and if one required the diagram it outputs, it's a great
       | feature, because it requires no syntax knowledge.
       | 
       | Both PlantUML and Mermaid mostly produce (Mermaid more) ugly-
       | looking diagrams (dated, to say the least). In PlantUML, this
       | problem is compounded by the explicit lack of layout, by design.
       | 
       | Other warts: both (PlantUML and Mermaid) languages have limited
       | comment support - they are only supported in specific locations
       | of the diagram declarations.
       | 
       | D2 could be a very welcome "next gen" diagramming language.
       | However, the devil is in the details - text-to-diagram.com show a
       | very basic functionality, so one must carefully check the
       | requirements.
       | 
       | Regarding text-to-diagram.com:
       | 
       | - there's a mistake - PlantUML does support rich text (although
       | "rich" is a fuzzy definition)
       | 
       | - class diagrams are an important use case, which is currently
       | missing
       | 
       | EDIT: clarification about the comment limitations.
        
         | wongarsu wrote:
         | As they say, the best diagram language is the one your tool
         | supports; and by that metric Mermaid and graphviz seem to be
         | winning (depending on which ecosystem you are in, Mermaid seems
         | to have the edge in the Markdown world, graphviz everywhere
         | else).
         | 
         | D2 looks like a nice upgrade, but to be as useful as e.g.
         | Mermaid a bunch of plugins will need to be written.
        
           | alixanderwang wrote:
           | yup agreed. we prioritized IDE plugins, and have a native
           | plugin system, recognizing the importance of ecosystem. e.g.
           | a proof of concept plugin to make diagrams look hand-drawn:
           | https://github.com/terrastruct/d2/pull/91
        
             | xcdzvyn wrote:
             | Any chance of getting an Obsidian plugin?
        
               | alixanderwang wrote:
               | https://news.ycombinator.com/item?id=33706852
        
         | Veuxdo wrote:
         | Have you taken a look at Ilograph [0]? It's also a "next gen"
         | diagrams-as-code alternative that goes in a different
         | direction: interactive, model-based, and multi-perspective. It
         | also has in an IDE for autocomplete.
         | 
         | [0] https://app.ilograph.com/demo.ilograph.Ilograph
        
           | stavros wrote:
           | This looks great, but I'm not terribly jazzed about having my
           | diagrams permanently hosted on a third-party site. I know
           | it's hard to make self-hosted interactive diagrams like this,
           | but I'd like my documentation to last longer than this site.
        
           | michael_j_ward wrote:
           | Is Ilograph open source?
        
             | vladsanchez wrote:
             | It's not!
        
             | Veuxdo wrote:
             | Only a small part of it: the standard diagramming libraries
             | (or, presently, library): https://github.com/billy-
             | pilger/ilograph-standard-libraries
        
               | afandian wrote:
               | It looks amazing for exploring arbitrary graphs. Do you
               | have plans to open any part of the diagramming engine?
        
           | vladsanchez wrote:
           | Ilograph is what all these diagram-as-code tools should
           | aspire to. It's ability to contextualize is unlike anything
           | I've seen.
        
             | philsnow wrote:
             | wow, I'm just walking through the demo linked by Veuxdo and
             | that's exactly what I was thinking: each step in the
             | walkthrough drills context down deeper or widens context in
             | a very clear way.
             | 
             | I've tried to do similar things in graphviz but pulling out
             | individual subgraphs or subsets of nodes + edges isn't easy
             | and I always end up with multiple files for each view that
             | I want to show and they get out of sync.
        
           | alixanderwang wrote:
           | feel free to submit a PR to make comparisons against tools on
           | text-to-diagram.com, happy to include you Billy!
        
         | alixanderwang wrote:
         | do you have an example of the rich text for PlantUML? happy to
         | correct
         | 
         | i've added a TODO for the class diagrams, will be included this
         | week. https://github.com/terrastruct/text-to-diagram-
         | site/issues/2...
         | 
         | AFAIK they all have comments (see the "Chess" example). what is
         | the limitation of comments you're referring to?
        
           | pizza234 wrote:
           | This is a styling example in PlantUML:
           | class TestClass {           ""Monospaced""
           | <color:green>Colored         }
           | 
           | See here: https://plantuml.com/creole.
           | 
           | Regarding the comments, here's a PlantUML example:
           | class TestClass {           ""Monospaced"" ' comment not
           | supported; displayed           <color:green>Colored         }
           | class TestClass2 {           ' comment supported
           | Type varname ' comment not supported; displayed         }
           | ' comment supported         foo::bar --> baz ' comment not
           | supported; breaks diagram (!)
        
             | [deleted]
        
       | mehmd2002h wrote:
        
       | alixanderwang wrote:
       | Hi HN, I'm Alex, at Terrastruct, where we've been making D2. This
       | actually popped up on HN a couple months back, though it wasn't
       | ready, e.g. not open source yet. It is now!
       | 
       | We also put up a site for you to compare D2 with MermaidJS,
       | Graphviz, and PlantUML: https://text-to-diagram.com.
       | 
       | Full disclosure, we're a for-profit company. The open-core part
       | is that we make an alternative layout engine which we sell
       | (Jetbrains model, i.e. your copy is your's forever if you've paid
       | for 12+ months). It's not packaged with D2, so you won't see it
       | if you don't want it. D2 is perfectly usable without it, and
       | integrates with multiple free open source layout engines (e.g.
       | the one that Mermaid uses, "dagre", is D2's default). If you want
       | to read more about our plans for D2:
       | https://d2lang.com/tour/future.
       | 
       | Hope you can check it out! It's got an easy install (and
       | uninstall) process.
        
         | jmyeet wrote:
         | This looks really interesting. It made me curious about
         | something.
         | 
         | As an example your tree is laid or left-to-right. The GraphViz
         | one in comparison is top down. It's not clear to me as a user
         | if that's forced or a choice (in either case).
         | 
         | Are you able to clarify that sort of difference by either
         | making the diagrams similarly laid out or adding a note if
         | something isn't possible?
        
           | alixanderwang wrote:
           | Good observation! Those are just defaults, we don't change
           | the defaults for the comparisons to match (e.g. font sizes,
           | shape dimensions, etc).
        
         | wg0 wrote:
         | Beautiful! And then in golang. Thank you for open sourcing the
         | core part.
        
         | billconan wrote:
         | I really want to learn the algorithms behind automatic layout
         | engines. Are there any books on this topic?
        
           | alixanderwang wrote:
           | not that i know of, but there's a lot of research papers,
           | under the topic of "graph visualization". we read a ton of
           | these and combined and modified ideas for TALA.
           | 
           | The folks at ELK are doing fantastic work in public as an
           | academic team out of Germany.
           | 
           | https://www.eclipse.org/elk/documentation/algorithmdeveloper.
           | .. https://www.rtsys.informatik.uni-kiel.de/en/team/soren-
           | domro...
           | 
           | Graphviz's papers are also must-reads (for hierarchical
           | layouts): https://graphviz.org/theory/
           | 
           | In general they are surprisingly readable even without an
           | academic background. Sometimes they go into proofs of
           | correctness like method X really results in minimal edge
           | crossings, and those are gnarly math, but skippable. The bad
           | part is that a lot of these research papers have code that's
           | just broken or wrong, or is NP-hard.
        
         | mooneater wrote:
         | 20+ year fan of graphviz here, love seeing what you are doing
         | with D2!
         | 
         | Any examples of larger diagrams (1000+s of nodes) and how does
         | that perform in layout?
        
           | riedel wrote:
           | I am always quite astonished how bad the default layouters
           | for graphs perform. When I was still doing compiler
           | optimization in the beginning of the 2000s we did not
           | struggle with quite big graphs thanks to cool graph
           | visualizers such as vcg [1] . Two weeks ago I was tempted to
           | try it again after nearly 20 years because I was frustrated
           | even visualising a relatively small graph in python
           | (cytoscape seemed to be the only working software in the end
           | but it was quite a pain to get it to just render what I
           | wanted)
           | 
           | [1] https://www.rw.cdl.uni-
           | saarland.de/people/sander/private/htm...
        
           | alixanderwang wrote:
           | thank you! There isn't right now, we'd need to add a simpler
           | layout algorithm for those, e.g. force-directed, radial, etc.
           | That use case is not something D2 is trying to tackle though,
           | we're just focused on software architecture diagrams right
           | now, and I've yet to see one span that many nodes
        
             | deathanatos wrote:
             | IDK if it's quite the use case you're looking for, but at
             | my company, we turn our CI YAML for our monorepo into Dot
             | (Graphviz), and graph it, to visualize the dependencies
             | between steps in our CI, & to highlight the critical path.
             | 
             | It's an ~100 node DAG. Graphviz struggles a bit with it,
             | particularly with edge layout.
             | 
             | (Though really, the layout I want for it is a Gnatt chart
             | style layout.)
        
             | nonrandomstring wrote:
             | Picking a set of domain specific targets and honing a tool
             | to service that seems a good way to start building - rather
             | than a general solver.
             | 
             | I also love graphviz but had a project to create an app for
             | legible quality management, and it was a headache to
             | shoehorn some concepts into "nodes in an edge connected
             | graph" way of thinking (ended up programatically scripting
             | LaTeX).
             | 
             | With so many visualisation concepts there's room for niche
             | approaches (same in plotting; Matlab/Octave vs Gnuplot vs
             | Pyplot vs R and so on)
        
               | alixanderwang wrote:
               | agreed! that reminds me, there's a company that
               | specializes in this niche of visualizing large data:
               | https://www.graphistry.com/ (haven't used it myself,
               | looks well-made).
        
             | philsnow wrote:
             | I have made software architecture diagrams, but more
             | "descriptive" than "prescriptive" ones, by generating
             | graphviz from source code analysis tooling. (The objective
             | here was getting oriented in a large codebase where there
             | wasn't really a rigorous diagram of anything written down
             | anywhere, and trying to find sort of a min-cut where
             | putting a line through the graph of imports would cross the
             | fewest edges)
             | 
             | In my experience graphviz handles up to thousands of nodes
             | and tens of thousands of edges without really breaking a
             | sweat.
             | 
             |  _edit: I 've done the same thing with extracting AWS
             | diagrams from aws describe* calls, with good results._
        
         | localhost wrote:
         | This is a great idea; my go-to approach is the "I'll use
         | PowerPoint to do that and take a screenshot" mindset since I
         | don't have a need for publication quality output.
         | 
         | I really like the comparison site that you have created - it's
         | great for learning these languages. I would love to see a
         | plugin for Obsidian for the times where I need to add a custom
         | drawing to my notes. It looks like there already are plugins
         | for PlantUML[1] and graphviz[2] today.
         | 
         | [1] https://github.com/QAMichaelPeng/obsidian-graphviz
         | 
         | [2] https://github.com/joethei/obsidian-plantuml
        
           | alixanderwang wrote:
           | thanks! i don't use Obsidian personally and don't know how
           | the plugins work, but if anyone sees this and wants to do a
           | plugin for it, please reach out or open a Github issue and
           | we'll support whatever API changes are needed (if any) to
           | D2's plugin system to make integration easy.
           | 
           | (created a Github Discussion to track.
           | https://github.com/terrastruct/d2/discussions/138 . if
           | there's enough demand, we'll do it ourselves)
        
         | linuxdude314 wrote:
         | Do you maintain a dagr fork internally?
         | 
         | The project looks to be deprecated:
         | https://github.com/dagrejs/dagre
        
           | alixanderwang wrote:
           | we maintain a wrapper around dagre, which adds functionality
           | like supporting container to container connection. dagre is
           | unmaintained, but it's also "complete", in that it implements
           | the theoretical papers it set out to.
        
           | [deleted]
        
           | rahimnathwani wrote:
           | Mermaid itself uses this fork (at least its npm link appears
           | in one of the package.json files), which is still active;
           | 
           | https://github.com/tbo47/dagre-es
        
         | [deleted]
        
         | trey-jones wrote:
         | I'm excited to see this. It's the first repository I've starred
         | in a long time. I'm asked for these types of diagrams from time
         | to time and I've bounced between many different tools, none of
         | which I've found to be satisfactory. I will try this next.
         | Thank you for your work on it.
        
         | ritzaco wrote:
         | wow thank you for the transparency - you literally answered all
         | the questions up front that I care about re open core, for
         | profit, killswitches, etc etc that usually take hours to find
         | from a marketing landing page.
        
         | laomai wrote:
         | Looks awesome! Very easy to read!
         | 
         | Can't wait for an Obsidian plugin! :D
        
         | bitcurious wrote:
         | Is the name inspired by d3.js?
        
           | alixanderwang wrote:
           | no
        
             | Tenal wrote:
        
         | JonChesterfield wrote:
         | Is the language described anywhere? Couldn't find an example
         | other than the one on text-to-diagram and can't find anything
         | beyond that.
         | 
         | edit: guessing URL found https://d2lang.com/tour/intro/ which
         | covers it, perhaps worth linking to there from the GitHub page
         | 
         | edit2: ok it is linked, just above the section I was looking
         | at:
         | 
         | Reference
         | 
         | A more formal reference specification is in the works.
        
       | rvba wrote:
       | Quite unfortunate name, the D2 abbreviation is used for the
       | computer game Diablo 2.
       | 
       | On a side note, one of the Diablo 2 creators posts here from time
       | to time.
        
         | Macha wrote:
         | Also Dublin 2 (postcode of Dublin city), a thai hotel chain
         | operating in the middle east also, the video game destiny 2, a
         | german magazine, roads in several countries, a vitamin,
         | multiple airplanes, deuterium, a paper size, 2 sided dice and a
         | variant of steel.
         | 
         | I don't think anyone expects short acronyms to be globally
         | unique
        
           | FeepingCreature wrote:
           | Programming language D 2.0
        
           | vsnf wrote:
           | Sure, many namespace collisions for D2 exit in the universe
           | of possible meanings for the acronym, but in a computer
           | context, and whose headline is "now open source", it's
           | reasonable, expected even perhaps, to assume Diablo 2.
           | 
           | Also, and I may be showing my age here, who refers to Destiny
           | 2 as D2 without any context?
        
           | rvba wrote:
           | Not my fault they chose a non unique name for their project.
           | I just pointed it out.
           | 
           | Supposedly naming things is one of the problems in
           | programming.
        
         | thiht wrote:
         | D2 is also a French tank, that's gonna be be really confusing.
        
       | kowlo wrote:
       | I use Blockdiag - how come I never see it mentioned?
        
       | [deleted]
        
       | davidkunz wrote:
       | Great! I was looking forward to this as a nice-looking
       | alternative to Mermaid etc. Thanks for open-sourcing your core! I
       | really like the cheat sheet:
       | https://github.com/terrastruct/d2/blob/master/docs/assets/ch...
        
       ___________________________________________________________________
       (page generated 2022-11-22 23:01 UTC)