518 lines
27 KiB
HTML
518 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Infrastructure Provisioning System — Architecture</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=DM+Sans:wght@300;400;500;600;700&display=swap');
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: #0a0c10;
|
|
color: #c8ccd4;
|
|
font-family: 'DM Sans', sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.diagram-container {
|
|
width: 1280px;
|
|
height: 900px;
|
|
position: relative;
|
|
}
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Filters & Gradients defined in SVG defs */
|
|
|
|
/* Animations */
|
|
@keyframes flowDash {
|
|
to { stroke-dashoffset: -30; }
|
|
}
|
|
@keyframes flowDashReverse {
|
|
to { stroke-dashoffset: 30; }
|
|
}
|
|
@keyframes pulseGlow {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
@keyframes coreRotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes fadeSlideIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes nodeAppear {
|
|
from { opacity: 0; transform: scale(0.85); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes dotPulse {
|
|
0%, 100% { r: 3; opacity: 0.5; }
|
|
50% { r: 5; opacity: 1; }
|
|
}
|
|
|
|
.flow-blue { animation: flowDash 1.5s linear infinite; }
|
|
.flow-green { animation: flowDash 2s linear infinite; }
|
|
.flow-orange { animation: flowDash 1.8s linear infinite; }
|
|
.flow-red { animation: flowDashReverse 1.6s linear infinite; }
|
|
.pulse { animation: pulseGlow 3s ease-in-out infinite; }
|
|
.core-ring { animation: coreRotate 60s linear infinite; transform-origin: 640px 370px; }
|
|
|
|
.node-group { animation: nodeAppear 0.6s ease-out both; }
|
|
.node-group:nth-child(1) { animation-delay: 0.1s; }
|
|
.node-group:nth-child(2) { animation-delay: 0.2s; }
|
|
.node-group:nth-child(3) { animation-delay: 0.3s; }
|
|
.node-group:nth-child(4) { animation-delay: 0.4s; }
|
|
|
|
.dot-pulse { animation: dotPulse 2s ease-in-out infinite; }
|
|
.dot-pulse-d1 { animation-delay: 0.3s; }
|
|
.dot-pulse-d2 { animation-delay: 0.6s; }
|
|
.dot-pulse-d3 { animation-delay: 0.9s; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="diagram-container">
|
|
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<!-- Glow filters -->
|
|
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
|
</filter>
|
|
<filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
|
|
<feOffset dx="0" dy="0"/>
|
|
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
|
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
|
|
<!-- Gradients -->
|
|
<radialGradient id="core-grad" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#1a1f2e"/>
|
|
<stop offset="70%" stop-color="#12151f"/>
|
|
<stop offset="100%" stop-color="#0d1017"/>
|
|
</radialGradient>
|
|
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
|
<stop offset="0%" stop-color="#111520"/>
|
|
<stop offset="100%" stop-color="#0a0c10"/>
|
|
</radialGradient>
|
|
<linearGradient id="config-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#162a1e"/>
|
|
<stop offset="100%" stop-color="#0f1a14"/>
|
|
</linearGradient>
|
|
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#2a1620"/>
|
|
<stop offset="100%" stop-color="#1a0f14"/>
|
|
</linearGradient>
|
|
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#2a2016"/>
|
|
<stop offset="100%" stop-color="#1a150f"/>
|
|
</linearGradient>
|
|
<linearGradient id="ws-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#16202a"/>
|
|
<stop offset="100%" stop-color="#0f151a"/>
|
|
</linearGradient>
|
|
|
|
<!-- Arrow markers -->
|
|
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
|
|
</marker>
|
|
<marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#34d399"/>
|
|
</marker>
|
|
<marker id="arrow-orange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
|
</marker>
|
|
<marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#ef4444"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
|
|
|
<!-- Subtle grid -->
|
|
<g opacity="0.04">
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
|
</pattern>
|
|
<rect width="1280" height="900" fill="url(#grid)"/>
|
|
</g>
|
|
|
|
<!-- Title -->
|
|
<text x="640" y="42" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans', sans-serif" font-weight="700" font-size="18" letter-spacing="0.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
|
<text x="640" y="62" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="11" letter-spacing="2">TECHNICAL ARCHITECTURE</text>
|
|
<line x1="540" y1="72" x2="740" y2="72" stroke="#1e2230" stroke-width="1"/>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- CORE HUB -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Outer decorative ring (rotating) -->
|
|
<g class="core-ring" opacity="0.15">
|
|
<circle cx="640" cy="370" r="115" fill="none" stroke="#4a9eff" stroke-width="0.5" stroke-dasharray="3 8"/>
|
|
</g>
|
|
|
|
<!-- Core circle background -->
|
|
<circle cx="640" cy="370" r="100" fill="url(#core-grad)" filter="url(#soft-shadow)"/>
|
|
<circle cx="640" cy="370" r="100" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
|
<circle cx="640" cy="370" r="96" fill="none" stroke="#1a1f2e" stroke-width="0.5" stroke-dasharray="2 4"/>
|
|
|
|
<!-- Core hex accent -->
|
|
<g opacity="0.08">
|
|
<polygon points="640,280 692,310 692,430 640,460 588,430 588,310" fill="none" stroke="#4a9eff" stroke-width="0.5"/>
|
|
</g>
|
|
|
|
<!-- Core labels -->
|
|
<text x="640" y="340" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Provisioning</text>
|
|
<text x="640" y="360" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Core</text>
|
|
|
|
<!-- Core sub-items -->
|
|
<g font-family="'IBM Plex Mono', monospace" font-size="10" fill="#6b7a90">
|
|
<rect x="590" y="376" width="38" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
|
<text x="609" y="389" text-anchor="middle" fill="#7d8ba0">CLI</text>
|
|
|
|
<rect x="634" y="376" width="50" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
|
<text x="659" y="389" text-anchor="middle" fill="#7d8ba0">Libs</text>
|
|
|
|
<rect x="596" y="400" width="88" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
|
<text x="640" y="413" text-anchor="middle" fill="#7d8ba0">Plugins</text>
|
|
</g>
|
|
|
|
<!-- Pulsing dots on core ring -->
|
|
<circle cx="640" cy="270" r="3" fill="#4a9eff" class="dot-pulse" opacity="0.6"/>
|
|
<circle cx="740" cy="370" r="3" fill="#34d399" class="dot-pulse dot-pulse-d1" opacity="0.6"/>
|
|
<circle cx="640" cy="470" r="3" fill="#f59e0b" class="dot-pulse dot-pulse-d2" opacity="0.6"/>
|
|
<circle cx="540" cy="370" r="3" fill="#ef4444" class="dot-pulse dot-pulse-d3" opacity="0.6"/>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- CONFIGURATION LAYER (Top) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Connection line core → config -->
|
|
<path d="M 640 270 L 640 190" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
|
|
|
<!-- Green flow path -->
|
|
<path d="M 640 270 L 640 190" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="6 6" class="flow-green" opacity="0.7" marker-end="url(#arrow-green)"/>
|
|
|
|
<g class="node-group">
|
|
<rect x="490" y="98" width="300" height="92" rx="12" fill="url(#config-grad)" filter="url(#soft-shadow)"/>
|
|
<rect x="490" y="98" width="300" height="92" rx="12" fill="none" stroke="#1c3a28" stroke-width="1"/>
|
|
|
|
<!-- Accent bar -->
|
|
<rect x="490" y="98" width="4" height="92" rx="2" fill="#34d399" opacity="0.6"/>
|
|
|
|
<!-- Icon -->
|
|
<circle cx="516" cy="121" r="11" fill="#0f1a14" stroke="#34d399" stroke-width="1" opacity="0.8"/>
|
|
<text x="516" y="125" text-anchor="middle" fill="#34d399" font-size="11">⚙</text>
|
|
|
|
<text x="534" y="125" fill="#c0d8cc" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Configuration Layer</text>
|
|
|
|
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
|
<rect x="506" y="140" width="110" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
|
<text x="561" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Nickel Schemas</text>
|
|
|
|
<rect x="624" y="140" width="148" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
|
<text x="698" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Validation Engine</text>
|
|
|
|
<rect x="506" y="165" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
|
<text x="546" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Type check</text>
|
|
|
|
<rect x="594" y="165" width="90" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
|
<text x="639" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Constraints</text>
|
|
|
|
<rect x="692" y="165" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
|
<text x="732" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Merge</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Green status label -->
|
|
<rect x="618" y="212" width="44" height="16" rx="8" fill="#34d399" opacity="0.12"/>
|
|
<text x="640" y="224" text-anchor="middle" fill="#34d399" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">VALID</text>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- EXTENSION ECOSYSTEM (Right) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Connection line core → extensions -->
|
|
<path d="M 740 370 L 840 370" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
|
|
|
<!-- Red flow path -->
|
|
<path d="M 740 370 L 840 370" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 6" class="flow-red" opacity="0.7" marker-end="url(#arrow-red)"/>
|
|
|
|
<g class="node-group">
|
|
<rect x="860" y="270" width="290" height="200" rx="12" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
|
<rect x="860" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
|
|
|
<!-- Accent bar -->
|
|
<rect x="1146" y="270" width="4" height="200" rx="2" fill="#ef4444" opacity="0.5"/>
|
|
|
|
<!-- Icon -->
|
|
<circle cx="886" cy="297" r="11" fill="#1a0f14" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
|
<text x="886" y="301" text-anchor="middle" fill="#ef4444" font-size="11">◆</text>
|
|
|
|
<text x="904" y="301" fill="#d8c0c8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Extension Ecosystem</text>
|
|
|
|
<!-- Provider plugin cards -->
|
|
<g font-family="'IBM Plex Mono', monospace">
|
|
<!-- AWS -->
|
|
<rect x="878" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
|
<text x="937" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">AWS</text>
|
|
<text x="937" y="354" text-anchor="middle" fill="#6b5060" font-size="9">EC2 · S3 · RDS</text>
|
|
<text x="937" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Lambda · VPC</text>
|
|
|
|
<!-- Hetzner -->
|
|
<rect x="1006" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
|
<text x="1065" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Hetzner</text>
|
|
<text x="1065" y="354" text-anchor="middle" fill="#6b5060" font-size="9">VM · Blob · SQL</text>
|
|
<text x="1065" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Functions · VNet</text>
|
|
|
|
<!-- Kubernetes -->
|
|
<rect x="878" y="386" width="246" height="42" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
|
<text x="1001" y="406" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Kubernetes</text>
|
|
<text x="1001" y="420" text-anchor="middle" fill="#6b5060" font-size="9">Deployments · Services · ConfigMaps · Ingress</text>
|
|
|
|
<!-- Registry badge -->
|
|
<rect x="878" y="438" width="246" height="20" rx="5" fill="none" stroke="#2a1620" stroke-width="0.6"/>
|
|
<text x="1001" y="452" text-anchor="middle" fill="#5a3848" font-size="9">Plugin Registry · Provider SDK · Custom Providers</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Red endpoints dots -->
|
|
<circle cx="1170" cy="340" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
|
<circle cx="1180" cy="370" r="4" fill="#ef4444" opacity="0.2"/>
|
|
<circle cx="1170" cy="400" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
|
|
|
<!-- Output label -->
|
|
<text x="1206" y="374" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" opacity="0.6" letter-spacing="0.5">OUTPUT</text>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- ORCHESTRATION ENGINE (Left) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Connection line core → orchestration -->
|
|
<path d="M 540 370 L 420 370" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
|
|
|
<!-- Orange flow path -->
|
|
<path d="M 540 370 L 420 370" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="6 6" class="flow-orange" opacity="0.7" marker-end="url(#arrow-orange)"/>
|
|
|
|
<g class="node-group">
|
|
<rect x="120" y="270" width="290" height="200" rx="12" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
|
<rect x="120" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
|
|
|
<!-- Accent bar -->
|
|
<rect x="120" y="270" width="4" height="200" rx="2" fill="#f59e0b" opacity="0.5"/>
|
|
|
|
<!-- Icon -->
|
|
<circle cx="150" cy="297" r="11" fill="#1a150f" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
|
<text x="150" y="301" text-anchor="middle" fill="#f59e0b" font-size="11">▶</text>
|
|
|
|
<text x="168" y="301" fill="#d8ccc0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Orchestration Engine</text>
|
|
|
|
<g font-family="'IBM Plex Mono', monospace">
|
|
<!-- Batch Workflows -->
|
|
<rect x="138" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
|
<text x="198" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Batch Workflows</text>
|
|
<text x="198" y="352" text-anchor="middle" fill="#6b6050" font-size="9">DAG · Parallel</text>
|
|
|
|
<!-- Execution -->
|
|
<rect x="268" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
|
<text x="328" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Execution</text>
|
|
<text x="328" y="352" text-anchor="middle" fill="#6b6050" font-size="9">Plan · Apply</text>
|
|
|
|
<!-- State Management -->
|
|
<rect x="138" y="370" width="250" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
|
<text x="263" y="390" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">State Management</text>
|
|
<text x="263" y="404" text-anchor="middle" fill="#6b6050" font-size="9">Locking · Drift Detection · Rollback</text>
|
|
|
|
<!-- Pipeline status -->
|
|
<g opacity="0.6">
|
|
<rect x="138" y="422" width="250" height="22" rx="5" fill="none" stroke="#2a2016" stroke-width="0.6"/>
|
|
<!-- Pipeline dots -->
|
|
<circle cx="172" cy="433" r="4" fill="#f59e0b" opacity="0.9"/>
|
|
<line x1="176" y1="433" x2="208" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
|
<circle cx="212" cy="433" r="4" fill="#f59e0b" opacity="0.7"/>
|
|
<line x1="216" y1="433" x2="248" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
|
<circle cx="252" cy="433" r="4" fill="#f59e0b" opacity="0.5"/>
|
|
<line x1="256" y1="433" x2="288" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
|
<circle cx="292" cy="433" r="4" fill="#f59e0b" opacity="0.3"/>
|
|
<line x1="296" y1="433" x2="328" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
|
<circle cx="332" cy="433" r="4" fill="#34d399" opacity="0.8"/>
|
|
<text x="354" y="437" fill="#5a5040" font-size="8">done</text>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- USER INPUT (Top-Left) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Blue arrow: user input → CLI → Core -->
|
|
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
|
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.8" marker-end="url(#arrow-blue)"/>
|
|
|
|
<!-- User input node -->
|
|
<g>
|
|
<rect x="120" y="106" width="140" height="42" rx="10" fill="#0f1520" stroke="#1c2a3a" stroke-width="1" filter="url(#soft-shadow)"/>
|
|
<rect x="120" y="106" width="3" height="42" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
|
|
|
<text x="147" y="124" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="9" font-weight="600" letter-spacing="0.5" opacity="0.7">USER INPUT</text>
|
|
<text x="147" y="140" fill="#8aa4c0" font-family="'IBM Plex Mono', monospace" font-size="10">$ provision deploy</text>
|
|
</g>
|
|
|
|
<!-- Blue flow label -->
|
|
<rect x="356" y="179" width="64" height="16" rx="8" fill="#4a9eff" opacity="0.1"/>
|
|
<text x="388" y="191" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="500" opacity="0.7">CLI →</text>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- WORKSPACE RUNTIME (Bottom) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Connection line core → workspace -->
|
|
<path d="M 640 470 L 640 540" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
|
<path d="M 640 470 L 640 540" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.5" marker-end="url(#arrow-blue)"/>
|
|
|
|
<g class="node-group">
|
|
<rect x="370" y="550" width="540" height="90" rx="12" fill="url(#ws-grad)" filter="url(#soft-shadow)"/>
|
|
<rect x="370" y="550" width="540" height="90" rx="12" fill="none" stroke="#1c283a" stroke-width="1"/>
|
|
|
|
<!-- Accent bar bottom -->
|
|
<rect x="370" y="636" width="540" height="4" rx="2" fill="#4a9eff" opacity="0.3"/>
|
|
|
|
<!-- Icon -->
|
|
<circle cx="396" cy="577" r="11" fill="#0f151a" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
|
<text x="396" y="581" text-anchor="middle" fill="#4a9eff" font-size="11">⬡</text>
|
|
|
|
<text x="414" y="581" fill="#c0c8d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Workspace Runtime</text>
|
|
|
|
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
|
<rect x="388" y="598" width="134" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
|
<text x="455" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Context Mgmt</text>
|
|
|
|
<rect x="530" y="598" width="172" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
|
<text x="616" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Multi-Environment</text>
|
|
|
|
<rect x="710" y="598" width="178" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
|
<text x="799" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Isolation Boundary</text>
|
|
</g>
|
|
</g>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- DEPLOYMENT TARGETS (Bottom Row) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Vertical connectors from workspace to targets -->
|
|
<line x1="420" y1="640" x2="260" y2="720" stroke="#1e2535" stroke-width="1"/>
|
|
<line x1="420" y1="640" x2="260" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
|
|
|
<line x1="570" y1="640" x2="490" y2="720" stroke="#1e2535" stroke-width="1"/>
|
|
<line x1="570" y1="640" x2="490" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
|
|
|
<line x1="700" y1="640" x2="720" y2="720" stroke="#1e2535" stroke-width="1"/>
|
|
<line x1="700" y1="640" x2="720" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
|
|
|
<line x1="830" y1="640" x2="950" y2="720" stroke="#1e2535" stroke-width="1"/>
|
|
<line x1="830" y1="640" x2="950" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
|
|
|
<!-- Target nodes -->
|
|
<g font-family="'IBM Plex Mono', monospace">
|
|
<!-- Production -->
|
|
<rect x="178" y="720" width="160" height="54" rx="10" fill="#120f0f" stroke="#3a1c1c" stroke-width="1"/>
|
|
<circle cx="200" cy="740" r="5" fill="#ef4444" opacity="0.8"/>
|
|
<text x="214" y="744" fill="#d0a0a0" font-size="11" font-weight="500">Production</text>
|
|
<text x="200" y="762" fill="#5a3838" font-size="9">us-east-1 · 3 replicas</text>
|
|
|
|
<!-- Staging -->
|
|
<rect x="408" y="720" width="160" height="54" rx="10" fill="#12100f" stroke="#3a2e1c" stroke-width="1"/>
|
|
<circle cx="430" cy="740" r="5" fill="#f59e0b" opacity="0.8"/>
|
|
<text x="444" y="744" fill="#d0c0a0" font-size="11" font-weight="500">Staging</text>
|
|
<text x="430" y="762" fill="#5a5038" font-size="9">eu-west-1 · 1 replica</text>
|
|
|
|
<!-- Dev / K8s -->
|
|
<rect x="638" y="720" width="160" height="54" rx="10" fill="#0f1210" stroke="#1c3a28" stroke-width="1"/>
|
|
<circle cx="660" cy="740" r="5" fill="#34d399" opacity="0.8"/>
|
|
<text x="674" y="744" fill="#a0d0b8" font-size="11" font-weight="500">Dev Cluster</text>
|
|
<text x="660" y="762" fill="#385a48" font-size="9">k8s · minikube</text>
|
|
|
|
<!-- Edge / Custom -->
|
|
<rect x="868" y="720" width="160" height="54" rx="10" fill="#0f1015" stroke="#1c1c3a" stroke-width="1"/>
|
|
<circle cx="890" cy="740" r="5" fill="#818cf8" opacity="0.8"/>
|
|
<text x="904" y="744" fill="#b0b0d8" font-size="11" font-weight="500">Edge / Custom</text>
|
|
<text x="890" y="762" fill="#48486a" font-size="9">IoT · on-prem</text>
|
|
</g>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- LEGEND -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<g transform="translate(44, 720)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
|
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">DATA FLOWS</text>
|
|
|
|
<line x1="0" y1="14" x2="24" y2="14" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
|
<text x="30" y="18" fill="#4a6a8a">User input</text>
|
|
|
|
<line x1="0" y1="30" x2="24" y2="30" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4 3"/>
|
|
<text x="30" y="34" fill="#4a7a5a">Config validation</text>
|
|
|
|
<line x1="0" y1="46" x2="24" y2="46" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4 3"/>
|
|
<text x="30" y="50" fill="#7a6a3a">Task orchestration</text>
|
|
|
|
<line x1="0" y1="62" x2="24" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
|
|
<text x="30" y="66" fill="#7a3a3a">Cloud output</text>
|
|
</g>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- CROSS-CONNECTIONS (subtle) -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
|
|
<!-- Config → Orchestration (dotted) -->
|
|
<path d="M 490 170 C 400 170, 350 250, 350 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.5"/>
|
|
|
|
<!-- Orchestration → Extensions (through core) -->
|
|
<path d="M 410 400 C 450 450, 500 490, 640 490 C 780 490, 820 440, 860 410" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
|
|
|
<!-- Config → Extensions (through core) -->
|
|
<path d="M 790 160 C 860 160, 920 220, 940 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- VERSION BADGE -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<text x="1236" y="880" text-anchor="end" fill="#2a2e38" font-family="'IBM Plex Mono', monospace" font-size="8" letter-spacing="0.5">v2.4.0 · Architecture</text>
|
|
|
|
</svg>
|
|
</div>
|
|
</body>
|
|
</html>
|