diff --git a/README.md b/README.md
index 1ab3e40d9..52b257077 100644
--- a/README.md
+++ b/README.md
@@ -98,10 +98,10 @@ logs: {shape: page; style.multiple: true}
network.data processor -> api server
```
-> There is syntax highlighting with the editor plugins linked below.
-
+> Open in [playground](https://play.d2lang.com/?script=rVLLTsQwDLznKyJxbrWwtyLxFdyR1Zg2ahpHibvLCvXfcdqGfSHthVv8yIxn7APE1OhvpbV5qVryn7ZbQ60dnGjiCn1nPTYa3bCkn_Q7xtF6cJp7HFG3ZHCpLGFlTaP3u51kZjUrj3ykOKyYLTr5REeMhSMBS84yppKRXA9B-BJTRPNhgKEU-OSwHifHNjjp4DitxLNa-SP4NFpmjOoGXVdvl2VBR2_-sWeZgLwTp3SgyOCKnsnKa5PU4xd05OfyIWvTIVKLKdHZExEOHd4Z0p4E3oi2h25s8Ge764uZs4Rr4vqXMfQkAhx1SVanplQWtU0QMCbyEh-t4b7Rz_td6cuo267ryzWPMMiFgHN3XVdu1dkmaPM8K-EiLnGkASsDScj2mQqCFcvj4RGUsSnI_d70Z2GrCptYrVHZTRADXv80VWgL0bVvGfJMoH4A)
+
> For more examples, see [./docs/examples](./docs/examples).
## Quickstart
diff --git a/docs/assets/example.svg b/docs/assets/example.svg
index 1e0fd8c9e..5e8340add 100644
--- a/docs/assets/example.svg
+++ b/docs/assets/example.svg
@@ -1,17 +1,24 @@
-