Notice: This is not the repository for the D2 language. That can be found here.
Table of Contents
FAQ
What is this written in?
Vanilla HTML, CSS, and Javascript.
How does it work?
![Sequence diagram](https://github.com/terrastruct/d2-playground/raw/ddd6f3493314/docs/assets/sequence.svg)
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!
- Install
esbuild
:
https://esbuild.github.io/getting-started/#install-esbuild
- Run
git submodule update --init --recursive
to pull the submodules (D2's VSCode plugin
for syntax highlighting, and our CI library).
- Go to
src/js
and run yarn
to get the Node modules.
- Run
go run main.go
and open http://localhost:9090
.
Dependencies
External dependencies are kept to a minimum. Currently they are:
- Monaco Editor for text editing features.
- 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.