d2-playground

An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

Notice: This is not the repository for the D2 language. That can be found here.

Table of Contents

• FAQ
  • What is this written in?
  • How does it work?
  • What's this API?
• Contributing
• Dependencies

FAQ

What is this written in?

Vanilla HTML, CSS, and Javascript.

How does it work?

What's this API?

We are working on a full WASM build of D2 that includes the layout engines, but it requires optimizations to get the build size down to be manageable for the web. Tracking here: https://github.com/terrastruct/d2/pull/436/files.

When this is ready, Playground will offer two options: a fully offline, local version powered by D2 WASM running on your browser, and an API version, for running on low-power machines. Currently, the API just takes an encoded D2 script and runs the layout engine. It saves no data and does nothign else.

Contributing

Contributions are welcome!

1. Install esbuild: https://esbuild.github.io/getting-started/#install-esbuild
2. Run git submodule update --init --recursive to pull the submodules (D2's VSCode plugin for syntax highlighting, and our CI library).
3. Go to src/js and run yarn to get the Node modules.
4. Run go run main.go and open http://localhost:9090.

Dependencies

External dependencies are kept to a minimum. Currently they are:

1. Monaco Editor for text editing features.
2. Panzoom for SVG navigation.

Both are not ideal. Monaco is unnecessarily heavy and Panzoom lacks scrolling. The plan is to replace these one day.

If you're a contributor, please do not add any dependencies without discussing first.