Add playground examples.

playground/public/examples/cloud_infrastructure.yaml

@@ -0,0 +1,165 @@
+# Example: Cloud Infrastructure
+---
+direction: vertical
+hierarchy:
+  aws:
+    aws_global:
+      aws_global_iam_role_beanstalk: {}
+      aws_global_iam_role_instance: {}
+    aws_region:
+      aws_region_vpc:
+        aws_region_vpc_a:
+          aws_region_vpc_a_shared_subnet: {}
+          aws_region_vpc_a_dev_subnet: {}
+          aws_region_vpc_a_prod_subnet: {}
+        aws_region_vpc_b:
+          aws_region_vpc_b_dev_subnet: {}
+          aws_region_vpc_b_prod_subnet: {}
+        aws_region_vpc_c:
+          aws_region_vpc_c_dev_subnet: {}
+          aws_region_vpc_c_prod_subnet: {}
+
+node_names:
+  aws: "Amazon Web Services"
+  aws_global: "<b>Global Resources</b> "
+  aws_global_iam_role_beanstalk: "IAM Role"
+  aws_global_iam_role_instance: "IAM Role"
+  aws_region: "<b>Regional Resources</b> "
+  aws_region_vpc: "VPC"
+  aws_region_vpc_a: "Region A"
+  aws_region_vpc_a_shared_subnet: "(Shared) Subnet"
+  aws_region_vpc_a_dev_subnet: "(DEV) Subnet"
+  aws_region_vpc_a_prod_subnet: "(PROD) Subnet"
+  aws_region_vpc_b: "Region B"
+  aws_region_vpc_b_dev_subnet: "(DEV) Subnet"
+  aws_region_vpc_b_prod_subnet: "(PROD) Subnet"
+  aws_region_vpc_c: "Region C"
+  aws_region_vpc_c_dev_subnet: "(DEV) Subnet"
+  aws_region_vpc_c_prod_subnet: "(PROD) Subnet"
+
+node_descs:
+  step_1: "Find bug"
+  aws_global_iam_role_beanstalk: "aws-elasticbeanstalk-service-role"
+  aws_global_iam_role_instance: "aws-elasticbeanstalk-ec2-role"
+  aws_region_vpc: "172.31.0.0/16"
+  aws_region_vpc_a_shared_subnet: "172.31.0.0/22"
+  aws_region_vpc_a_dev_subnet: "172.31.4.0/23"
+  aws_region_vpc_b_dev_subnet: "172.31.6.0/23"
+  aws_region_vpc_c_dev_subnet: "172.31.8.0/23"
+  aws_region_vpc_a_prod_subnet: "172.31.10.0/23"
+  aws_region_vpc_b_prod_subnet: "172.31.12.0/23"
+  aws_region_vpc_c_prod_subnet: "172.31.14.0/23"
+
+node_emojis:
+  aws: ☁️
+  aws_global: 🌏
+  aws_global_iam_role_beanstalk: 📄
+  aws_global_iam_role_instance: 📄
+  aws_region: 🗾
+  aws_region_vpc: 🌐
+  aws_region_vpc_a_shared_subnet: 🕸️
+  aws_region_vpc_a_dev_subnet: 🕸️
+  aws_region_vpc_b_dev_subnet: 🕸️
+  aws_region_vpc_c_dev_subnet: 🕸️
+  aws_region_vpc_a_prod_subnet: 🕸️
+  aws_region_vpc_b_prod_subnet: 🕸️
+  aws_region_vpc_c_prod_subnet: 🕸️
+
+edges:
+  aws_region_vpc_a_shared_subnet__aws_region_vpc_a_dev_subnet: [aws_region_vpc_a_shared_subnet, aws_region_vpc_a_dev_subnet]
+  aws_region_vpc_a_shared_subnet__aws_region_vpc_b_dev_subnet: [aws_region_vpc_a_shared_subnet, aws_region_vpc_b_dev_subnet]
+  aws_region_vpc_a_shared_subnet__aws_region_vpc_c_dev_subnet: [aws_region_vpc_a_shared_subnet, aws_region_vpc_c_dev_subnet]
+
+  aws_region_vpc_a_dev_subnet__aws_region_vpc_a_prod_subnet: [aws_region_vpc_a_dev_subnet, aws_region_vpc_a_prod_subnet]
+  aws_region_vpc_b_dev_subnet__aws_region_vpc_b_prod_subnet: [aws_region_vpc_b_dev_subnet, aws_region_vpc_b_prod_subnet]
+  aws_region_vpc_c_dev_subnet__aws_region_vpc_c_prod_subnet: [aws_region_vpc_c_dev_subnet, aws_region_vpc_c_prod_subnet]
+
+  aws_global_iam_role_beanstalk__aws_global_iam_role_instance: [aws_global_iam_role_beanstalk, aws_global_iam_role_instance]
+  aws_global_iam_role_instance__aws_region_vpc_a: [aws_global_iam_role_instance, aws_region_vpc_a]
+
+tags:
+  tag_global: "global"
+  tag_vpc: "vpc"
+  tag_stage_dev: "stage (DEV)"
+  tag_stage_prod: "stage (PROD)"
+
+tag_items:
+  tag_global:     [aws_global_iam_role_beanstalk, aws_global_iam_role_instance]
+  tag_vpc:        [aws_region_vpc, aws_region_vpc_a_shared_subnet]
+  tag_stage_dev:  [aws_region_vpc_a_dev_subnet, aws_region_vpc_b_dev_subnet, aws_region_vpc_c_dev_subnet]
+  tag_stage_prod: [aws_region_vpc_a_prod_subnet, aws_region_vpc_b_prod_subnet, aws_region_vpc_c_prod_subnet]
+
+tag_styles_focus:
+  tag_global: &tag_defaults
+    node_defaults:
+      shape_color: lime
+      stroke_width: '[1px]'
+      stroke_style: 'solid'
+      stroke_shade: '500'
+      fill_shade: '200'
+  tag_vpc: *tag_defaults
+  tag_stage_dev: *tag_defaults
+  tag_stage_prod: *tag_defaults
+
+graphviz_attrs:
+  pack_mode: array_t2
+
+theme:
+  styles:
+    node_defaults:
+      extra: 'cursor-pointer rounded-lg'
+    edge_defaults:
+      extra: cursor-pointer
+    hidden: &hidden { extra: hidden }
+    aws_region_vpc_a_shared_subnet__aws_region_vpc_a_dev_subnet: *hidden
+    aws_region_vpc_a_shared_subnet__aws_region_vpc_b_dev_subnet: *hidden
+    aws_region_vpc_a_shared_subnet__aws_region_vpc_c_dev_subnet: *hidden
+    aws_global_iam_role_beanstalk__aws_global_iam_role_instance: *hidden
+    aws_region_vpc_a_dev_subnet__aws_region_vpc_a_prod_subnet: *hidden
+    aws_region_vpc_b_dev_subnet__aws_region_vpc_b_prod_subnet: *hidden
+    aws_region_vpc_c_dev_subnet__aws_region_vpc_c_prod_subnet: *hidden
+    aws_global_iam_role_instance__aws_region_vpc_a: *hidden
+    light: &light
+      fill_shade_normal: '100'
+      fill_shade_hover: '50'
+      fill_shade_focus: '100'
+      fill_shade_active: '100'
+      stroke_shade_normal: '400'
+      stroke_shade_hover: '300'
+      stroke_shade_active: '500'
+      stroke_style: dotted
+      padding: '3'
+    aws:
+      <<: *light
+      shape_color: yellow
+      outline_color: yellow
+
+    resource_group: &resource_group
+      <<: *light
+      shape_color: stone
+      outline_color: stone
+    aws_global: *resource_group
+    aws_region: *resource_group
+    aws_region_vpc:
+      <<: *light
+      stroke_style: solid
+    region: &region
+      <<: *light
+      shape_color: slate
+      outline_color: slate
+    aws_region_vpc_a: *region
+    aws_region_vpc_b: *region
+    aws_region_vpc_c: *region
+
+    subnet: &subnet
+      <<: *light
+      shape_color: blue
+      outline_color: blue
+      stroke_style: solid
+    aws_region_vpc_a_shared_subnet: *subnet
+    aws_region_vpc_a_dev_subnet: *subnet
+    aws_region_vpc_a_prod_subnet: *subnet
+    aws_region_vpc_b_dev_subnet: *subnet
+    aws_region_vpc_b_prod_subnet: *subnet
+    aws_region_vpc_c_dev_subnet: *subnet
+    aws_region_vpc_c_prod_subnet: *subnet

playground/public/examples/example_003.yaml → playground/public/examples/demo.yaml

@@ -2,13 +2,13 @@
 graph_style: circle # box, circle
 direction: vertical
 hierarchy:
-  github:
-    github_app_zip: {}
-
   localhost:
     app_download: {}
     app_extract: {}
 
+  github:
+    github_app_zip: {}
+
   aws:
     iam_policy: {}
     iam_role: {}
@@ -75,25 +75,13 @@ graphviz_attrs:
     github_app_zip__app_download_response: 1
   edge_dirs: # forward, back, both, none
     github_app_zip__app_download_request: back
-
-  # "node", "cluster", "graph", "array(_flags)?(n)?"
-  #
-  # array flags:
-  #
-  # - <none>: row major order
-  # - c: column major order
-  # - t: align clusters top (horizontal graphs)
-  # - b: align clusters bottom (horizontal graphs)
-  # - l: align clusters left (vertical graphs)
-  # - r: align clusters right (vertical graphs)
   pack_mode: "array_t"
 
 theme:
   merge_with_base: true
   styles:
     node_defaults:
       stroke_width: '1'
-      extra: 'rounded-lg'
     edge_defaults:
       visibility: invisible
     light: &light
@@ -139,8 +127,8 @@ tag_items:
   tag_step_1: [iam_policy, iam_role, instance_profile]
   tag_step_2: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, github_app_zip__app_download_request, github_app_zip__app_download_response]
   tag_step_3: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, app_download__s3_object, s3_object]
