diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go index fcc14a01f..241713087 100644 --- a/d2renderers/d2sketch/sketch_test.go +++ b/d2renderers/d2sketch/sketch_test.go @@ -495,6 +495,461 @@ darker: { style.font-color: "#fff" style.fill: "#000" } +`, + }, + { + name: "basic dark", + themeID: 200, + script: `a -> b +`, + }, + { + name: "child to child dark", + themeID: 200, + script: `winter.snow -> summer.sun + `, + }, + { + name: "animated dark", + themeID: 200, + script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true } + `, + }, + { + name: "connection label dark", + themeID: 200, + script: `a -> b: hello + `, + }, + { + name: "crows feet dark", + themeID: 200, + script: `a1 <-> b1: { + style.stroke-width: 1 + source-arrowhead: { + shape: cf-many + } + target-arrowhead: { + shape: cf-many + } +} +a2 <-> b2: { + style.stroke-width: 3 + source-arrowhead: { + shape: cf-many + } + target-arrowhead: { + shape: cf-many + } +} +a3 <-> b3: { + style.stroke-width: 6 + source-arrowhead: { + shape: cf-many + } + target-arrowhead: { + shape: cf-many + } +} + +c1 <-> d1: { + style.stroke-width: 1 + source-arrowhead: { + shape: cf-many-required + } + target-arrowhead: { + shape: cf-many-required + } +} +c2 <-> d2: { + style.stroke-width: 3 + source-arrowhead: { + shape: cf-many-required + } + target-arrowhead: { + shape: cf-many-required + } +} +c3 <-> d3: { + style.stroke-width: 6 + source-arrowhead: { + shape: cf-many-required + } + target-arrowhead: { + shape: cf-many-required + } +} + +e1 <-> f1: { + style.stroke-width: 1 + source-arrowhead: { + shape: cf-one + } + target-arrowhead: { + shape: cf-one + } +} +e2 <-> f2: { + style.stroke-width: 3 + source-arrowhead: { + shape: cf-one + } + target-arrowhead: { + shape: cf-one + } +} +e3 <-> f3: { + style.stroke-width: 6 + source-arrowhead: { + shape: cf-one + } + target-arrowhead: { + shape: cf-one + } +} + +g1 <-> h1: { + style.stroke-width: 1 + source-arrowhead: { + shape: cf-one-required + } + target-arrowhead: { + shape: cf-one-required + } +} +g2 <-> h2: { + style.stroke-width: 3 + source-arrowhead: { + shape: cf-one-required + } + target-arrowhead: { + shape: cf-one-required + } +} +g3 <-> h3: { + style.stroke-width: 6 + source-arrowhead: { + shape: cf-one-required + } + target-arrowhead: { + shape: cf-one-required + } +} + +c <-> d <-> f: { + style.stroke-width: 1 + style.stroke: "orange" + source-arrowhead: { + shape: cf-many-required + } + target-arrowhead: { + shape: cf-one + } +} + `, + }, + { + name: "twitter dark", + themeID: 200, + script: `timeline mixer: "" { + explanation: |md + ## **Timeline mixer** + - Inject ads, who-to-follow, onboarding + - Conversation module + - Cursoring,pagination + - Tweat deduplication + - Served data logging + | +} +People discovery: "People discovery \nservice" +admixer: Ad mixer { + style.fill: "#c1a2f3" +} + +onboarding service: "Onboarding \nservice" +timeline mixer -> People discovery +timeline mixer -> onboarding service +timeline mixer -> admixer +container0: "" { + graphql + comment + tlsapi +} +container0.graphql: GraphQL\nFederated Strato Column { + 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 +} +twitter fe -> container0.graphql: iPhone web +twitter fe -> container0.tlsapi: HTTP Android +web: Web { + icon: https://icons.terrastruct.com/azure/Web%20Service%20Color/App%20Service%20Domains.svg + shape: image +} + +Iphone: { + icon: 'https://ss7.vzw.com/is/image/VerizonWireless/apple-iphone-12-64gb-purple-53017-mjn13ll-a?$device-lg$' + shape: image +} +Android: { + icon: https://cdn4.iconfinder.com/data/icons/smart-phones-technologies/512/android-phone.png + shape: image +} + +web -> twitter fe +timeline scorer: "Timeline\nScorer" { + style.fill "#ffdef1" +} +home ranker: Home Ranker + +timeline service: Timeline Service +timeline mixer -> timeline scorer: Thrift RPC +timeline mixer -> home ranker: { + style.stroke-dash: 4 + style.stroke: "#000E3D" +} +timeline mixer -> timeline service +home mixer: Home mixer { + # style.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 { + style.fill "#ffdef1" +} +manhattan: Manhattan +memcache: Memcache { + icon: https://d1q6f0aelx0por.cloudfront.net/product-logos/de041504-0ddb-43f6-b89e-fe04403cca8d-memcached.png +} + +fetch: Fetch { + style.multiple: true + shape: step +} +feature: Feature { + style.multiple: true + shape: step +} +scoring: Scoring { + style.multiple: true + shape: step +} +fetch -> feature +feature -> scoring + +prediction service: Prediction Service { + shape: image + 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 + `, + }, + { + name: "all_shapes dark", + themeID: 200, + script: ` +rectangle: {shape: "rectangle"} +square: {shape: "square"} +page: {shape: "page"} +parallelogram: {shape: "parallelogram"} +document: {shape: "document"} +cylinder: {shape: "cylinder"} +queue: {shape: "queue"} +package: {shape: "package"} +step: {shape: "step"} +callout: {shape: "callout"} +stored_data: {shape: "stored_data"} +person: {shape: "person"} +diamond: {shape: "diamond"} +oval: {shape: "oval"} +circle: {shape: "circle"} +hexagon: {shape: "hexagon"} +cloud: {shape: "cloud"} + +rectangle -> square -> page +parallelogram -> document -> cylinder +queue -> package -> step +callout -> stored_data -> person +diamond -> oval -> circle +hexagon -> cloud +`, + }, + { + name: "sql_tables dark", + themeID: 200, + script: `users: { + shape: sql_table + id: int + name: string + email: string + password: string + last_login: datetime +} + +products: { + shape: sql_table + id: int + price: decimal + sku: string + name: string +} + +orders: { + shape: sql_table + id: int + user_id: int + product_id: int +} + +shipments: { + shape: sql_table + id: int + order_id: int + tracking_number: string {constraint: primary_key} + status: string +} + +users.id <-> orders.user_id +products.id <-> orders.product_id +shipments.order_id <-> orders.id`, + }, + { + name: "class dark", + themeID: 200, + script: `manager: BatchManager { + shape: class + -num: int + -timeout: int + -pid + + +getStatus(): Enum + +getJobs(): "Job[]" + +setTimeout(seconds int) +} +`, + }, + { + name: "arrowheads dark", + themeID: 200, + script: ` +a: "" +b: "" +a.1 -- b.1: none +a.2 <-> b.2: arrow { + source-arrowhead.shape: arrow + target-arrowhead.shape: arrow +} +a.3 <-> b.3: triangle { + source-arrowhead.shape: triangle + target-arrowhead.shape: triangle +} +a.4 <-> b.4: diamond { + source-arrowhead.shape: diamond + target-arrowhead.shape: diamond +} +a.5 <-> b.5: diamond filled { + source-arrowhead: { + shape: diamond + style.filled: true + } + target-arrowhead: { + shape: diamond + style.filled: true + } +} +a.6 <-> b.6: cf-many { + source-arrowhead.shape: cf-many + target-arrowhead.shape: cf-many +} +a.7 <-> b.7: cf-many-required { + source-arrowhead.shape: cf-many-required + target-arrowhead.shape: cf-many-required +} +a.8 <-> b.8: cf-one { + source-arrowhead.shape: cf-one + target-arrowhead.shape: cf-one +} +a.9 <-> b.9: cf-one-required { + source-arrowhead.shape: cf-one-required + target-arrowhead.shape: cf-one-required +} +`, + }, + { + name: "opacity dark", + themeID: 200, + script: `x.style.opacity: 0.4 +y: |md + linux: because a PC is a terrible thing to waste +| { + style.opacity: 0.4 +} +x -> a: { + label: You don't have to know how the computer works,\njust how to work the computer. + style.opacity: 0.4 +} +users: { + shape: sql_table + last_login: datetime + style.opacity: 0.4 +} `, }, } @@ -502,9 +957,10 @@ darker: { } type testCase struct { - name string - script string - skip bool + name string + themeID int64 + script string + skip bool } func runa(t *testing.T, tcs []testCase) { @@ -546,7 +1002,7 @@ func run(t *testing.T, tc testCase) { svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{ Pad: d2svg.DEFAULT_PADDING, Sketch: true, - ThemeID: 0, + ThemeID: tc.themeID, }) assert.Success(t, err) err = os.MkdirAll(dataPath, 0755) diff --git a/d2renderers/d2sketch/testdata/all_shapes_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/all_shapes_dark/sketch.exp.svg new file mode 100644 index 000000000..d3e207005 --- /dev/null +++ b/d2renderers/d2sketch/testdata/all_shapes_dark/sketch.exp.svg @@ -0,0 +1,49 @@ + + + + + + +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/animated_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/animated_dark/sketch.exp.svg new file mode 100644 index 000000000..2cc3ae61a --- /dev/null +++ b/d2renderers/d2sketch/testdata/animated_dark/sketch.exp.svg @@ -0,0 +1,62 @@ + + + + + + +wintersummertreessnowsun + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/arrowheads_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/arrowheads_dark/sketch.exp.svg new file mode 100644 index 000000000..c4e5cb09e --- /dev/null +++ b/d2renderers/d2sketch/testdata/arrowheads_dark/sketch.exp.svg @@ -0,0 +1,64 @@ + + + + + + +112233445566778899none arrow triangle diamond diamond filled cf-many cf-many-required cf-one cf-one-required + + + + + + + + + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/basic_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/basic_dark/sketch.exp.svg new file mode 100644 index 000000000..02c4ff660 --- /dev/null +++ b/d2renderers/d2sketch/testdata/basic_dark/sketch.exp.svg @@ -0,0 +1,49 @@ + + + + + + +ab + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/child_to_child_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/child_to_child_dark/sketch.exp.svg new file mode 100644 index 000000000..0a6b4352f --- /dev/null +++ b/d2renderers/d2sketch/testdata/child_to_child_dark/sketch.exp.svg @@ -0,0 +1,56 @@ + + + + + + +wintersummersnowsun + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/class_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/class_dark/sketch.exp.svg new file mode 100644 index 000000000..e073254dd --- /dev/null +++ b/d2renderers/d2sketch/testdata/class_dark/sketch.exp.svg @@ -0,0 +1,49 @@ + + + + + + +BatchManager-numint-timeoutint-pid+getStatus()Enum+getJobs()Job[]+setTimeout(seconds int)void + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/connection_label_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/connection_label_dark/sketch.exp.svg new file mode 100644 index 000000000..f6750b4e5 --- /dev/null +++ b/d2renderers/d2sketch/testdata/connection_label_dark/sketch.exp.svg @@ -0,0 +1,56 @@ + + + + + + +ab hello + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/crows_feet_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/crows_feet_dark/sketch.exp.svg new file mode 100644 index 000000000..8e3ea105b --- /dev/null +++ b/d2renderers/d2sketch/testdata/crows_feet_dark/sketch.exp.svg @@ -0,0 +1,49 @@ + + + + + + +a1b1a2b2a3b3c1d1c2d2c3d3e1f1e2f2e3f3g1h1g2h2g3h3cdf + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg new file mode 100644 index 000000000..81fc2a07a --- /dev/null +++ b/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg @@ -0,0 +1,806 @@ + + + + + + +x

linux: because a PC is a terrible thing to waste

+
auserslast_logindatetime You don't have to know how the computer works,just how to work the computer. + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/sql_tables_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/sql_tables_dark/sketch.exp.svg new file mode 100644 index 000000000..4e586c328 --- /dev/null +++ b/d2renderers/d2sketch/testdata/sql_tables_dark/sketch.exp.svg @@ -0,0 +1,49 @@ + + + + + + +usersidintnamestringemailstringpasswordstringlast_logindatetimeproductsidintpricedecimalskustringnamestringordersidintuser_idintproduct_idintshipmentsidintorder_idinttracking_numberstringPKstatusstring + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg b/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg new file mode 100644 index 000000000..886355346 --- /dev/null +++ b/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg @@ -0,0 +1,829 @@ + + + + + + + + +People discovery serviceAd mixerOnboarding serviceTwitter Frontend WebIphoneAndroidTimelineScorerHome RankerTimeline ServiceHome mixerManhattanGizmoduckSocial graphTweety PiePrediction ServiceHome ScorerManhattanMemcacheFetchFeatureScoringPrediction Service...etc

Timeline mixer

+
    +
  • Inject ads, who-to-follow, onboarding
    • +
  • Conversation module
    • +
  • Cursoring,pagination
    • +
  • Tweat deduplication
    • +
  • Served data logging
    • +
+
GraphQLFederated Strato Column

Tweet/user content hydration, visibility filtering

+
TLS-API (being deprecated)CrMixerEarlyBirdUtagSpaceCommunities iPhone web HTTP Android Thrift RPC Candidate Fetch Feature Hydration Candidate sources + + + + + + + + \ No newline at end of file