Integrate D2 diagrams

[alixander]

D2 is a new, modern diagramming language, in pure Go: https://d2lang.com/tour/intro/

Comparison to mermaid: https://text-to-diagram.com/?b=mermaid

I see that Hugo uses Goldmark, which a community member of D2 has written an extension for, making it an easy integration: https://github.com/FurqanSoftware/goldmark-d2.

Happy to help in whatever way, or even make the PR, depending on what maintainers think. Thanks!

[bep]

Thanks for this, I notice that you're not using v8 anymore, which was the showstopper last time I looked at this.

[bep]

@alixander I quickly tested this with Hugo and, while the diagrams looks great, they take some time to generate. The Hans Niemann example (which I assume is a complicated one) takes around 70ms to build on my beefy MacBook, and building a Hugo site with 1000 pages, adding 1 diagram per page adds about 10 seconds to the build. I guess we add these to the file cache, but is this something on your TODO list to improve?

[jmooring]

It looks like Kroki may support D2 in the near future. If that happens, site authors can use resources.GetRemote in a codeblock or shortcode as demonstrated here.

Compared to integration, performance isn't great. But at least there's a path for site authors if we choose to defer.

[bep]

@jmooring both of your links point to the same location.

[jmooring]

Corrected.

[alixander]

@bep Thanks for the quick response.

Performance past 70ms is not a priority for us right now. We translated that chess example into its equivalent in Mermaid (https://github.com/terrastruct/text-to-diagram-site/tree/master/src/examples/4_chess/syntax). It's a lot slower on my machine (reruns are b/t 2-5s)

In the 1000 pages scenario, does Hugo build them serially or is there an option to generate the diagrams in parallel?

I'm not familiar with how resources.GetRemote works, but would this basically defer rendering to a client-side API call or is it making the API calls and embedding the images during build? We use an API for https://play.d2lang.com, and that can be opened up for public renders like Kroki, as I'm not sure how long the integration with D2 will take there.

[bep]

In the 1000 pages scenario, does Hugo build them serially or is there an option to generate the diagrams in parallel?

We very much build in parallel, which, when you the math gets it down to 10ms per diagram (as in serial 70ms).

is it making the API calls and embedding the images during build?

That. And as its backed by a file cache, it's feels fast for static resources (things that doesn't change very often).

I need to think a little about what to do about this issue.

[jmooring]

@alixander It is making the API calls and embedding the images during build.

[alixander]

gotcha, thanks guys. let me know if there's anything I can do

[alixander]

hi @bep just want to revisit this after it's been a couple months. D2's been much improved, file sizes are 5% what they were back then, and we have a lot of new features that help blogs (like responsive dark mode, so that users can generate just one diagram instead of 2 to support light/dark modes).

would you be open to an integration? if it helps, I'm happy to write the PR for it.

[jmooring]

Kroki now supports D2 diagrams, so the code block render hook approach is also an option. See example.

[LarsStegman]

Hello, are there any plans to create this integration soon?

[bligneri]

Also interested to help