Skip to content

Instantly share code, notes, and snippets.

@lassebenni

lassebenni/deployment_flow_visual.html

Created March 10, 2026 22:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lassebenni/ef9618006a8b2e21e1e63655a05845f1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lassebenni/ef9618006a8b2e21e1e63655a05845f1 to your computer and use it in GitHub Desktop.
Download ZIP
Visual for: End-to-end deployment flow
Raw
deployment_flow_visual.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>End-to-End Deployment Flow</title>
<style>
body {
margin: 0;
padding: 20px;
background: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
svg {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 700 350" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif">
<!-- Background -->
<rect width="700" height="350" rx="12" fill="#1a1a2e"/>
<!-- Title -->
<text x="350" y="35" text-anchor="middle" fill="#e0e0e0" font-size="18" font-weight="bold">End-to-End Deployment Flow</text>
<!-- === Main flow: ACR → Container App Job → Postgres === -->
<!-- ACR Box -->
<rect x="30" y="110" width="140" height="80" rx="8" fill="#1565c0" opacity="0.2" stroke="#64b5f6" stroke-width="1.5"/>
<text x="100" y="140" text-anchor="middle" fill="#64b5f6" font-size="13" font-weight="bold">ACR</text>
<text x="100" y="158" text-anchor="middle" fill="#90caf9" font-size="10">Container Registry</text>
<text x="100" y="175" text-anchor="middle" fill="#64b5f6" font-size="9" font-style="italic">weather-pipeline:1.0</text>
<!-- Arrow ACR → Job -->
<line x1="170" y1="150" x2="230" y2="150" stroke="#64b5f6" stroke-width="2"/>
<polygon points="233,150 225,145 225,155" fill="#64b5f6"/>
<text x="200" y="140" text-anchor="middle" fill="#64b5f6" font-size="9">pull image</text>
<!-- Container App Job Box -->
<rect x="235" y="95" width="200" height="110" rx="8" fill="#e65100" opacity="0.15" stroke="#ffb74d" stroke-width="1.5"/>
<text x="335" y="122" text-anchor="middle" fill="#ffb74d" font-size="13" font-weight="bold">Container App Job</text>
<text x="335" y="140" text-anchor="middle" fill="#ffcc80" font-size="10">weather-job</text>
<!-- Pipeline steps inside -->
<rect x="255" y="152" width="55" height="28" rx="4" fill="#e65100" opacity="0.3" stroke="#ffb74d" stroke-width="1"/>
<text x="282" y="170" text-anchor="middle" fill="#ffb74d" font-size="9">Extract</text>
<line x1="310" y1="166" x2="320" y2="166" stroke="#ffb74d" stroke-width="1"/>
<polygon points="322,166 318,163 318,169" fill="#ffb74d"/>
<rect x="323" y="152" width="55" height="28" rx="4" fill="#e65100" opacity="0.3" stroke="#ffb74d" stroke-width="1"/>
<text x="350" y="170" text-anchor="middle" fill="#ffb74d" font-size="9">Validate</text>
<line x1="378" y1="166" x2="388" y2="166" stroke="#ffb74d" stroke-width="1"/>
<polygon points="390,166 386,163 386,169" fill="#ffb74d"/>
<rect x="391" y="152" width="35" height="28" rx="4" fill="#e65100" opacity="0.3" stroke="#ffb74d" stroke-width="1"/>
<text x="408" y="170" text-anchor="middle" fill="#ffb74d" font-size="9">Load</text>
<!-- Arrow Job → Postgres -->
<line x1="435" y1="150" x2="495" y2="150" stroke="#81c784" stroke-width="2"/>
<polygon points="498,150 490,145 490,155" fill="#81c784"/>
<text x="465" y="140" text-anchor="middle" fill="#81c784" font-size="9">INSERT</text>
<!-- Postgres Box -->
<rect x="500" y="110" width="165" height="80" rx="8" fill="#2e7d32" opacity="0.2" stroke="#81c784" stroke-width="1.5"/>
<!-- DB icon: cylinder shape -->
<ellipse cx="582" cy="135" rx="25" ry="8" fill="none" stroke="#81c784" stroke-width="1.2"/>
<line x1="557" y1="135" x2="557" y2="163" stroke="#81c784" stroke-width="1.2"/>
<line x1="607" y1="135" x2="607" y2="163" stroke="#81c784" stroke-width="1.2"/>
<ellipse cx="582" cy="163" rx="25" ry="8" fill="none" stroke="#81c784" stroke-width="1.2"/>
<text x="582" y="152" text-anchor="middle" fill="#81c784" font-size="10" font-weight="bold">Postgres</text>
<text x="582" y="185" text-anchor="middle" fill="#a5d6a7" font-size="9">weather database</text>
<!-- === Environment Variables feeding into Job === -->
<rect x="235" y="250" width="200" height="65" rx="6" fill="#4a148c" opacity="0.2" stroke="#ce93d8" stroke-width="1"/>
<text x="335" y="272" text-anchor="middle" fill="#ce93d8" font-size="11" font-weight="bold">Environment Variables</text>
<text x="335" y="290" text-anchor="middle" fill="#e1bee7" font-size="9">POSTGRES_URL=postgresql://...</text>
<text x="335" y="304" text-anchor="middle" fill="#e1bee7" font-size="9">LOG_LEVEL=INFO</text>
<!-- Arrow env vars → Job -->
<line x1="335" y1="250" x2="335" y2="210" stroke="#ce93d8" stroke-width="1.5" stroke-dasharray="5,3"/>
<polygon points="335,207 331,214 339,214" fill="#ce93d8"/>
<text x="360" y="234" fill="#ce93d8" font-size="9">injected at runtime</text>
<!-- Week 5 reference -->
<text x="100" y="210" text-anchor="middle" fill="#555" font-size="9">Built in Week 5</text>
<line x1="100" y1="190" x2="100" y2="200" stroke="#555" stroke-width="1"/>
<!-- Legend -->
<g transform="translate(130, 335)">
<rect x="0" y="0" width="10" height="10" rx="2" fill="#1565c0" opacity="0.4"/>
<text x="15" y="9" fill="#888" font-size="9">Registry</text>
<rect x="80" y="0" width="10" height="10" rx="2" fill="#e65100" opacity="0.4"/>
<text x="95" y="9" fill="#888" font-size="9">Compute</text>
<rect x="160" y="0" width="10" height="10" rx="2" fill="#2e7d32" opacity="0.4"/>
<text x="175" y="9" fill="#888" font-size="9">Storage</text>
<rect x="240" y="0" width="10" height="10" rx="2" fill="#4a148c" opacity="0.4"/>
<text x="255" y="9" fill="#888" font-size="9">Configuration</text>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment