https://github.com/terrastruct/d2-playground

An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.
https://github.com/terrastruct/d2-playground

diagramming diagrams text-to-diagrams

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/terrastruct/d2-playground
• Owner: terrastruct
• License: mpl-2.0
• Created: 2022-12-01T00:34:50.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2025-03-18T11:59:34.000Z (7 months ago)
• Last Synced: 2025-03-30T12:08:42.761Z (6 months ago)
• Topics: diagramming, diagrams, text-to-diagrams
• Language: JavaScript
• Homepage: https://play.d2lang.com
• Size: 60.1 MB
• Stars: 90
• Watchers: 3
• Forks: 15
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          


  

  


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

  


[![ci](https://github.com/terrastruct/d2-playground/actions/workflows/ci.yml/badge.svg)](https://github.com/terrastruct/d2-playground/actions/workflows/ci.yml)

[![daily](https://github.com/terrastruct/d2-playground/actions/workflows/daily.yml/badge.svg)](https://github.com/terrastruct/d2-playground/actions/workflows/daily.yml)

[![discord](https://img.shields.io/discord/1039184639652265985?label=discord)](https://discord.gg/NF6X8K4eDq)

[![twitter](https://img.shields.io/twitter/follow/terrastruct?style=social)](https://twitter.com/terrastruct)

[![license](https://img.shields.io/github/license/terrastruct/d2-playground?color=9cf)](./LICENSE.txt)



**Notice:** This is not the repository for the D2 language. That can be found [here](https://github.com/terrastruct/d2).

# Table of Contents

- [FAQ](#faq)

  - [What is this written in?](#what-is-this-written-in)

  - [How does it work?](#how-does-it-work)

  - [What's this API?](#whats-this-api)

- [Contributing](#contributing)

- [Dependencies](#dependencies)

## FAQ

### What is this written in?

Vanilla HTML, CSS, and Javascript.

### How does it work?

![Sequence diagram](./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](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](https://esbuild.github.io/getting-started/#install-esbuild)

1. Run `git submodule update --init --recursive` to pull the submodules (D2's VSCode plugin

   for syntax highlighting, and our CI library).

1. Go to `src/js` and run `yarn` to get the Node modules.

1. Run `go run main.go` and open `http://localhost:9090`.

## Dependencies

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

1. [Monaco Editor](https://github.com/microsoft/monaco-editor) for text editing features.

1. [Panzoom](https://github.com/anvaka/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.