<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 250" font-family="Consolas, 'Courier New', monospace">
  <defs>
    <marker id="ah" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0L10 5L0 10z" fill="#888"/>
    </marker>
    <marker id="ahg" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0L10 5L0 10z" fill="#98c379"/>
    </marker>
  </defs>

  <!-- BEFORE -->
  <text x="20" y="20" fill="#d4d4d4" font-size="12" font-weight="bold">Before</text>
  <text x="85" y="20" fill="#666" font-size="10">count = 5</text>

  <!-- Cells -->
  <rect x="40" y="34" width="80" height="44" rx="3" fill="#2a3a4a" stroke="#5a7a9a" stroke-width="1"/>
  <text x="80" y="61" fill="#d4d4d4" font-size="13" text-anchor="middle">A</text>

  <rect x="125" y="34" width="80" height="44" rx="3" fill="#4a2020" stroke="#e06c75" stroke-width="1.5"/>
  <text x="165" y="61" fill="#e06c75" font-size="13" text-anchor="middle">B</text>

  <rect x="210" y="34" width="80" height="44" rx="3" fill="#2a3a4a" stroke="#5a7a9a" stroke-width="1"/>
  <text x="250" y="61" fill="#d4d4d4" font-size="13" text-anchor="middle">C</text>

  <rect x="295" y="34" width="80" height="44" rx="3" fill="#2a3a4a" stroke="#5a7a9a" stroke-width="1"/>
  <text x="335" y="61" fill="#d4d4d4" font-size="13" text-anchor="middle">D</text>

  <rect x="380" y="34" width="80" height="44" rx="3" fill="#203a20" stroke="#98c379" stroke-width="1.5"/>
  <text x="420" y="61" fill="#98c379" font-size="13" text-anchor="middle">E</text>

  <!-- Slot labels -->
  <text x="80" y="92" fill="#555" font-size="8" text-anchor="middle">slot 0</text>
  <text x="165" y="92" fill="#e06c75" font-size="8" text-anchor="middle">slot 1</text>
  <text x="250" y="92" fill="#555" font-size="8" text-anchor="middle">slot 2</text>
  <text x="335" y="92" fill="#555" font-size="8" text-anchor="middle">slot 3</text>
  <text x="420" y="92" fill="#98c379" font-size="8" text-anchor="middle">slot 4</text>

  <!-- Annotations -->
  <text x="165" y="108" fill="#e06c75" font-size="9" text-anchor="middle">remove</text>
  <text x="420" y="108" fill="#98c379" font-size="9" text-anchor="middle">last element</text>

  <!-- Arrow from E to B's slot -->
  <path d="M420 34 C420 10 165 10 165 32" stroke="#98c379" stroke-width="1.5" fill="none" stroke-dasharray="4" marker-end="url(#ahg)"/>

  <!-- Separator -->
  <line x1="20" y1="125" x2="540" y2="125" stroke="#444" stroke-width="0.6" stroke-dasharray="4"/>

  <!-- AFTER -->
  <text x="20" y="155" fill="#d4d4d4" font-size="12" font-weight="bold">After</text>
  <text x="85" y="155" fill="#666" font-size="10">count = 4</text>

  <rect x="40" y="168" width="80" height="44" rx="3" fill="#2a3a4a" stroke="#5a7a9a" stroke-width="1"/>
  <text x="80" y="195" fill="#d4d4d4" font-size="13" text-anchor="middle">A</text>

  <rect x="125" y="168" width="80" height="44" rx="3" fill="#203a20" stroke="#98c379" stroke-width="1.5"/>
  <text x="165" y="195" fill="#98c379" font-size="13" text-anchor="middle">E</text>

  <rect x="210" y="168" width="80" height="44" rx="3" fill="#2a3a4a" stroke="#5a7a9a" stroke-width="1"/>
  <text x="250" y="195" fill="#d4d4d4" font-size="13" text-anchor="middle">C</text>

  <rect x="295" y="168" width="80" height="44" rx="3" fill="#2a3a4a" stroke="#5a7a9a" stroke-width="1"/>
  <text x="335" y="195" fill="#d4d4d4" font-size="13" text-anchor="middle">D</text>

  <rect x="380" y="168" width="80" height="44" rx="3" fill="#1a1a1a" stroke="#333" stroke-width="1" stroke-dasharray="3"/>
  <text x="420" y="195" fill="#333" font-size="13" text-anchor="middle">-</text>

  <!-- Annotation -->
  <text x="280" y="237" fill="#888" font-size="9" text-anchor="middle">Remove() returns E's new ClusterIndex so the caller can patch external mappings</text>
</svg>
