terrastruct/d2-playground

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

d2-playground's Issues

surface better error messages

https://play.d2lang.com/?script=nJTBTttMEMfvfop9AcTdh-_wtcdyqHqtVJlgrKjBLglUQlUkqHAwIYHQUIeSBnBaRCglQUJgEkzyMDDr9SmvUHnHsZwaA-qFCO9_Zv7zm9kNxyuSrI9TSGnqbFoRCbSb1LDd0w47_gGFC2p2qWXQ2hX0tqDeJ58EQjgSkeTk-UVZTcnvZtKSkpXmBEJSmbSsLoySCIRIiiKSF362lT2oGJ51yVWylBUJ7a_Sax0_5bTMIrqJlsWzaSn1XlZnRAKVTfe0Q7-XoWgJhMwt5eYzIplaevP6lf-vpiqaSKb8n5f_C4RktKwsEvfgiHUK0KuGce5Oixo2W_sFxROs5tXaXnNX5M2NmiAT_6F7NqiDfhT6Hzolb3mdbpxgEI-QFMWXh0YnU5o6k_b7mRg1xnWBIEyNKUIObv0a9AtPL7u37WjegBezL9jt7yi1qNdA5H7uwtoN6Pb9bTXikJ8-yyPoRlCCR0OhzDZt2DKjcxmR-hdWsa4GdWaV_iLBlXn-l5rn0Nxnx6tgfHvKw6yW5b1FY2hp3fvSHjol1q_63vBjw7q_uRo6JWrfQPEwmhcKOrS7QWpMiG5xs--WK9Q8X5Cm75a336pssAP1fQx0HZP1tz3r0ms0k51tmFBsoXSsavfqftCAs91Y4XBgeB4NCrSRrQquxFhm_Qh61UDKz8eyYgdxvK5juocr8QqjRp4VF8eHTVCjAsUDfzs4LX4VW_7q185ik59EWMHdwDXZbLFy5bEFwFmHV991TNiyk9FSX9hEOeuUacOKN46vCSrHNP7BA0jD4kkJx0k-LI8DpLt992dvHM3eaiQoL_AfBI28hs7eY7DwyQgmw29LMqnJnPRRnviQ1aYz8lz4cOTkhcRdpF_Pabn9xBZG1yKZ1AOqOCB8JaG-H7xfRo1ZrXCr8kJe-BMAAP__&

add dark theme

Hope to add `/export/{format}` to render raw svg/png directly

Like mermaid.live did

https://mermaid.live/view#pako:eNptkMtqAzEMRX9F0bYzP-BFSqGFppBVt7NRPDcZgx-Jx6aEkH-PxtMuCvHqWjpHIN3YphFseMalIlq8OzllCUMkfW_eWfTb7ctXmqKhT3ifaMkdTemHJIOuqb4-hVfMSlwQmiCZAn7Rpdcr2jdHB7vV7mjXjEartnmO7-gIeDplSNlwxwE5iBt1i9siDFwmBAxsNB5k1jTEu3JSS_q-Rsum5IqO63mU8rfx_-LH6ErKbI7iZy2ifffrqdrF7g9-RmWe

Hope to add /export/{format} to render raw svg/png

https://play.d2lang.com/export/{format}?script=qlDQtVOo5AIEAAD__w%3D%3D&layout=dagre&theme=8

In this way, we could be easy to back to edit mode, with the shared link.

https://play.d2lang.com?script=qlDQtVOo5AIEAAD__w%3D%3D&layout=dagre&theme=8

allow composition

and just animate it

center render

Dark Flagship Terrastruct theme missing

Available themes:
Light:
- Neutral default: 0
- Neutral Grey: 1
- Flagship Terrastruct: 3
- Cool classics: 4
- Mixed berry blue: 5
- Grape soda: 6
- Aubergine: 7
- Colorblind clear: 8
- Vanilla nitro cola: 100
- Orange creamsicle: 101
- Shirley temple: 102
- Earth tones: 103
- Everglade green: 104
- Buttered toast: 105
- Terminal: 300
- Terminal Grayscale: 301
- Origami: 302
Dark:
- Dark Mauve: 200
- Dark Flagship Terrastruct: 201

and cool classics / mixed berry blue have their order swapped?

preserve history even after compiling

idk why monaco erases history after compiling

Variable example broken

should be
colors.primary

D2 encountered an API error: the link to the playground is reported

