Merge pull request #1879 from alixander/update-readme

update outdated readme example

README.md

@@ -46,34 +46,63 @@ https://user-images.githubusercontent.com/3120367/206125010-bd1fea8e-248a-43e7-8
 ## What does D2 look like?
 
 ```d2
-# Actors
+vars: {
-hans: Hans Niemann
+  d2-config: {
+    layout-engine: elk
+    # Terminal theme code
+    theme-id: 300
+  }
+}
+network: {
+  cell tower: {
+    satellites: {
+      shape: stored_data
+      style.multiple: true
+    }
 
-defendants: {
+    transmitter
-  mc: Magnus Carlsen
-  playmagnus: Play Magnus Group
-  chesscom: Chess.com
-  naka: Hikaru Nakamura
 
-  mc -> playmagnus: Owns majority
+    satellites -> transmitter: send
-  playmagnus <-> chesscom: Merger talks
+    satellites -> transmitter: send
-  chesscom -> naka: Sponsoring
+    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
+user: {
-hans -> defendants: 'sueing for $100M'
+  shape: person
+  width: 130
+}
 
-# Claim
+user -> network.cell tower: make call
-defendants.naka -> hans: Accused of cheating on his stream
+user -> network.online portal.ui: access {
-defendants.mc -> hans: Lost then withdrew with accusations
+  style.stroke-dash: 3
-defendants.chesscom -> hans: 72 page report of cheating
+}
+
+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.
+<p align="center">
+    <img width="400px" src="./docs/assets/example.svg" alt="D2 render example" />
+</p>
 
-<img src="./docs/assets/syntax.png" alt="D2 render example" />
+> Open in [playground](https://play.d2lang.com/?script=rVLLTsQwDLznKyJxbrWwtyLxFdyR1Zg2ahpHibvLCvXfcdqGfSHthVv8yIxn7APE1OhvpbV5qVryn7ZbQ60dnGjiCn1nPTYa3bCkn_Q7xtF6cJp7HFG3ZHCpLGFlTaP3u51kZjUrj3ykOKyYLTr5REeMhSMBS84yppKRXA9B-BJTRPNhgKEU-OSwHifHNjjp4DitxLNa-SP4NFpmjOoGXVdvl2VBR2_-sWeZgLwTp3SgyOCKnsnKa5PU4xd05OfyIWvTIVKLKdHZExEOHd4Z0p4E3oi2h25s8Ge764uZs4Rr4vqXMfQkAhx1SVanplQWtU0QMCbyEh-t4b7Rz_td6cuo267ryzWPMMiFgHN3XVdu1dkmaPM8K-EiLnGkASsDScj2mQqCFcvj4RGUsSnI_d70Z2GrCptYrVHZTRADXv80VWgL0bVvGfJMoH4A)
-
-> Rendered with the TALA layout engine.
 
 > For more examples, see [./docs/examples](./docs/examples).