156 أسطر
9.8 KiB
XML
156 أسطر
9.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" font-family="Segoe UI, Arial, sans-serif">
|
||
<defs>
|
||
<linearGradient id="bg4" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||
</linearGradient>
|
||
<linearGradient id="greenG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#22c55e"/>
|
||
<stop offset="100%" style="stop-color:#16a34a"/>
|
||
</linearGradient>
|
||
<linearGradient id="blueG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#3b82f6"/>
|
||
<stop offset="100%" style="stop-color:#2563eb"/>
|
||
</linearGradient>
|
||
<linearGradient id="purpleG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#a855f7"/>
|
||
<stop offset="100%" style="stop-color:#9333ea"/>
|
||
</linearGradient>
|
||
<linearGradient id="orangeG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#f97316"/>
|
||
<stop offset="100%" style="stop-color:#ea580c"/>
|
||
</linearGradient>
|
||
<filter id="sh4" x="-10%" y="-10%" width="120%" height="130%">
|
||
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
||
</filter>
|
||
</defs>
|
||
|
||
<!-- Background -->
|
||
<rect width="900" height="600" fill="url(#bg4)" rx="12"/>
|
||
|
||
<!-- Title -->
|
||
<text x="450" y="42" text-anchor="middle" fill="#e2e8f0" font-size="20" font-weight="700">Q4: Scalability Architecture — 15,000 req/s</text>
|
||
<text x="450" y="65" text-anchor="middle" fill="#94a3b8" font-size="12">39 Containers × 500 req/s each (30% safety margin)</text>
|
||
|
||
<!-- Users -->
|
||
<circle cx="80" cy="300" r="38" fill="#334155" stroke="#475569" stroke-width="2" filter="url(#sh4)"/>
|
||
<text x="80" y="293" text-anchor="middle" fill="#e2e8f0" font-size="12" font-weight="700">Users</text>
|
||
<text x="80" y="312" text-anchor="middle" fill="#94a3b8" font-size="9">15K req/s</text>
|
||
|
||
<!-- CDN -->
|
||
<rect x="155" y="255" width="100" height="90" rx="10" fill="url(#orangeG)" filter="url(#sh4)"/>
|
||
<text x="205" y="285" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">CDN</text>
|
||
<text x="205" y="303" text-anchor="middle" fill="#fed7aa" font-size="9">Cache Layer</text>
|
||
<text x="205" y="320" text-anchor="middle" fill="#fed7aa" font-size="8">Static Assets</text>
|
||
|
||
<!-- Arrow: Users to CDN -->
|
||
<line x1="118" y1="300" x2="155" y2="300" stroke="#475569" stroke-width="2" marker-end="url(#arr4)"/>
|
||
<defs><marker id="arr4" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#475569"/></marker></defs>
|
||
|
||
<!-- Arrow: CDN to LB -->
|
||
<line x1="255" y1="300" x2="310" y2="300" stroke="#475569" stroke-width="2" marker-end="url(#arr4)"/>
|
||
|
||
<!-- Load Balancer -->
|
||
<rect x="315" y="245" width="130" height="110" rx="12" fill="url(#blueG)" filter="url(#sh4)"/>
|
||
<text x="380" y="275" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">Load Balancer</text>
|
||
<text x="380" y="295" text-anchor="middle" fill="#bfdbfe" font-size="9">Ghaymah LB</text>
|
||
<text x="380" y="315" text-anchor="middle" fill="#bfdbfe" font-size="8">Round Robin</text>
|
||
<text x="380" y="332" text-anchor="middle" fill="#bfdbfe" font-size="8">Health Checks</text>
|
||
|
||
<!-- Container Pool -->
|
||
<rect x="485" y="120" width="380" height="340" rx="14" fill="#1e293b" stroke="#22c55e" stroke-width="2" filter="url(#sh4)"/>
|
||
<text x="675" y="148" text-anchor="middle" fill="#22c55e" font-size="13" font-weight="700">Container Pool — 39 Containers</text>
|
||
<line x1="500" y1="160" x2="850" y2="160" stroke="#334155" stroke-width="1"/>
|
||
|
||
<!-- Container rows -->
|
||
<!-- Row 1 -->
|
||
<g>
|
||
<rect x="500" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="532" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 1</text>
|
||
<rect x="575" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="607" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 2</text>
|
||
<rect x="650" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="682" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 3</text>
|
||
<rect x="725" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="757" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 4</text>
|
||
<rect x="800" y="175" width="55" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="827" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Cont. 5</text>
|
||
</g>
|
||
|
||
<!-- Row 2 -->
|
||
<g>
|
||
<rect x="500" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="532" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 6</text>
|
||
<rect x="575" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="607" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 7</text>
|
||
<rect x="650" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="682" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 8</text>
|
||
<rect x="725" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="757" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 9</text>
|
||
<rect x="800" y="215" width="55" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||
<text x="827" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Cont. 10</text>
|
||
</g>
|
||
|
||
<!-- Dots to represent more containers -->
|
||
<text x="675" y="275" text-anchor="middle" fill="#4ade80" font-size="22">. . .</text>
|
||
<text x="675" y="295" text-anchor="middle" fill="#94a3b8" font-size="10">39 total (500 req/s each)</text>
|
||
|
||
<!-- Warm containers label -->
|
||
<rect x="500" y="310" width="165" height="50" rx="8" fill="#0f172a" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||
<text x="582" y="330" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">Warm Pool: 2-3 Containers</text>
|
||
<text x="582" y="348" text-anchor="middle" fill="#94a3b8" font-size="8">Ready for cold start traffic</text>
|
||
|
||
<!-- Auto-scaling -->
|
||
<rect x="680" y="310" width="180" height="50" rx="8" fill="#0f172a" stroke="#eab308" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||
<text x="770" y="330" text-anchor="middle" fill="#eab308" font-size="9" font-weight="600">Auto-Scaling: >70% CPU</text>
|
||
<text x="770" y="348" text-anchor="middle" fill="#94a3b8" font-size="8">Spin up new containers</text>
|
||
|
||
<!-- Container spec -->
|
||
<rect x="500" y="380" width="350" height="70" rx="8" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||
<text x="675" y="400" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">Each Container</text>
|
||
<text x="590" y="420" fill="#94a3b8" font-size="9">Node.js + Express</text>
|
||
<text x="730" y="420" fill="#94a3b8" font-size="9">500 req/s capacity</text>
|
||
<text x="590" y="440" fill="#94a3b8" font-size="9">Stateless</text>
|
||
<text x="730" y="440" fill="#94a3b8" font-size="9">Health: /health</text>
|
||
|
||
<!-- Arrow: LB to Container Pool -->
|
||
<line x1="445" y1="300" x2="485" y2="300" stroke="#22c55e" stroke-width="2" marker-end="url(#arrGreen)"/>
|
||
<defs><marker id="arrGreen" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#22c55e"/></marker></defs>
|
||
|
||
<!-- Block Storage -->
|
||
<rect x="485" y="475" width="180" height="55" rx="10" fill="url(#purpleG)" filter="url(#sh4)"/>
|
||
<text x="575" y="498" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Block Storage</text>
|
||
<text x="575" y="516" text-anchor="middle" fill="#ddd6fe" font-size="9">PostgreSQL / MongoDB</text>
|
||
|
||
<!-- Arrow: Containers to Block Storage -->
|
||
<line x1="575" y1="450" x2="575" y2="475" stroke="#a855f7" stroke-width="2" marker-end="url(#arrPurple)"/>
|
||
<defs><marker id="arrPurple" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#a855f7"/></marker></defs>
|
||
|
||
<!-- Monitoring -->
|
||
<rect x="700" y="475" width="165" height="55" rx="10" fill="url(#orangeG)" filter="url(#sh4)"/>
|
||
<text x="782" y="498" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Monitoring</text>
|
||
<text x="782" y="516" text-anchor="middle" fill="#fed7aa" font-size="9">Prometheus + Grafana</text>
|
||
|
||
<!-- Arrow: Containers to Monitoring -->
|
||
<line x1="782" y1="460" x2="782" y2="475" stroke="#f97316" stroke-width="2" marker-end="url(#arrOrange)"/>
|
||
<defs><marker id="arrOrange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#f97316"/></marker></defs>
|
||
|
||
<!-- Ghaymah Cloud boundary -->
|
||
<rect x="140" y="95" width="730" height="460" rx="16" fill="none" stroke="#334155" stroke-width="1.5" stroke-dasharray="8,6"/>
|
||
<text x="500" y="115" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">ghaymah.systems</text>
|
||
|
||
<!-- Legend -->
|
||
<rect x="20" y="555" width="860" height="35" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||
<circle cx="50" cy="573" r="5" fill="#f97316"/>
|
||
<text x="62" y="577" fill="#94a3b8" font-size="9">CDN</text>
|
||
<circle cx="110" cy="573" r="5" fill="#3b82f6"/>
|
||
<text x="122" y="577" fill="#94a3b8" font-size="9">Load Balancer</text>
|
||
<circle cx="220" cy="573" r="5" fill="#22c55e"/>
|
||
<text x="232" y="577" fill="#94a3b8" font-size="9">Containers (39×)</text>
|
||
<circle cx="350" cy="573" r="5" fill="#a855f7"/>
|
||
<text x="362" y="577" fill="#94a3b8" font-size="9">Block Storage</text>
|
||
<circle cx="470" cy="573" r="5" fill="#eab308"/>
|
||
<text x="482" y="577" fill="#94a3b8" font-size="9">Auto-Scaling</text>
|
||
<text x="650" y="577" fill="#64748b" font-size="9">15,000 req/s ÷ 500 req/s = 30 + 30% = 39 containers</text>
|
||
</svg>
|
