Able to run in a browser

[ericis]

The very first use cases that came to mind for d2 was working within a browser context. However, it's written in Go.

As a result, there are really two options: rewrite in JavaScript or use WebAssembly.

This issue simply requests browser support (not making a network request to a server) to execute d2.

I might personally suggest WebAssembly, since the project is well underway and would take a significant shift otherwise.

[FFengIll]

I believe d2 is on the way for it in its own way, pls see #207

[alixander]

that's different. that's a playground environment, i believe @ericis is asking about a library callable from client-side browser context.

Indeed, we have plans to port D2 to WebAssembly.

[ericis]

Yes, correct @alixander . The simple use case would be building a diagram via JavaScript in the browser, a more advanced example might be the MermaidJS "Live editor" and the best example I can think of might be an embedded web editor like Eclipse Theia or VS Code complete with a language server for a rich diagram editing experience with live preview.

[zbysir]

Have there been any new developments?

d2 is a great project that can do things that MermaidJS can't, but I think it can run directly in a web browser. Since most documents are static pages, there is no Golang environment.

[PgBiel]

Hey @aschrijver , thanks for the tip! Can confirm I managed to run one of D2's library usage examples ¹ in wasmtime using the steps in this blog post: https://go.dev/blog/wasi
Basically, in the directory with the example's source code, I just had to run (using go 1.21.5) GOOS=wasip1 GOARCH=wasm go build -o main.wasm and then wasmtime --dir "$(realpath .)" main.wasm, et voilà: out.svg appeared in the directory.

Footnotes

1. https://github.com/terrastruct/d2/blob/master/docs/examples/lib/1-d2lib/d2lib.go ↩

[PgBiel]

Worth mentioning, however, that the resulting binary was 38 MB for that example, which I'd consider to be a bit large for web contexts. Perhaps that can be reduced/optimized, maybe with a bit of help or advice from the D2 team?

For a little bit of context, I'd be interested in seeing a D2 plugin for Typst, so that people can easily include D2 diagrams in their documents. Typst supports WASM plugins which can be used when running the Typst compiler either natively or in the browser. Hence why WASM support would be awesome. 🙂

[alixander]

It's large because it embeds a javascript runner to run 2 of the layout engines. But it doesn't need to in WASM so part of the work of porting to WASM would be to replace that. #366

[stereobooster]

Worth mentioning, however, that the resulting binary was 38 MB for that example

For web yes, but for desktop and SSG (static site generators) it may work. Compiling to WASM would allow to distribute universal binary via npm. Which would result in bigger adoption by JS based SSG, such as Astro, Starlight, VitePress, Next.js (if code executed with server actions), etc.

WDYT? Maybe release as huge WASM (as is) via npm for server usage?

---

This would allow to remove additional step

You will also need to have D2 installed. You can follow the installation instructions to install D2 on various platforms.

https://astro-d2.vercel.app/getting-started/

The plugin requires the D2 diagram language to be installed on your system, it is compatible with Linux, Windows and MacOS.
You can use the following command on Linux to install D2 (official docs).

https://github.com/BadgerHobbs/vitepress-plugin-d2

Ensure that you have d2 installed and accessible on your PATH

https://github.com/mech-a/remark-d2

Not sure about VSCode. Would it be possible to run LSP with WASM?

Note: Requires D2 to be installed on your machine. See https://github.com/terrastruct/d2/tree/master#install for instructions.

https://marketplace.visualstudio.com/items?itemName=terrastruct.d2

[alixander]

D2 WASM (and a d2.js package) will be released by end of year.