diff --git a/README.md b/README.md
index ebf199e30..56d429e9e 100644
--- a/README.md
+++ b/README.md
@@ -46,34 +46,63 @@ https://user-images.githubusercontent.com/3120367/206125010-bd1fea8e-248a-43e7-8
## What does D2 look like?
```d2
-# Actors
-hans: Hans Niemann
+vars: {
+ d2-config: {
+ layout-engine: elk
+ # Terminal theme code
+ theme-id: 300
+ }
+}
+network: {
+ cell tower: {
+ satellites: {
+ shape: stored_data
+ style.multiple: true
+ }
-defendants: {
- mc: Magnus Carlsen
- playmagnus: Play Magnus Group
- chesscom: Chess.com
- naka: Hikaru Nakamura
+ transmitter
- mc -> playmagnus: Owns majority
- playmagnus <-> chesscom: Merger talks
- chesscom -> naka: Sponsoring
+ satellites -> transmitter: send
+ satellites -> transmitter: send
+ satellites -> transmitter: send
+ }
+
+ online portal: {
+ ui: {shape: hexagon}
+ }
+
+ data processor: {
+ storage: {
+ shape: cylinder
+ style.multiple: true
+ }
+ }
+
+ cell tower.transmitter -> data processor.storage: phone logs
}
-# Accusations
-hans -> defendants: 'sueing for $100M'
+user: {
+ shape: person
+ width: 130
+}
-# Claim
-defendants.naka -> hans: Accused of cheating on his stream
-defendants.mc -> hans: Lost then withdrew with accusations
-defendants.chesscom -> hans: 72 page report of cheating
+user -> network.cell tower: make call
+user -> network.online portal.ui: access {
+ style.stroke-dash: 3
+}
+
+api server -> network.online portal.ui: display
+api server -> logs: persist
+logs: {shape: page; style.multiple: true}
+
+network.data processor -> api server
```
-> There is syntax highlighting with the editor plugins linked below.
+
+
+
-
-
-> Rendered with the TALA layout engine.
+> 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).
diff --git a/docs/assets/example.svg b/docs/assets/example.svg
new file mode 100644
index 000000000..5e8340add
--- /dev/null
+++ b/docs/assets/example.svg
@@ -0,0 +1,232 @@
+
diff --git a/docs/assets/syntax.png b/docs/assets/syntax.png
deleted file mode 100644
index a836246ed..000000000
Binary files a/docs/assets/syntax.png and /dev/null differ
+
-
-> Rendered with the TALA layout engine.
+> 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).
diff --git a/docs/assets/example.svg b/docs/assets/example.svg
new file mode 100644
index 000000000..5e8340add
--- /dev/null
+++ b/docs/assets/example.svg
@@ -0,0 +1,232 @@
+
diff --git a/docs/assets/syntax.png b/docs/assets/syntax.png
deleted file mode 100644
index a836246ed..000000000
Binary files a/docs/assets/syntax.png and /dev/null differ