Created
March 10, 2026 22:31
-
-
Save lassebenni/56ed57968915b122f5cb5ccc9a16f5e2 to your computer and use it in GitHub Desktop.
Visual for: CI pipeline flow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CI Pipeline 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', sans-serif; | |
| } | |
| svg { | |
| max-width: 800px; | |
| width: 100%; | |
| height: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 750 380" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" | |
| markerWidth="6" markerHeight="6" orient="auto-start-reverse"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#8892b0"/> | |
| </marker> | |
| <marker id="arr-green" viewBox="0 0 10 10" refX="9" refY="5" | |
| markerWidth="6" markerHeight="6" orient="auto-start-reverse"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#64ffda"/> | |
| </marker> | |
| <marker id="arr-red" viewBox="0 0 10 10" refX="9" refY="5" | |
| markerWidth="6" markerHeight="6" orient="auto-start-reverse"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#ff6b6b"/> | |
| </marker> | |
| </defs> | |
| <!-- Title --> | |
| <text x="375" y="30" text-anchor="middle" fill="#ccd6f6" font-size="18" font-weight="bold">GitHub Actions CI Pipeline for a Python Data Project</text> | |
| <!-- Step 1: Push --> | |
| <rect x="30" y="70" width="110" height="55" rx="8" fill="#1e3a5f" stroke="#7f8dbd" stroke-width="1.5"/> | |
| <text x="85" y="93" text-anchor="middle" fill="#ccd6f6" font-size="12" font-weight="bold">git push</text> | |
| <text x="85" y="110" text-anchor="middle" fill="#8892b0" font-size="10">trigger</text> | |
| <!-- Arrow 1→2 --> | |
| <line x1="140" y1="97" x2="170" y2="97" stroke="#8892b0" stroke-width="1.5" marker-end="url(#arr)"/> | |
| <!-- Step 2: Lint/Format --> | |
| <rect x="175" y="70" width="120" height="55" rx="8" fill="#1e3a5f" stroke="#e2b93d" stroke-width="1.5"/> | |
| <text x="235" y="93" text-anchor="middle" fill="#e2b93d" font-size="12" font-weight="bold">Lint & Format</text> | |
| <text x="235" y="110" text-anchor="middle" fill="#8892b0" font-size="10">ruff check / format</text> | |
| <!-- Arrow 2→3 --> | |
| <line x1="295" y1="97" x2="325" y2="97" stroke="#8892b0" stroke-width="1.5" marker-end="url(#arr)"/> | |
| <!-- Step 3: Tests --> | |
| <rect x="330" y="70" width="110" height="55" rx="8" fill="#1e3a5f" stroke="#7fb3ff" stroke-width="1.5"/> | |
| <text x="385" y="93" text-anchor="middle" fill="#7fb3ff" font-size="12" font-weight="bold">Tests</text> | |
| <text x="385" y="110" text-anchor="middle" fill="#8892b0" font-size="10">pytest</text> | |
| <!-- Arrow 3→4 --> | |
| <line x1="440" y1="97" x2="470" y2="97" stroke="#8892b0" stroke-width="1.5" marker-end="url(#arr)"/> | |
| <!-- Step 4: Docker Build --> | |
| <rect x="475" y="70" width="120" height="55" rx="8" fill="#1e3a5f" stroke="#c792ea" stroke-width="1.5"/> | |
| <text x="535" y="93" text-anchor="middle" fill="#c792ea" font-size="12" font-weight="bold">Docker Build</text> | |
| <text x="535" y="110" text-anchor="middle" fill="#8892b0" font-size="10">docker build</text> | |
| <!-- Arrow 4→5 --> | |
| <line x1="595" y1="97" x2="625" y2="97" stroke="#8892b0" stroke-width="1.5" marker-end="url(#arr)"/> | |
| <!-- Step 5: Push to ACR --> | |
| <rect x="630" y="70" width="105" height="55" rx="8" fill="#1e3a5f" stroke="#64ffda" stroke-width="1.5"/> | |
| <text x="682" y="93" text-anchor="middle" fill="#64ffda" font-size="12" font-weight="bold">Push ACR</text> | |
| <text x="682" y="110" text-anchor="middle" fill="#8892b0" font-size="10">docker push</text> | |
| <!-- PASS path from Push ACR --> | |
| <line x1="682" y1="125" x2="682" y2="175" stroke="#64ffda" stroke-width="1.5" marker-end="url(#arr-green)"/> | |
| <rect x="627" y="180" width="110" height="40" rx="6" fill="#0d3320" stroke="#64ffda" stroke-width="1.5"/> | |
| <text x="682" y="205" text-anchor="middle" fill="#64ffda" font-size="13" font-weight="bold">✓ Deployed</text> | |
| <!-- FAIL paths --> | |
| <!-- Fail from Lint --> | |
| <line x1="235" y1="125" x2="235" y2="200" stroke="#ff6b6b" stroke-width="1.5" marker-end="url(#arr-red)"/> | |
| <rect x="180" y="205" width="110" height="40" rx="6" fill="#3d1111" stroke="#ff6b6b" stroke-width="1.5"/> | |
| <text x="235" y="230" text-anchor="middle" fill="#ff6b6b" font-size="13" font-weight="bold">✗ Fix code</text> | |
| <!-- Fail from Tests --> | |
| <line x1="385" y1="125" x2="385" y2="200" stroke="#ff6b6b" stroke-width="1.5" marker-end="url(#arr-red)"/> | |
| <rect x="330" y="205" width="110" height="40" rx="6" fill="#3d1111" stroke="#ff6b6b" stroke-width="1.5"/> | |
| <text x="385" y="230" text-anchor="middle" fill="#ff6b6b" font-size="13" font-weight="bold">✗ Fix tests</text> | |
| <!-- Fail from Docker Build --> | |
| <line x1="535" y1="125" x2="535" y2="200" stroke="#ff6b6b" stroke-width="1.5" marker-end="url(#arr-red)"/> | |
| <rect x="480" y="205" width="110" height="40" rx="6" fill="#3d1111" stroke="#ff6b6b" stroke-width="1.5"/> | |
| <text x="535" y="230" text-anchor="middle" fill="#ff6b6b" font-size="13" font-weight="bold">✗ Fix build</text> | |
| <!-- Pass/Fail labels --> | |
| <text x="245" y="165" fill="#ff6b6b" font-size="10" font-weight="bold">FAIL</text> | |
| <text x="395" y="165" fill="#ff6b6b" font-size="10" font-weight="bold">FAIL</text> | |
| <text x="545" y="165" fill="#ff6b6b" font-size="10" font-weight="bold">FAIL</text> | |
| <text x="692" y="160" fill="#64ffda" font-size="10" font-weight="bold">PASS</text> | |
| <!-- Legend --> | |
| <rect x="50" y="280" width="650" height="80" rx="6" fill="#16213e" stroke="#233554" stroke-width="1"/> | |
| <text x="375" y="305" text-anchor="middle" fill="#a8b2d1" font-size="12"> | |
| <tspan font-weight="bold" fill="#ccd6f6">How it works:</tspan> Each step must pass before the next one runs. | |
| </text> | |
| <text x="375" y="325" text-anchor="middle" fill="#8892b0" font-size="11">A failure at any step stops the pipeline and notifies you via GitHub.</text> | |
| <text x="375" y="345" text-anchor="middle" fill="#8892b0" font-size="11">Fix the issue, push again, and the pipeline re-runs automatically.</text> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment