dot_ix_playground 0.7.0

Interactive dot graphs playground web application.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

---
graph_style: circle # box, circle
direction: vertical
hierarchy:
  github:
    github_app_zip: {}

  localhost:
    app_download: {}
    app_extract: {}

  aws:
    iam_policy: {}
    iam_role: {}
    instance_profile: {}
    s3_bucket:
      s3_object: {}

node_names:
  localhost:        "localhost"
  aws:              "aws"
  github:           "github"
  github_app_zip:   "app.zip"
  app_download:     "app_download"
  app_extract:      "app_extract"
  iam_policy:       "iam_policy"
  iam_role:         "iam_role"
  instance_profile: "instance_profile"
  s3_bucket:        "s3_bucket"
  s3_object:        "s3_object"

node_descs:
  localhost:        "Your computer"
  aws:              "Amazon Web Services"
  github:           "Github"
  # github_app_zip:   '~'
  app_download:     "app.zip"
  app_extract:      "/opt/app"
  iam_policy:       "EC2: Allow S3 Read"
  iam_role:         "EC2 IAM policy attachment"
  instance_profile: "EC2 instance role attachment"
  s3_bucket:        "demo-artifacts"
  s3_object:        "app.zip"

node_emojis:
  localhost:        💻
  aws:              ☁️
  github:           🐙
  github_app_zip:   📁
  app_download:     📥
  app_extract:      📂
  iam_policy:       📝
  iam_role:         🔰
  instance_profile: 🏷️
  s3_bucket:        🪣
  s3_object:        📁

edges:
  app_download__app_extract: [app_download, app_extract]
  iam_policy__iam_role: [iam_policy, iam_role]
  iam_role__instance_profile: [iam_role, instance_profile]
  app_download__s3_object: [app_download, s3_object]
  iam_policy__s3_object: [iam_policy, s3_object]
  github_app_zip__app_download_1: [github_app_zip, app_download]
  github_app_zip__app_download_2: [github_app_zip, app_download]

edge_descs:
  github_app_zip__app_download_1: ' '

graphviz_attrs:
  edge_constraints:
    github_app_zip__app_download_1: false
    github_app_zip__app_download_2: true
    app_download__s3_object: true
  edge_minlen_default: 1
  edge_minlens:
    github_app_zip__app_download_1: 1
    github_app_zip__app_download_2: 2
  edge_dirs: # forward, back, both, none
    github_app_zip__app_download_1: back

theme:
  merge_with_base: true
  styles:
    node_defaults:
      stroke_width: '1'
      extra: 'cursor-pointer rounded-lg'
    edge_defaults:
      extra: hidden
    github_app_zip__app_extract:
      extra: 'cursor-pointer'
    blue_animated: &blue_animated
      shape_color: blue
      stroke_style: dashed  # shorthand for [&>path]:[stroke-dasharray:3]
      stroke_width: '[2px]'
      stroke_shade_normal: '600'
      fill_shade_normal: '500'
      extra: >-
        [&>path]:animate-[stroke-dashoffset-move_4s_linear_infinite]
        cursor-pointer
    app_download__s3_object:
      <<: *blue_animated
    github_app_zip__app_download_1:
      <<: *blue_animated
      shape_color: violet
      extra: >-
        [&>path]:animate-[stroke-dashoffset-move-reverse_5s_linear_infinite]
        cursor-pointer
    github_app_zip__app_download_2:
      <<: *blue_animated
      shape_color: purple
      stroke_width: '[1px]'
      extra: >-
        [&>path]:animate-[stroke-dashoffset-move_6s_linear_infinite]
        [&>path]:[stroke-dasharray:2]
        cursor-pointer
    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: amber
      outline_color: yellow
    localhost:
      <<: *light
      shape_color: blue
    github:
      <<: *light
      shape_color: gray
    s3_bucket:
      fill_shade_normal: '200'
      fill_shade_hover: '100'
      fill_shade_focus: '200'
      fill_shade_active: '200'
      stroke_shade_normal: '500'
      stroke_shade_hover: '400'
      stroke_shade_active: '600'
      stroke_style: dotted
      padding: '3'
      shape_color: amber

css: >-
  @keyframes stroke-dashoffset-move {
    0%   { stroke-dashoffset: 48; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes stroke-dashoffset-move-reverse {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 48; }
  }