2022-11-23 01:04:26PM

README.md

@@ -70,6 +70,8 @@ defendants.chesscom -> hans: 72 page report of cheating
 
 <img src="./docs/assets/syntax.png" alt="D2 render example" width="50%" />
 
+> For more examples, see [./docs/examples](./docs/examples).
+
 ## Quickstart
 
 The most convenient way to use D2 is to just run it as a CLI executable to

docs/examples/twitter/input.d2

@@ -1,42 +1,44 @@
-# Generated with D2 v0.0.13
+timeline mixer: "" {
-# Layout engine: TALA v0.2.5
-Square: "" {
   explanation: |md
     ## **Timeline mixer**
     - Inject ads, who-to-follow, onboarding
     - Conversation module
     - Cursoring,pagination
-    - tweat deduplication
+    - Tweat deduplication
-    - served data logging
+    - Served data logging
   |
 }
 People discovery: "People discovery \nservice"
-People discovery 2: Ad mixer
+admixer: Ad mixer {
-People discovery 3: "Onboarding \nservice"
+  fill: "#c1a2f3"
-Square -> People discovery
-Square -> People discovery 3
-Square -> People discovery 2
-Square 2: "" {
-  explanation 2: |md
-    ## **GraphQL**
-    Federated Strato Column
-  |
 }
-Square 2 -> Square
+
-Square 3: "" {
+onboarding service: "Onboarding \nservice"
-  explanation: |md
+timeline mixer -> People discovery
-    ## **Tweet/user content hydration, visibility filtering**
+timeline mixer -> onboarding service
-    TLS-API (being derecated)
+timeline mixer -> admixer
-  |
+container0: "" {
+  graphql
+  comment
+  tlsapi
 }
-Square -> Square 3
+container0.graphql: GraphQL\nFederated Strato Column {
-Text: Twitter Frontend (TFE) {
+  shape: image
+  icon: https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/GraphQL_Logo.svg/1200px-GraphQL_Logo.svg.png
+}
+container0.comment: |md
+  ## Tweet/user content hydration, visibility filtering
+|
+container0.tlsapi: TLS-API (being deprecated)
+container0.graphql -> timeline mixer
+timeline mixer <- container0.tlsapi
+twitter fe: "Twitter Frontend " {
   icon: https://icons.terrastruct.com/social/013-twitter-1.svg
   shape: image
 }
-Text -> Square 2: iPhone web
+twitter fe -> container0.graphql: iPhone web
-Text -> Square 3: HTTP android
+twitter fe -> container0.tlsapi: HTTP Android
-Text 2: Web {
+web: Web {
   icon: https://icons.terrastruct.com/azure/Web%20Service%20Color/App%20Service%20Domains.svg
   shape: image
 }
@@ -50,61 +52,97 @@ Android: {
   shape: image
 }
 
-Text 2 -> Text
+web -> twitter fe
-People discovery 4: "Timeline\nScorer"
+timeline scorer: "Timeline\nScorer" {
-People discovery 5: Home Ranker
+  fill: "#ffdef1"
-People discovery 6: Timeline Service
-Square -> People discovery 4
-Square -> People discovery 5
-Square -> People discovery 6
-People discovery 7: Home mixer
-Square 2 -> People discovery 7
-People discovery 7 -> People discovery 4
-People discovery 7 -> People discovery 5
-People discovery 7 -> People discovery 6
-People discovery 8: Manhattan
-People discovery 9: Gizmoduck
-People discovery 10: Social graph
-People discovery 11: Tweety Pie
-People discovery 7 -> People discovery 8
-People discovery 7 -> People discovery 9
-People discovery 7 -> People discovery 10
-People discovery 7 -> People discovery 11
-Iphone -> Text
-Android -> Text
-People discovery 12: Prediction Service
-People discovery 13: Home Scorer
-People discovery 14: Manhattan
-People discovery 15: Memcache
-Image: "" {
-  icon: https://i.stack.imgur.com/twIm6.png
-  shape: image
 }
-Square 4: "" {
+home ranker: Home Ranker
-  People discovery 16: Fetch
+
-  People discovery: Feature {style.fill: "#F7F8FE"}
+timeline service: Timeline Service
-  People discovery 2: Scoring {style.fill: "#F7F8FE"}
+timeline mixer -> timeline scorer: Thrift RPC
-  People discovery 16 -> People discovery
+timeline mixer -> home ranker: {
-  People discovery -> People discovery 2
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+timeline mixer -> timeline service
+home mixer: Home mixer {
+  # fill: "#c1a2f3"
+}
+container0.graphql -> home mixer: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+home mixer -> timeline scorer
+home mixer -> home ranker: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+home mixer -> timeline service
+manhattan 2: Manhattan
+gizmoduck: Gizmoduck
+socialgraph: Social graph
+tweetypie: Tweety Pie
+home mixer -> manhattan 2
+home mixer -> gizmoduck
+home mixer -> socialgraph
+home mixer -> tweetypie
+Iphone -> twitter fe
+Android -> twitter fe
+prediction service2: Prediction Service {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png
+}
+home scorer: Home Scorer {
+  fill: "#ffdef1"
+}
+manhattan: Manhattan
+memcache: Memcache {
+  icon: https://d1q6f0aelx0por.cloudfront.net/product-logos/de041504-0ddb-43f6-b89e-fe04403cca8d-memcached.png
 }
 
-People discovery 21: Prediction Service
+fetch: Fetch {
-Square 4.People discovery 2 -> People discovery 21
+  multiple: true
-Square 4.People discovery 16 -> Square 5.People discovery 16
+  shape: step
-Square 4.People discovery -> People discovery 14
+}
-Square 4.People discovery -> People discovery 15
+feature: Feature {
-Square 4.People discovery -> Image: Candidate Sources
+  multiple: true
-People discovery 13 -> People discovery 14
+  shape: step
-People discovery 13 -> Image: Feature Hydration
+}
-People discovery 13 -> People discovery 15
+scoring: Scoring {
-People discovery 13 -> People discovery 12
+  multiple: true
-People discovery 5 -> People discovery 13
+  shape: step
-People discovery 5 -> Square 5.People discovery 16: Candidate fetch
+}
-Square 5: "" {
+fetch -> feature
-  People discovery 17: EarlyBird
+feature -> scoring
-  People discovery 20: Communities
+
-  People discovery 16: CrMixer {style.fill: "#F7F8FE"}
+prediction service: Prediction Service {
-  People discovery 18: Utag
+  shape: image
-  People discovery 19: Space
+  icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png
+}
+scoring -> prediction service
+fetch -> container2.crmixer
+
+home scorer -> manhattan: ""
+
+home scorer -> memcache: ""
+home scorer -> prediction service2
+home ranker -> home scorer
+home ranker -> container2.crmixer: Candidate Fetch
+container2: "" {
+  style.stroke: "#000E3D"
+  style.fill: "#ffffff"
+  crmixer: CrMixer {
     style.fill: "#F7F8FE"
   }
+  earlybird: EarlyBird
+  utag: Utag
+  space: Space
+  communities: Communities
+}
+etc: ...etc
+
+home scorer -> etc: Feature Hydration
+
+feature -> manhattan
+feature -> memcache
+feature -> etc: Candidate sources