-  tag_step_4: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, app_download__s3_object, s3_object, app_extract, app_download__app_extract]
-  tag_step_5: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, app_download__s3_object, s3_object, app_extract]
+  tag_step_4: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, s3_object, app_extract, app_download__app_extract]
+  tag_step_5: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, s3_object, app_extract]
 
 # Not part of `info_graph`, but for deduplication, we can use our own keys.
 # Unknown keys are ignored during deserialization

playground/public/examples/nested_nodes.yaml

@@ -0,0 +1,12 @@
+# Example: Nested Nodes
+---
+hierarchy:
+  a:
+    a0: {}
+    a1: {}
+  b:
+    b0: {}
+
+edges:
+  a__b: [a, b]
+  a1__b: [a1, b0]

playground/public/examples/example_001.yaml → playground/public/examples/process_simple.yaml

@@ -1,6 +1,5 @@
+# Example: Process (simple)
 ---
-# Example 001: Simple Diagram
-
 hierarchy:
   a: {}
   b: {}

playground/public/examples/process_with_info.yaml

@@ -0,0 +1,36 @@
+# Example: Process With Info
+---
+hierarchy:
+  a: {}
+  b: {}
+  c: {}
+
+node_names:
+  a: "Step 1"
+  b: "Step 2"
+  c: "Step 3"
+
+node_descs:
+  a: >-
+    Download Rust:
+
+    https://www.rust-lang.org/learn/get-started
+
+  b: >-
+    Learn from the book:
+
+    https://www.rust-lang.org/learn
+
+  c: >-
+    Visit the forum:
+
+    https://users.rust-lang.org/
+
+node_emojis:
+  a: 📥
+  b: 📚
+  c: 🧵
+
+edges:
+  ab: [a, b]
+  bc: [b, c]

playground/public/examples/styles_animated.yaml

@@ -0,0 +1,53 @@
+# Example: Styles (animated)
+---
+graph_style: circle # circle / box
+direction: vertical
+hierarchy:
+  a: {}
+  b: {}
+  c: {}
+  d: {}
+
+edges:
+  ab: [a, b]
+  ac: [a, c]
+  bd: [b, d]
+  cd: [c, d]
+
+theme:
+  merge_with_base: true # defaults to true
+  styles:
+    a:
+      stroke_width: '2' 
+      shape_color: 'green'
+
+    b: &in_progress
+      animate: 'pulse'
+      stroke_width: '2' 
+      shape_color: 'blue'
+
+    c:
+      # we can use YAML 1.1's Merge Key's feature:
+      #
+      # <https://yaml.org/type/merge.html>
+      #
+      # A side effect of the implementation means all style
+      # values must be single quoted.
+      #
+      # That's why values like `stroke_width: '2'` are quoted
+      # instead of a plain number.
+      <<: *in_progress
+
+      # Must surround custom keyframes animation name in quotes and brackets
+      #
+      # For syntax, see:
+      #
+      # <https://tailwindcss.com/docs/animation#arbitrary-values>
+      animate: '[ellipse-spin_0.3s_linear_infinite]'
+      stroke_style: 'dashed'
+
+css: >-
+  @keyframes ellipse-spin {
+    0%   { stroke-dashoffset: 6; }
+    100% { stroke-dashoffset: 0; }
+  }

playground/public/examples/styles_simple.yaml

@@ -0,0 +1,60 @@
+# Example: Styles (simple)
+---
+hierarchy:
+  a: {}
+  b: {}
+  c: {}
+  d: {}
+
+edges:
+  ab: [a, b]
+  bc: [b, c]
+  cd: [c, d]
+
+# Theme to style the nodes with.
+#
+# See the following pages for a full list of fields:
+#
+# * <https://docs.rs/dot_ix_model/latest/dot_ix_model/theme/struct.Theme.html>
+# * <https://docs.rs/dot_ix_model/latest/dot_ix_model/theme/enum.ThemeAttr.html>
+theme:
+  merge_with_base: true # defaults to true
+  styles:
+    node_defaults: # applies to all nodes
+
+      # Default color if `stroke_color` and `fill_color` are not specified.
+      shape_color: stone
+
+      # All four keys -- width, style, color, shade --
+      # must be defined for the stroke color to be set.
+      #
+      # Some of these can be defined by a more general key,
+      # e.g. `shape_color` in place of `stroke_color`.
+      #
+      # There are also default values in the base theme[1].
+      #
+      # [1]: https://github.com/azriel91/dot_ix/blob/0.7.0/crate/model/src/theme.rs#L86
+      stroke_width: '1' 
+      stroke_style: 'solid'
+      stroke_color: 'indigo'
+
+      # stroke_shade: '600'       # default for all states
+      stroke_shade_normal: '600'  # when there is nothing applied to the node
+      stroke_shade_focus:  '500'  # when the node is focused
+      stroke_shade_hover:  '400'  # when the cursor is hovering above the node
+      stroke_shade_active: '500'  # when the node is clicked and held
+
+    a: # specifically style node `a`
+      stroke_width: '2' 
+      shape_color: 'green'
+      # stroke_color from `node_defaults`
+      # is more specific than `shape_color`
+      # from a shape's styles
+      stroke_color: 'green'
+
+    b:
+      shape_color: 'blue'
+      stroke_style: 'dashed'
+
+    edge_defaults:
+      stroke_style: 'dotted'