<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 420" 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="ahw" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0L10 5L0 10z" fill="#dcdcaa"/>
    </marker>
  </defs>

  <!-- ===== LEFT: Worker threads with queues ===== -->
  <text x="20" y="20" fill="#d4d4d4" font-size="12" font-weight="bold">Workers</text>

  <!-- Worker 0 -->
  <rect x="20" y="36" width="85" height="34" rx="4" fill="#1a3050" stroke="#4a8fd4" stroke-width="1.2"/>
  <text x="62" y="58" fill="#d4d4d4" font-size="10" text-anchor="middle">Worker 0</text>
  <rect x="110" y="36" width="80" height="34" rx="3" fill="#1a2a3a" stroke="#4a8fd4" stroke-width="0.6" stroke-dasharray="3"/>
  <text x="150" y="58" fill="#4a8fd4" font-size="8" text-anchor="middle">deque</text>

  <!-- Worker 1 -->
  <rect x="20" y="78" width="85" height="34" rx="4" fill="#2a1a40" stroke="#9a6be8" stroke-width="1.2"/>
  <text x="62" y="100" fill="#d4d4d4" font-size="10" text-anchor="middle">Worker 1</text>
  <rect x="110" y="78" width="80" height="34" rx="3" fill="#2a1a3a" stroke="#9a6be8" stroke-width="0.6" stroke-dasharray="3"/>
  <text x="150" y="100" fill="#9a6be8" font-size="8" text-anchor="middle">deque</text>

  <!-- Worker 2 -->
  <rect x="20" y="120" width="85" height="34" rx="4" fill="#40301a" stroke="#e8a46b" stroke-width="1.2"/>
  <text x="62" y="142" fill="#d4d4d4" font-size="10" text-anchor="middle">Worker 2</text>
  <rect x="110" y="120" width="80" height="34" rx="3" fill="#3a2a1a" stroke="#e8a46b" stroke-width="0.6" stroke-dasharray="3"/>
  <text x="150" y="142" fill="#e8a46b" font-size="8" text-anchor="middle">deque</text>

  <!-- Arrows from work queue to worker deques -->
  <line x1="220" y1="53" x2="192" y2="53" stroke="#dcdcaa" stroke-width="0.8" stroke-dasharray="3" marker-end="url(#ahw)"/>
  <line x1="220" y1="95" x2="192" y2="95" stroke="#dcdcaa" stroke-width="0.8" stroke-dasharray="3" marker-end="url(#ahw)"/>
  <line x1="220" y1="137" x2="192" y2="137" stroke="#dcdcaa" stroke-width="0.8" stroke-dasharray="3" marker-end="url(#ahw)"/>

  <!-- ===== MIDDLE: Work Queue ===== -->
  <rect x="220" y="26" width="38" height="320" rx="4" fill="#2a2a1a" stroke="#dcdcaa" stroke-width="1" stroke-dasharray="4"/>
  <text x="239" y="190" fill="#dcdcaa" font-size="9" text-anchor="middle" writing-mode="tb">Work Queue</text>

  <!-- ===== RIGHT: Depth levels ===== -->

  <!-- Depth 0 (roots) -->
  <text x="280" y="20" fill="#d4d4d4" font-size="12" font-weight="bold">Depth 0</text>
  <text x="350" y="20" fill="#666" font-size="10">(roots)</text>

  <rect x="280" y="32" width="68" height="34" rx="3" fill="#1a3050" stroke="#4a8fd4" stroke-width="1"/>
  <text x="314" y="54" fill="#d4d4d4" font-size="10" text-anchor="middle">C0</text>

  <rect x="354" y="32" width="68" height="34" rx="3" fill="#1a3050" stroke="#4a8fd4" stroke-width="1"/>
  <text x="388" y="54" fill="#d4d4d4" font-size="10" text-anchor="middle">C1</text>

  <rect x="428" y="32" width="68" height="34" rx="3" fill="#1a3050" stroke="#4a8fd4" stroke-width="1"/>
  <text x="462" y="54" fill="#d4d4d4" font-size="10" text-anchor="middle">C2</text>

  <!-- Arrow from depth 0 to work queue -->
  <line x1="280" y1="49" x2="260" y2="49" stroke="#4a8fd4" stroke-width="1" marker-end="url(#ah)"/>

  <text x="560" y="54" fill="#98c379" font-size="10">parallel</text>

  <!-- Barrier -->
  <line x1="280" y1="82" x2="790" y2="82" stroke="#e06c75" stroke-width="1.5"/>
  <rect x="690" y="74" width="96" height="16" rx="3" fill="#4a2020"/>
  <text x="738" y="86" fill="#e06c75" font-size="9" text-anchor="middle">barrier / wait</text>

  <!-- Depth 1 -->
  <text x="280" y="110" fill="#d4d4d4" font-size="12" font-weight="bold">Depth 1</text>

  <rect x="280" y="120" width="68" height="34" rx="3" fill="#2a1a40" stroke="#9a6be8" stroke-width="1"/>
  <text x="314" y="142" fill="#d4d4d4" font-size="10" text-anchor="middle">C3</text>

  <rect x="354" y="120" width="68" height="34" rx="3" fill="#2a1a40" stroke="#9a6be8" stroke-width="1"/>
  <text x="388" y="142" fill="#d4d4d4" font-size="10" text-anchor="middle">C4</text>

  <rect x="428" y="120" width="68" height="34" rx="3" fill="#2a1a40" stroke="#9a6be8" stroke-width="1"/>
  <text x="462" y="142" fill="#d4d4d4" font-size="10" text-anchor="middle">C5</text>

  <rect x="502" y="120" width="68" height="34" rx="3" fill="#2a1a40" stroke="#9a6be8" stroke-width="1"/>
  <text x="536" y="142" fill="#d4d4d4" font-size="10" text-anchor="middle">C6</text>

  <!-- Arrow from depth 1 to work queue -->
  <line x1="280" y1="137" x2="260" y2="137" stroke="#9a6be8" stroke-width="1" marker-end="url(#ah)"/>

  <text x="630" y="142" fill="#98c379" font-size="10">parallel</text>

  <!-- Barrier -->
  <line x1="280" y1="170" x2="790" y2="170" stroke="#e06c75" stroke-width="1.5"/>
  <rect x="690" y="162" width="96" height="16" rx="3" fill="#4a2020"/>
  <text x="738" y="174" fill="#e06c75" font-size="9" text-anchor="middle">barrier / wait</text>

  <!-- Depth 2 -->
  <text x="280" y="198" fill="#d4d4d4" font-size="12" font-weight="bold">Depth 2</text>

  <rect x="280" y="208" width="68" height="34" rx="3" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="314" y="230" fill="#d4d4d4" font-size="10" text-anchor="middle">C7</text>

  <rect x="354" y="208" width="68" height="34" rx="3" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="388" y="230" fill="#d4d4d4" font-size="10" text-anchor="middle">C8</text>

  <rect x="428" y="208" width="68" height="34" rx="3" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="462" y="230" fill="#d4d4d4" font-size="10" text-anchor="middle">C9</text>

  <rect x="502" y="208" width="68" height="34" rx="3" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="536" y="230" fill="#d4d4d4" font-size="10" text-anchor="middle">C10</text>

  <rect x="576" y="208" width="68" height="34" rx="3" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="610" y="230" fill="#d4d4d4" font-size="10" text-anchor="middle">C11</text>

  <!-- Arrow from depth 2 to work queue -->
  <line x1="280" y1="225" x2="260" y2="225" stroke="#e8a46b" stroke-width="1" marker-end="url(#ah)"/>

  <text x="700" y="230" fill="#98c379" font-size="10">parallel</text>

  <!-- Barrier -->
  <line x1="280" y1="258" x2="790" y2="258" stroke="#e06c75" stroke-width="1.5"/>
  <rect x="690" y="250" width="96" height="16" rx="3" fill="#4a2020"/>
  <text x="738" y="262" fill="#e06c75" font-size="9" text-anchor="middle">barrier / wait</text>

  <!-- Depth 3 -->
  <text x="280" y="286" fill="#d4d4d4" font-size="12" font-weight="bold">Depth 3</text>

  <rect x="280" y="296" width="68" height="34" rx="3" fill="#1a3a2a" stroke="#4ec9b0" stroke-width="1"/>
  <text x="314" y="318" fill="#d4d4d4" font-size="10" text-anchor="middle">C12</text>

  <rect x="354" y="296" width="68" height="34" rx="3" fill="#1a3a2a" stroke="#4ec9b0" stroke-width="1"/>
  <text x="388" y="318" fill="#d4d4d4" font-size="10" text-anchor="middle">C13</text>

  <!-- Arrow from depth 3 to work queue -->
  <line x1="280" y1="313" x2="260" y2="313" stroke="#4ec9b0" stroke-width="1" marker-end="url(#ah)"/>

  <text x="500" y="318" fill="#98c379" font-size="10">parallel</text>

  <!-- Downward flow arrows on far right -->
  <text x="790" y="54" fill="#555" font-size="18" text-anchor="middle">&#8595;</text>
  <text x="790" y="142" fill="#555" font-size="18" text-anchor="middle">&#8595;</text>
  <text x="790" y="230" fill="#555" font-size="18" text-anchor="middle">&#8595;</text>
  <text x="790" y="318" fill="#555" font-size="18" text-anchor="middle">&#8595;</text>

  <!-- Footer -->
  <line x1="20" y1="360" x2="800" y2="360" stroke="#333" stroke-width="0.6"/>
  <text x="410" y="380" fill="#555" font-size="10" text-anchor="middle">All clusters within a depth run in parallel. A barrier ensures the next depth</text>
  <text x="410" y="396" fill="#555" font-size="10" text-anchor="middle">only starts once all parent transforms are computed.</text>
</svg>
