Created
March 10, 2026 21:58
-
-
Save lassebenni/cb3aa323a6516eede5acd8c3321a3f2e to your computer and use it in GitHub Desktop.
Visual for: Azure Resource Hierarchy
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>Azure Resource Hierarchy</title> | |
| <style> | |
| body { | |
| background-color: #1e1e1e; | |
| color: #ffffff; | |
| font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| overflow: hidden; /* Avoid scrollbars */ | |
| } | |
| svg { | |
| background-color: #252526; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); | |
| /* Scale the SVG properly within the viewport */ | |
| max-width: 95vw; | |
| max-height: 95vh; | |
| width: 100%; | |
| height: auto; | |
| } | |
| .text-title { font-size: 24px; font-weight: bold; fill: #ffffff; text-anchor: middle; } | |
| .text-subtitle { font-size: 14px; fill: #aaaaaa; text-anchor: middle; } | |
| /* Revised Box Styles for Better Aesthetics */ | |
| .box-tenant { fill: #1e2d45; stroke: #3a5c8c; stroke-width: 2; rx: 6; } | |
| .box-subscription { fill: #233626; stroke: #45784d; stroke-width: 2; rx: 6; } | |
| .box-rg { fill: #382c1f; stroke: #8f6e40; stroke-width: 2; rx: 6; } | |
| .box-resource { fill: #2a2a2a; stroke: #555555; stroke-width: 1; rx: 4; } | |
| /* Revised Text Styles */ | |
| .label-tenant { font-size: 16px; font-weight: bold; fill: #8cb4f5; } | |
| .label-desc { font-size: 13px; fill: #999999; font-style: italic; } | |
| .label-subscription { font-size: 16px; font-weight: bold; fill: #8ccf96; } | |
| .label-rg { font-size: 16px; font-weight: bold; fill: #d4b281; } | |
| .label-resource { font-size: 14px; font-weight: 500; fill: #e0e0e0; } | |
| /* Path/Connection Styles */ | |
| .connection { stroke: #666666; stroke-width: 2; fill: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 700 480" xmlns="http://www.w3.org/2000/svg"> | |
| <text x="350" y="45" class="text-title">Azure Resource Hierarchy</text> | |
| <text x="350" y="70" class="text-subtitle">How resources are organized and managed in Azure</text> | |
| <!-- Connections (drawn first so they are under the boxes) --> | |
| <path class="connection" d="M 350,165 L 350,195" /> <!-- Tenant to Sub --> | |
| <path class="connection" d="M 350,255 L 350,285" /> <!-- Sub to RG --> | |
| <!-- RG to Resources --> | |
| <path class="connection" d="M 350,345 L 350,380" /> <!-- Middle --> | |
| <path class="connection" d="M 350,360 L 160,360 L 160,380" /> <!-- Left --> | |
| <path class="connection" d="M 350,360 L 540,360 L 540,380" /> <!-- Right --> | |
| <!-- Top Level: Tenant --> | |
| <rect x="200" y="105" width="300" height="60" class="box-tenant" /> | |
| <text x="350" y="133" class="label-tenant" text-anchor="middle">Tenant</text> | |
| <text x="350" y="153" class="label-desc" text-anchor="middle">HackYourFuture (Organization)</text> | |
| <!-- Second Level: Subscription --> | |
| <rect x="200" y="195" width="300" height="60" class="box-subscription" /> | |
| <text x="350" y="223" class="label-subscription" text-anchor="middle">Subscription</text> | |
| <text x="350" y="243" class="label-desc" text-anchor="middle">Azure for Students (Billing boundary)</text> | |
| <!-- Third Level: Resource Group --> | |
| <rect x="200" y="285" width="300" height="60" class="box-rg" /> | |
| <text x="350" y="313" class="label-rg" text-anchor="middle">Resource Group</text> | |
| <text x="350" y="333" class="label-desc" text-anchor="middle">Project Container (e.g., in westeurope)</text> | |
| <!-- Fourth Level: Resources --> | |
| <!-- Left Resource --> | |
| <rect x="50" y="380" width="220" height="40" class="box-resource" /> | |
| <text x="160" y="405" class="label-resource" text-anchor="middle">Azure DB for PostgreSQL</text> | |
| <!-- Middle Resource --> | |
| <rect x="280" y="380" width="220" height="40" class="box-resource" /> | |
| <text x="390" y="405" class="label-resource" text-anchor="middle">Azure Container Apps</text> | |
| <!-- Right Resource --> | |
| <rect x="510" y="380" width="160" height="40" class="box-resource" /> | |
| <text x="590" y="405" class="label-resource" text-anchor="middle">Container Registry</text> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment