Skip to content

Replace Docker Images diagram with interactive SVG visualization #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elft3r merged 3 commits into from
Jun 3, 2026
+160 −17
Merged

Replace Docker Images diagram with interactive SVG visualization #43

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
87cbc6e
Rebuild Images & Layers slide as animated SVG with Reveal.js fragments
claude Jun 3, 2026
230f55e
Compact Dockerfile lines and reshape box as document icon
claude Jun 3, 2026
4cc7ddc
Add role=img and title/desc for accessible SVG
claude Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 160 additions & 17 deletions docker-training/sections/docker-images.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,166 @@
<section class="section-title" aria-label="Section: Docker Images"><h2>Docker Images</h2></section>
<section>
<h2>Images &amp; Layers</h2>
<div class="grid grid-cols-2 gap-6">
<div>
<pre><code class="language-dockerfile" data-trim>
FROM ubuntu:24.04
COPY . /app
RUN make /app
CMD python /app/app.py
</code></pre>
</div>
<div>
<img
class="rounded"
src="imgs/images-layers.png"
alt="Docker Images and Layers"
/>
</div>
</div>
<svg viewBox="0 0 900 420" style="width:100%;height:auto;display:block;"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="svg-layers-title svg-layers-desc">
<title id="svg-layers-title">Docker image layers diagram</title>
<desc id="svg-layers-desc">A Dockerfile with four instructions (FROM, COPY, RUN, CMD) on the right, each connected by an arrow to the read-only image layer it creates on the left.</desc>
<defs>
Comment thread
elft3r marked this conversation as resolved.
<marker id="arr-layers" markerWidth="12" markerHeight="8"
refX="11" refY="4" orient="auto" markerUnits="userSpaceOnUse">
<polygon points="0 0, 12 4, 0 8" fill="#38B5D0"/>
</marker>
<marker id="arr-sm" markerWidth="8" markerHeight="6"
refX="7" refY="3" orient="auto" markerUnits="userSpaceOnUse">
<polygon points="0 0, 8 3, 0 6" fill="#4a5568"/>
</marker>
</defs>

<!-- ── LEFT PANEL: image layer stack ── -->

<!-- Outer dashed container -->
<rect x="2" y="2" width="335" height="340" rx="6"
fill="none" stroke="#5AB5CE" stroke-width="2" stroke-dasharray="8,4"/>

<!-- "Thin R/W layer" box -->
<rect x="12" y="10" width="268" height="36" rx="4"
fill="none" stroke="#5AB5CE" stroke-width="1.5" stroke-dasharray="5,3"/>
<text x="146" y="33" text-anchor="middle"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="13" fill="#1a202c">Thin R/W layer</text>

<!-- "← Container layer" label -->
<line x1="340" y1="28" x2="282" y2="28"
stroke="#4a5568" stroke-width="1.5" marker-end="url(#arr-sm)"/>
<text x="344" y="32"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="11" fill="#4a5568">Container layer</text>

<!-- Downward arrows from thin R/W layer to inner stack -->
<line x1="42" y1="46" x2="42" y2="68" stroke="#5AB5CE" stroke-width="1.5"/>
<polygon points="38,65 42,72 46,65" fill="#5AB5CE"/>
<line x1="82" y1="46" x2="82" y2="68" stroke="#5AB5CE" stroke-width="1.5"/>
<polygon points="78,65 82,72 86,65" fill="#5AB5CE"/>
<line x1="122" y1="46" x2="122" y2="68" stroke="#5AB5CE" stroke-width="1.5"/>
<polygon points="118,65 122,72 126,65" fill="#5AB5CE"/>
<line x1="162" y1="46" x2="162" y2="68" stroke="#5AB5CE" stroke-width="1.5"/>
<polygon points="158,65 162,72 166,65" fill="#5AB5CE"/>
<line x1="202" y1="46" x2="202" y2="68" stroke="#5AB5CE" stroke-width="1.5"/>
<polygon points="198,65 202,72 206,65" fill="#5AB5CE"/>

<!-- Inner box (white, dashed border) -->
<rect x="10" y="74" width="300" height="220" rx="2"
fill="white" stroke="#aaa" stroke-width="1.5" stroke-dasharray="4,3"/>

<!-- Layer 1 (top): CMD → 91e54dfb1179, 0 B -->
<rect x="12" y="76" width="296" height="50" rx="2" fill="#3D7A8A"/>
<text x="26" y="106" font-family="monospace" font-size="12" fill="white">91e54dfb1179</text>
<text x="298" y="106" text-anchor="end" font-family="monospace" font-size="12" fill="white">0 B</text>

<!-- Layer 2: RUN → d74508fb6632, 1.895 KB -->
<rect x="12" y="130" width="296" height="50" rx="2" fill="#3D7A8A"/>
<text x="26" y="160" font-family="monospace" font-size="12" fill="white">d74508fb6632</text>
<text x="298" y="160" text-anchor="end" font-family="monospace" font-size="12" fill="white">1.895 KB</text>

<!-- Layer 3: COPY → c22013c84729, 194.5 KB -->
<rect x="12" y="184" width="296" height="50" rx="2" fill="#3D7A8A"/>
<text x="26" y="214" font-family="monospace" font-size="12" fill="white">c22013c84729</text>
<text x="298" y="214" text-anchor="end" font-family="monospace" font-size="12" fill="white">194.5 KB</text>

<!-- Layer 4 (bottom): FROM → d3a1f33e8a5a, 188.1 MB -->
<rect x="12" y="238" width="296" height="50" rx="2" fill="#3D7A8A"/>
<text x="26" y="268" font-family="monospace" font-size="12" fill="white">d3a1f33e8a5a</text>
<text x="298" y="268" text-anchor="end" font-family="monospace" font-size="12" fill="white">188.1 MB</text>

<!-- "ubuntu:15.04" label -->
<text x="160" y="312" text-anchor="middle"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="13" fill="#1a202c">ubuntu:15.04</text>

<!-- Right bracket spanning all 4 layers (y=76 to y=288) -->
<path d="M 312,76 L 322,76 L 322,288 L 312,288"
fill="none" stroke="#555" stroke-width="2"/>
<line x1="322" y1="182" x2="338" y2="182" stroke="#555" stroke-width="1.5"/>

<!-- Padlock icon -->
<rect x="319" y="170" width="16" height="13" rx="2" fill="#B8860B"/>
<path d="M 321,170 Q 321,161 327,161 Q 333,161 333,170"
fill="none" stroke="#B8860B" stroke-width="2.5"/>

<!-- "Image layers (R/O)" label -->
<text x="342" y="187"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="12" font-weight="600" fill="#1a202c">Image layers (R/O)</text>

<!-- Container caption -->
<text x="160" y="358" text-anchor="middle"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="13" fill="#4a5568">Container</text>
<text x="160" y="375" text-anchor="middle"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="11" fill="#4a5568">(based on ubuntu:15.04 image)</text>

<!-- ── RIGHT PANEL: Dockerfile ── -->

<!-- "Dockerfile:" heading -->
<text x="693" y="56" text-anchor="middle"
font-family="Source Sans Pro,Helvetica,sans-serif"
font-size="17" font-weight="700" fill="#1a202c">Dockerfile:</text>

<!--
File/document shape:
• Top-right corner is cut and folded (dog-ear) to read as a document
• Bottom edge is a single gentle arc — the classic page-curl silhouette
Lines are tightly spaced (40 px apart, centers at y=100/140/180/220).
-->
<!-- Main document body -->
<path d="M 498,68 L 872,68 L 892,88 L 892,244 Q 695,262 498,244 Z"
fill="#3D7A8A"/>
<!-- Folded corner — slightly darker to show the crease -->
<path d="M 872,68 L 892,68 L 892,88 Z" fill="#2B5E6E"/>
<line x1="872" y1="68" x2="892" y2="88"
stroke="#1e4555" stroke-width="1.2" opacity="0.6"/>

<!-- FROM ubuntu:15.04 — center y=100 -->
<text x="512" y="108"
font-family="monospace" font-size="15" font-weight="600" fill="white">FROM ubuntu:<tspan fill="#FF6B6B">15.04</tspan></text>

<!-- COPY . /app — center y=140 -->
<text x="512" y="148"
font-family="monospace" font-size="15" font-weight="600" fill="white">COPY . /app</text>

<!-- RUN make /app — center y=180 -->
<text x="512" y="188"
font-family="monospace" font-size="15" font-weight="600" fill="white">RUN make /app</text>

<!-- CMD python /app/app.py — center y=220 -->
<text x="512" y="228"
font-family="monospace" font-size="15" font-weight="600" fill="white">CMD python /app/app.py</text>

<!-- ── ARROWS (Reveal.js fragments, one per instruction) ── -->
<!--
Dockerfile lines (compact, x-start=498): FROM y=100, COPY y=140, RUN y=180, CMD y=220
Layer centers (unchanged): d3a1 y=261, c220 y=207, d745 y=153, 91e5 y=101
Arrows cross in the middle (FROM↔CMD, COPY↔RUN), matching the PowerPoint animation.
-->
<line class="fragment" data-fragment-index="1"
x1="498" y1="100" x2="322" y2="261"
stroke="#38B5D0" stroke-width="3.5" marker-end="url(#arr-layers)"/>

<line class="fragment" data-fragment-index="2"
x1="498" y1="140" x2="322" y2="207"
stroke="#38B5D0" stroke-width="3.5" marker-end="url(#arr-layers)"/>

<line class="fragment" data-fragment-index="3"
x1="498" y1="180" x2="322" y2="153"
stroke="#38B5D0" stroke-width="3.5" marker-end="url(#arr-layers)"/>

<line class="fragment" data-fragment-index="4"
x1="498" y1="220" x2="322" y2="101"
stroke="#38B5D0" stroke-width="3.5" marker-end="url(#arr-layers)"/>
</svg>
</section>
<section>
<h2>Container Layer</h2>
Expand Down
Loading