D2 : A modern diagram scripting language

I came across D2 on Mastodon I think. (Like most things. But I can’t find the original toot 🤷‍♂)

I used mermaid.js earlier. In fact, I also added mermaid support for this theme.

Benefit of Mermaid is that since it is generated by mermaid.js, I don’t need to save and include the image in my blog (and worry about mismatched filename and/or path, resulting into broken image.)

On the other hand, not many hugo themes support mermaid, but link to an image is supported by hugo and every other SSG.

Since I have not used mermaid extensively, I need to refer to the documentation for mermaid anyway. So learning D2’s syntax isn’t any worse.

But I think D2’s syntax is much easier.

See this D2 syntax for reference :

content: Write contents in markdown
content -> source git repo : git push
Site in docs folder -> netlify deploy : git push
content -> Site in docs folder : Dendron: Site Build
 

and here is a generated SVG file.

Now compare this with mermaid syntax:

graph LR;
    A{ Write Content in markdown }
    A -->| git push | B[ source git repo ]
    A -->| Dendron: Site Build | C[ Site in `docs` folder ]
    C -->| git push | D[ netlify deploy ]

and generated image :