Here is the link with the error:
https://play.d2lang.com/?script=NMqxCsIwFIXhPU9xwDlQdMvm6ObgC1yTYxtoc-EmLYjk3YWI43fOf4jVgI8D0tlHLa88_wis8ta9eZY5FwY0aTL2Ex4LIU89iCh7ZYXger-BZmr_hLblIivawo2ImjieQZ9TwGWaHNBdd98AAAD__w%3D%3D&layout=tala&

Here is the code that cause the error:

vars: {
  d2-config: {
    layout-engine: tata
    # The above causes a API error
    # Terminal theme code
    theme-id: 300
  }
}

It seems that the offending line of the code is
layout-engine: tata

If I commented out this line, then there is no more API error.

png exports missing text in safari

Old play.d2lang.com URLs broke after d2/urlenc changes

Hello, I've been using play.d2lang.com to make diagrams and store them in a wiki page over the last few weeks. Pretty nice, thanks! I noticed this week that the URLs I had stored were broken. When I clicked them my elaborate diagrams started to only show a dreaded:

x -> y

I decided to figure out why and I found that the URL encoded changed in the d2 repository, in a commit from Nov 7: terrastruct/d2@5eead31

This did not take effect on the d2 playground site until d2 was upgraded for the deployed wasm, on Dec 6: ae1e9c3

When the bundled, WASM version of d2 was deployed this created a cutoff date. Any URLs generated before the cutoff would no longer properly decode their embedded d2 "scripts". Only URLs for documents created after the cutoff date would decode properly.

The following is a Go program I used to convert old URLs to the new URLs. I read the above commit and decoded using the old deflate dictionary, then encoding with the same parameters as the new urlenc.Encode. I just wanted to share that with anyone who needs it.

https://gist.github.com/jrcd-HR/92ef3407c9f5061787b7c7a095a031ea

I'm not sure how to fix it, other than first trying the new url.Decode method, and then trying the backup method if that fails. Of course, the problem is that the backup method is no longer implemented in the d2 wasm.

add a loader for editor

in case monaco loads slowly.

or a non-syntax-highlighted read-only syntax placeholder in the editor

add option for animated

layout engine change should auto-compile

pre-fill issue body with playground url in error bar

redirect playground.d2lang.com

some folks get this wrong

report github issue link should prepopulate comment with current URL

add tooltip snippet

memory leak

when i open playground it eats a lot of ram (several gigabytes) and i can't use it, please fix, it shouldn't eat so much memory even temporarily

add option to adjust padding

display commit hash of deployed

should be updated automatically, part of CI

store diagram in localstorage

https://discord.com/channels/1039184639652265985/1039185500088569907/1092362302549938206

[FEATURE REQUEST] Could we get a docker image?

It would be nice to have a docker image for self-hosting.

img stretched

Feature Request: In the Syntax Snippets section, add a "Render" button alongside Copy for each snippet

Alongside each snippet, right next to the Copy to Clipboard button, you could add a Render button that copies the code for that snippet, pastes it in the box at the top, and renders it

Add examples of shapes

In the Syntax snippets section of D2 Playground, I'd love to see examples of every shape that exists in the Customize shape type box:

diamond: { shape: diamond }
hexagon: { shape: hexagon}
...

change sketch toggle to icon in mobile

bundle images in exports

some encoded URLs can end in patterns that Github detects as not part of the URL

terrastruct/d2#626 (comment)

Notice how the underscores at the end are not hyperlinked blue.

Maybe we need to append something at the end to make sure the whole thing gets interpreted as URL

embed vim wasm

go build and run fails

This is what I consider to be an operational bug. Looks like this has only been designed to run in CI and deployed to whereever you're deploying this to 😅

I tried to build this locally and run it and failed.

go build .
./d2-playground`

should "just work"™ (but it does not)

Also it should be possible to install the binary elsewhere and have the assets builtin using the embed package, e.g:

go install .
cd ~
d2-playground

But this also does not work.

Honestly this should also help make it a hell of a lot easier to contribute too as well 🤞

Can we please fix this? 🙏

exports on mobile should save to device

dark mode

https://www.reddit.com/r/d2lang/comments/zrj6ip/please_add_dark_mode_to_the_playground_that_would/

Playground export to PNG doesn't work in Firefox

I just tried to export a playground diagram to PNG in firefox, I got a blank png file (size was 169kb). When I copied the diagram text to chrome and exported it it worked ok.