Skip to content

Instantly share code, notes, and snippets.

@lassebenni

lassebenni/blob_storage_hierarchy_visual.html

Created March 18, 2026 09:25
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save lassebenni/9ae619afdba937a57ceed0c03fcd7699 to your computer and use it in GitHub Desktop.
Download ZIP
Visual for: Azure Blob Storage hierarchy (Storage Account → Container → Blob)
Raw
blob_storage_hierarchy_visual.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Blob Storage: Storage Account → Container → Blob</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 400" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif">
<!-- Background -->
<rect width="700" height="400" rx="12" fill="#1a1a2e"/>
<!-- Title -->
<text x="350" y="35" text-anchor="middle" fill="#e0e0e0" font-size="18" font-weight="bold">Azure Blob Storage Hierarchy</text>
<!-- === LEVEL 1: Storage Account === -->
<rect x="40" y="60" width="620" height="320" rx="10" fill="#0d47a1" opacity="0.12" stroke="#42a5f5" stroke-width="1.5"/>
<!-- Storage account icon (cloud-like shape) -->
<rect x="60" y="72" width="18" height="14" rx="3" fill="#42a5f5" opacity="0.6"/>
<text x="86" y="84" fill="#42a5f5" font-size="14" font-weight="bold">Storage Account</text>
<text x="248" y="84" fill="#64b5f6" font-size="11" opacity="0.7">hyfstoragedev</text>
<!-- === LEVEL 2: Container "raw" === -->
<rect x="70" y="105" width="280" height="255" rx="8" fill="#1b5e20" opacity="0.12" stroke="#66bb6a" stroke-width="1.5"/>
<!-- Container icon (folder-like) -->
<path d="M88,118 L88,113 L102,113 L105,118 Z" fill="#66bb6a" opacity="0.6"/>
<rect x="88" y="118" width="17" height="10" rx="2" fill="#66bb6a" opacity="0.6"/>
<text x="114" y="127" fill="#66bb6a" font-size="13" font-weight="bold">Container</text>
<text x="200" y="127" fill="#81c784" font-size="11" opacity="0.7">raw</text>
<!-- Blobs inside "raw" -->
<!-- Blob 1 -->
<rect x="95" y="148" width="235" height="38" rx="5" fill="#263238" stroke="#546e7a" stroke-width="1"/>
<rect x="107" y="156" width="14" height="18" rx="2" fill="#ffb74d" opacity="0.5"/>
<text x="108" y="170" fill="#ffb74d" font-size="8" font-weight="bold">{}</text>
<text x="130" y="164" fill="#e0e0e0" font-size="11">weather_2024-01-15.json</text>
<text x="130" y="178" fill="#888" font-size="9">12 KB · JSON</text>
<!-- Blob 2 -->
<rect x="95" y="196" width="235" height="38" rx="5" fill="#263238" stroke="#546e7a" stroke-width="1"/>
<rect x="107" y="204" width="14" height="18" rx="2" fill="#ffb74d" opacity="0.5"/>
<text x="108" y="218" fill="#ffb74d" font-size="8" font-weight="bold">{}</text>
<text x="130" y="212" fill="#e0e0e0" font-size="11">weather_2024-01-16.json</text>
<text x="130" y="226" fill="#888" font-size="9">14 KB · JSON</text>
<!-- Blob 3 -->
<rect x="95" y="244" width="235" height="38" rx="5" fill="#263238" stroke="#546e7a" stroke-width="1"/>
<rect x="107" y="252" width="14" height="18" rx="2" fill="#ffb74d" opacity="0.5"/>
<text x="108" y="266" fill="#ffb74d" font-size="8" font-weight="bold">{}</text>
<text x="130" y="260" fill="#e0e0e0" font-size="11">weather_2024-01-17.json</text>
<text x="130" y="274" fill="#888" font-size="9">11 KB · JSON</text>
<!-- Blob count -->
<text x="210" y="308" text-anchor="middle" fill="#81c784" font-size="10" opacity="0.6">raw data from API ingestion</text>
<!-- === LEVEL 2: Container "processed" === -->
<rect x="370" y="105" width="275" height="255" rx="8" fill="#4a148c" opacity="0.12" stroke="#ab47bc" stroke-width="1.5"/>
<!-- Container icon -->
<path d="M388,118 L388,113 L402,113 L405,118 Z" fill="#ab47bc" opacity="0.6"/>
<rect x="388" y="118" width="17" height="10" rx="2" fill="#ab47bc" opacity="0.6"/>
<text x="414" y="127" fill="#ab47bc" font-size="13" font-weight="bold">Container</text>
<text x="500" y="127" fill="#ce93d8" font-size="11" opacity="0.7">processed</text>
<!-- Blobs inside "processed" -->
<!-- Blob 1 -->
<rect x="395" y="148" width="230" height="38" rx="5" fill="#263238" stroke="#546e7a" stroke-width="1"/>
<rect x="407" y="156" width="14" height="18" rx="2" fill="#4fc3f7" opacity="0.5"/>
<text x="409" y="169" fill="#4fc3f7" font-size="7" font-weight="bold">csv</text>
<text x="430" y="164" fill="#e0e0e0" font-size="11">summary_2024-01.csv</text>
<text x="430" y="178" fill="#888" font-size="9">3 KB · CSV</text>
<!-- Blob 2 -->
<rect x="395" y="196" width="230" height="38" rx="5" fill="#263238" stroke="#546e7a" stroke-width="1"/>
<rect x="407" y="204" width="14" height="18" rx="2" fill="#4fc3f7" opacity="0.5"/>
<text x="409" y="217" fill="#4fc3f7" font-size="7" font-weight="bold">csv</text>
<text x="430" y="212" fill="#e0e0e0" font-size="11">summary_2024-02.csv</text>
<text x="430" y="226" fill="#888" font-size="9">4 KB · CSV</text>
<!-- Blob count -->
<text x="510" y="270" text-anchor="middle" fill="#ce93d8" font-size="10" opacity="0.6">cleaned and aggregated output</text>
<!-- === Labels on right side === -->
<g transform="translate(558, 320)">
<rect x="0" y="0" width="10" height="10" rx="2" fill="#42a5f5" opacity="0.5"/>
<text x="16" y="9" fill="#888" font-size="9">Storage Account</text>
<rect x="0" y="18" width="10" height="10" rx="2" fill="#66bb6a" opacity="0.5"/>
<text x="16" y="27" fill="#888" font-size="9">Container</text>
<rect x="0" y="36" width="10" height="10" rx="2" fill="#546e7a" opacity="0.5"/>
<text x="16" y="45" fill="#888" font-size="9">Blob (file)</text>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment