kiro-workshop/sudoku-architecture.drawio at main · cc8t/kiro-workshop · GitHub

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
<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2025-11-18T06:57:00.000Z" agent="5.0" etag="abc123" version="22.1.11" type="device">
  <diagram name="Sudoku App Architecture" id="sudoku-terraform-arch">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0" background="none">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="Sudoku Web Application - AWS Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;fontColor=#232F3E;" vertex="1" parent="1">
          <mxGeometry x="350" y="30" width="470" height="30" as="geometry" />
        </mxCell>

        <!-- User/Internet -->
        <mxCell id="user" value="Users" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#232F3D;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.users;" vertex="1" parent="1">
          <mxGeometry x="100" y="200" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- Internet -->
        <mxCell id="internet" value="Internet" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#4D72F3;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.internet_gateway;" vertex="1" parent="1">
          <mxGeometry x="280" y="200" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- CloudFront -->
        <mxCell id="cloudfront" value="CloudFront&#xa;Distribution" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#8C4FFF;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.cloudfront;" vertex="1" parent="1">
          <mxGeometry x="480" y="200" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- S3 Bucket -->
        <mxCell id="s3bucket" value="S3 Bucket&#xa;(Private)" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#7AA116;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.s3;" vertex="1" parent="1">
          <mxGeometry x="720" y="200" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- Origin Access Control -->
        <mxCell id="oac" value="Origin Access&#xa;Control (OAC)" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#FF9900;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.security_identity_and_compliance;" vertex="1" parent="1">
          <mxGeometry x="600" y="320" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- Files in S3 -->
        <mxCell id="files" value="sudoku.html&#xa;README.md" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#7AA116;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.document;" vertex="1" parent="1">
          <mxGeometry x="850" y="200" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- Terraform -->
        <mxCell id="terraform" value="Terraform&#xa;Infrastructure as Code" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#623CE4;strokeColor=none;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;pointerEvents=1;shape=mxgraph.aws4.generic_saml_token;" vertex="1" parent="1">
          <mxGeometry x="480" y="450" width="78" height="78" as="geometry" />
        </mxCell>

        <!-- AWS Cloud boundary -->
        <mxCell id="aws-cloud" value="AWS Cloud" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;" vertex="1" parent="1">
          <mxGeometry x="440" y="150" width="520" height="200" as="geometry" />
        </mxCell>

        <!-- Connections -->
        <!-- User to Internet -->
        <mxCell id="conn1" value="HTTPS Request" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;fontColor=#232F3E;" edge="1" parent="1" source="user" target="internet">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="200" y="250" as="sourcePoint" />
            <mxPoint x="250" y="200" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <!-- Internet to CloudFront -->
        <mxCell id="conn2" value="Global CDN" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;fontColor=#232F3E;" edge="1" parent="1" source="internet" target="cloudfront">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="380" y="250" as="sourcePoint" />
            <mxPoint x="430" y="200" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <!-- CloudFront to S3 -->
        <mxCell id="conn3" value="Secure Access&#xa;via OAC" style="endArrow=classic;html=1;rounded=0;strokeColor=#232F3E;fontColor=#232F3E;" edge="1" parent="1" source="cloudfront" target="s3bucket">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="580" y="250" as="sourcePoint" />
            <mxPoint x="630" y="200" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <!-- S3 to Files -->
        <mxCell id="conn4" value="Contains" style="endArrow=classic;html=1;rounded=0;strokeColor=#7AA116;fontColor=#232F3E;dashed=1;" edge="1" parent="1" source="s3bucket" target="files">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="820" y="250" as="sourcePoint" />
            <mxPoint x="870" y="200" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <!-- OAC connection -->
        <mxCell id="conn5" value="Manages Access" style="endArrow=classic;html=1;rounded=0;strokeColor=#FF9900;fontColor=#232F3E;dashed=1;" edge="1" parent="1" source="oac" target="cloudfront">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="600" y="350" as="sourcePoint" />
            <mxPoint x="520" y="280" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <!-- Terraform manages all -->
        <mxCell id="conn6" value="Provisions &amp; Manages" style="endArrow=classic;html=1;rounded=0;strokeColor=#623CE4;fontColor=#232F3E;dashed=1;" edge="1" parent="1" source="terraform" target="cloudfront">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="520" y="450" as="sourcePoint" />
            <mxPoint x="520" y="280" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <mxCell id="conn7" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#623CE4;fontColor=#232F3E;dashed=1;" edge="1" parent="1" source="terraform" target="s3bucket">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="550" y="450" as="sourcePoint" />
            <mxPoint x="720" y="280" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <mxCell id="conn8" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#623CE4;fontColor=#232F3E;dashed=1;" edge="1" parent="1" source="terraform" target="oac">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="550" y="450" as="sourcePoint" />
            <mxPoint x="630" y="400" as="targetPoint" />
          </mxGeometry>
        </mxCell>

        <!-- Security Features Box -->
        <mxCell id="security-box" value="Security Features:&#xa;• Private S3 Bucket&#xa;• Public Access Blocked&#xa;• Origin Access Control&#xa;• HTTPS Only&#xa;• No Direct S3 Access" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFF2CC;strokeColor=#D6B656;fontColor=#232F3E;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;" vertex="1" parent="1">
          <mxGeometry x="100" y="400" width="200" height="120" as="geometry" />
        </mxCell>

        <!-- Performance Features Box -->
        <mxCell id="performance-box" value="Performance Features:&#xa;• Global CDN&#xa;• Edge Caching&#xa;• Compression&#xa;• HTTP/2 Support&#xa;• IPv6 Enabled" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;fontColor=#232F3E;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;" vertex="1" parent="1">
          <mxGeometry x="100" y="550" width="200" height="120" as="geometry" />
        </mxCell>

        <!-- Infrastructure Details -->
        <mxCell id="infra-details" value="Infrastructure Details:&#xa;• Bucket: sudoku-web-app-bucket-2025-11-18&#xa;• Distribution ID: EDJMME2GM2HVR&#xa;• Domain: dbhl6pueiu1b7.cloudfront.net&#xa;• Region: us-east-1&#xa;• Files: sudoku.html, README.md" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E1D5E7;strokeColor=#9673A6;fontColor=#232F3E;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;" vertex="1" parent="1">
          <mxGeometry x="750" y="400" width="300" height="120" as="geometry" />
        </mxCell>

        <!-- Data Flow Labels -->
        <mxCell id="flow1" value="1" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FF6B6B;strokeColor=none;fontColor=white;fontSize=14;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="210" y="210" width="25" height="25" as="geometry" />
        </mxCell>

        <mxCell id="flow2" value="2" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FF6B6B;strokeColor=none;fontColor=white;fontSize=14;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="390" y="210" width="25" height="25" as="geometry" />
        </mxCell>

        <mxCell id="flow3" value="3" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FF6B6B;strokeColor=none;fontColor=white;fontSize=14;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="590" y="210" width="25" height="25" as="geometry" />
        </mxCell>

        <!-- Legend -->
        <mxCell id="legend" value="Legend:&#xa;🔵 Data Flow&#xa;🟠 Security&#xa;🟣 Management&#xa;🟢 Storage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F8F9FA;strokeColor=#DEE2E6;fontColor=#232F3E;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;" vertex="1" parent="1">
          <mxGeometry x="750" y="550" width="150" height="100" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>