Skip to content

Commit 08828c7

Browse files
SriSatyaLokeshSriSatyaLokesh
committed
templates
1 parent 1817610 commit 08828c7

5 files changed

Lines changed: 991 additions & 0 deletions

File tree

‎skills/draw-io-diagram-generator/templates/architecture.drawio‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<mxfile host="Electron" modified="2026-03-25T00:00:00.000Z" version="26.0.0">
2+
<diagram id="architecture" name="Architecture">
3+
<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
4+
tooltips="1" connect="1" arrows="1" fold="1"
5+
page="1" pageScale="1" pageWidth="1169" pageHeight="827"
6+
math="0" shadow="0">
7+
<root>
8+
<mxCell id="0" />
9+
<mxCell id="1" parent="0" />
10+
11+
<!-- TITLE -->
12+
<mxCell id="2" value="System Architecture"
13+
style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;"
14+
vertex="1" parent="1">
15+
<mxGeometry x="330" y="30" width="500" height="40" as="geometry" />
16+
</mxCell>
17+
18+
<!-- ====== TIER 1: CLIENT LAYER ====== -->
19+
<mxCell id="tier1" value="Client Layer"
20+
style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;fontSize=13;"
21+
vertex="1" parent="1">
22+
<mxGeometry x="60" y="100" width="1050" height="130" as="geometry" />
23+
</mxCell>
24+
25+
<!-- NOTE: Cells id="3" and id="4" use Cisco shape library.
26+
Enable it in VS Code draw.io extension: More Shapes > Networking > Cisco.
27+
If the library is unavailable, replace with:
28+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" -->
29+
<mxCell id="3" value="Web Browser"
30+
style="shape=mxgraph.cisco.computers_and_peripherals.pc;html=1;pointerEvents=1;dashed=0;fillColor=#dae8fc;strokeColor=#6c8ebf;sketch=0;aspect=fixed;"
31+
vertex="1" parent="tier1">
32+
<mxGeometry x="60" y="40" width="100" height="70" as="geometry" />
33+
</mxCell>
34+
35+
<mxCell id="4" value="Mobile App"
36+
style="shape=mxgraph.cisco.computers_and_peripherals.mobile_phone;html=1;pointerEvents=1;dashed=0;fillColor=#dae8fc;strokeColor=#6c8ebf;sketch=0;aspect=fixed;"
37+
vertex="1" parent="tier1">
38+
<mxGeometry x="220" y="40" width="60" height="80" as="geometry" />
39+
</mxCell>
40+
41+
<mxCell id="5" value="Third-party Client"
42+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
43+
vertex="1" parent="tier1">
44+
<mxGeometry x="370" y="50" width="160" height="60" as="geometry" />
45+
</mxCell>
46+
47+
<!-- ====== TIER 2: API GATEWAY ====== -->
48+
<mxCell id="tier2" value="API Gateway / Load Balancer"
49+
style="swimlane;startSize=30;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;fontSize=13;"
50+
vertex="1" parent="1">
51+
<mxGeometry x="60" y="270" width="1050" height="130" as="geometry" />
52+
</mxCell>
53+
54+
<mxCell id="6" value="API Gateway"
55+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
56+
vertex="1" parent="tier2">
57+
<mxGeometry x="200" y="30" width="160" height="60" as="geometry" />
58+
</mxCell>
59+
60+
<mxCell id="7" value="Auth / JWT"
61+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
62+
vertex="1" parent="tier2">
63+
<mxGeometry x="440" y="30" width="160" height="60" as="geometry" />
64+
</mxCell>
65+
66+
<mxCell id="8" value="Rate Limiter"
67+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
68+
vertex="1" parent="tier2">
69+
<mxGeometry x="680" y="30" width="160" height="60" as="geometry" />
70+
</mxCell>
71+
72+
<!-- ====== TIER 3: SERVICES ====== -->
73+
<mxCell id="tier3" value="Services Layer"
74+
style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;fontSize=13;"
75+
vertex="1" parent="1">
76+
<mxGeometry x="60" y="440" width="1050" height="130" as="geometry" />
77+
</mxCell>
78+
79+
<mxCell id="9" value="Order Service"
80+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
81+
vertex="1" parent="tier3">
82+
<mxGeometry x="60" y="30" width="160" height="60" as="geometry" />
83+
</mxCell>
84+
85+
<mxCell id="10" value="User Service"
86+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
87+
vertex="1" parent="tier3">
88+
<mxGeometry x="280" y="30" width="160" height="60" as="geometry" />
89+
</mxCell>
90+
91+
<mxCell id="11" value="Notification Service"
92+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
93+
vertex="1" parent="tier3">
94+
<mxGeometry x="500" y="30" width="160" height="60" as="geometry" />
95+
</mxCell>
96+
97+
<mxCell id="12" value="Billing Service"
98+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
99+
vertex="1" parent="tier3">
100+
<mxGeometry x="720" y="30" width="160" height="60" as="geometry" />
101+
</mxCell>
102+
103+
<!-- ====== TIER 4: DATA LAYER ====== -->
104+
<mxCell id="tier4" value="Data Layer"
105+
style="swimlane;startSize=30;fillColor=#f8cecc;strokeColor=#b85450;fontStyle=1;fontSize=13;"
106+
vertex="1" parent="1">
107+
<mxGeometry x="60" y="610" width="1050" height="130" as="geometry" />
108+
</mxCell>
109+
110+
<mxCell id="13" value="Primary DB&#xa;(PostgreSQL)"
111+
style="shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
112+
vertex="1" parent="tier4">
113+
<mxGeometry x="100" y="20" width="80" height="80" as="geometry" />
114+
</mxCell>
115+
116+
<mxCell id="14" value="Cache&#xa;(Redis)"
117+
style="shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
118+
vertex="1" parent="tier4">
119+
<mxGeometry x="320" y="20" width="80" height="80" as="geometry" />
120+
</mxCell>
121+
122+
<mxCell id="15" value="Message Queue&#xa;(Kafka)"
123+
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
124+
vertex="1" parent="tier4">
125+
<mxGeometry x="540" y="35" width="160" height="60" as="geometry" />
126+
</mxCell>
127+
128+
<mxCell id="16" value="Object Store&#xa;(S3)"
129+
style="shape=mxgraph.flowchart.stored_data;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
130+
vertex="1" parent="tier4">
131+
<mxGeometry x="760" y="25" width="100" height="80" as="geometry" />
132+
</mxCell>
133+
134+
<!-- INTER-TIER CONNECTORS (tier-level, using absolute coords) -->
135+
136+
<!-- Client → API Gateway -->
137+
<mxCell id="c1" value="HTTPS"
138+
style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;"
139+
edge="1" source="tier1" target="tier2" parent="1">
140+
<mxGeometry relative="1" as="geometry" />
141+
</mxCell>
142+
143+
<!-- API Gateway → Services -->
144+
<mxCell id="c2" value="REST / gRPC"
145+
style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;"
146+
edge="1" source="tier2" target="tier3" parent="1">
147+
<mxGeometry relative="1" as="geometry" />
148+
</mxCell>
149+
150+
<!-- Services → Data -->
151+
<mxCell id="c3" value="SQL / Cache / Events"
152+
style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;"
153+
edge="1" source="tier3" target="tier4" parent="1">
154+
<mxGeometry relative="1" as="geometry" />
155+
</mxCell>
156+
157+
</root>
158+
</mxGraphModel>
159+
</diagram>
160+
</mxfile>

0 commit comments

Comments
 (0)