mindforge-cc 11.8.2 → 11.9.0

package/.agent/skills/concept-diagrams/examples/banana-journey-tree-to-smoothie.md

@@ -0,0 +1,161 @@
+# Journey of a Banana: From Tree to Smoothie
+
+A narrative journey diagram following a single banana across 3,000 miles and 3 weeks, from harvest in Costa Rica to a smoothie in the consumer's kitchen. Demonstrates storytelling through visualization, winding path layout, and progressive state changes.
+
+## Key Patterns Used
+
+- **Winding journey path**: S-curve connecting all stages visually
+- **Location markers**: Country flags and place names for geographic context
+- **Progressive state changes**: Banana color changes (green → yellow → brown → frozen → smoothie)
+- **Narrative details**: Fun elements like spider check, stickers, price tags
+- **Timeline**: Bottom timeline showing duration of journey
+- **Environmental context**: Ocean waves, gas clouds, store awning
+
+## New Shape Techniques
+
+### Banana (curved fruit shape)
+```xml
+<!-- Green banana -->
+<path class="banana-green" d="M 5 0 Q 0 10 3 20 Q 6 25 10 20 Q 13 10 8 0 Z"/>
+
+<!-- Yellow banana -->
+<path class="banana-yellow" d="M 0 5 Q -6 18 0 32 Q 7 40 15 30 Q 20 15 12 5 Z"/>
+
+<!-- Brown overripe banana with spots -->
+<path class="banana-brown" d="M 0 5 Q -5 15 0 28 Q 6 35 14 26 Q 18 14 12 5 Z"/>
+<circle class="banana-spots" cx="5" cy="15" r="1.5"/>
+<circle class="banana-spots" cx="9" cy="20" r="1"/>
+```
+
+### Banana Tree
+```xml
+<!-- Trunk -->
+<rect class="tree-trunk" x="55" y="50" width="15" height="60" rx="3"/>
+<!-- Leaves (rotated ellipses) -->
+<ellipse class="tree-leaf" cx="62" cy="45" rx="40" ry="15" transform="rotate(-20, 62, 45)"/>
+<ellipse class="tree-leaf" cx="62" cy="50" rx="35" ry="12" transform="rotate(25, 62, 50)"/>
+<!-- Banana bunch hanging -->
+<g transform="translate(40, 55)">
+  <path class="banana-green" d="M 5 0 Q 0 10 3 20 Q 6 25 10 20 Q 13 10 8 0 Z"/>
+  <path class="banana-green" d="M 12 2 Q 8 12 11 22 Q 14 27 18 22 Q 21 12 16 2 Z"/>
+  <rect class="stem" x="8" y="-5" width="12" height="8" rx="2"/>
+</g>
+```
+
+### Cargo Ship
+```xml
+<!-- Ocean waves -->
+<path class="ocean" d="M 0 90 Q 30 85 60 90 Q 90 95 120 90 Q 150 85 180 90 L 180 110 L 0 110 Z" opacity="0.5"/>
+<!-- Hull -->
+<path class="ship-hull" d="M 20 90 L 30 60 L 160 60 L 170 90 Q 150 95 95 95 Q 40 95 20 90 Z"/>
+<!-- Deck -->
+<rect class="ship-deck" x="40" y="45" width="110" height="18" rx="2"/>
+<!-- Reefer containers -->
+<rect class="container" x="45" y="25" width="30" height="22" rx="2"/>
+<!-- Refrigeration symbol -->
+<text x="60" y="40" text-anchor="middle" fill="#185FA5" style="font-size:10px">❄</text>
+<!-- Smoke stack -->
+<rect x="145" y="35" width="8" height="15" fill="#444441"/>
+```
+
+### Inspector Figure
+```xml
+<!-- Body -->
+<rect class="inspector" x="10" y="20" width="25" height="35" rx="3"/>
+<!-- Head -->
+<circle class="inspector" cx="22" cy="12" r="10"/>
+<!-- Hat -->
+<rect x="12" y="2" width="20" height="6" rx="2" fill="#534AB7"/>
+<!-- Clipboard -->
+<rect class="clipboard" x="38" y="28" width="15" height="20" rx="2"/>
+<line x1="42" y1="34" x2="50" y2="34" stroke="#888780" stroke-width="1"/>
+```
+
+### Spider with "No" Symbol
+```xml
+<circle cx="15" cy="15" r="18" fill="none" stroke="#A32D2D" stroke-width="2"/>
+<line x1="3" y1="3" x2="27" y2="27" stroke="#A32D2D" stroke-width="2"/>
+<!-- Spider body -->
+<ellipse class="spider" cx="15" cy="15" rx="4" ry="5"/>
+<ellipse class="spider" cx="15" cy="10" rx="3" ry="3"/>
+<!-- Legs -->
+<line x1="12" y1="14" x2="5" y2="10" stroke="#2C2C2A" stroke-width="1"/>
+<line x1="18" y1="14" x2="25" y2="10" stroke="#2C2C2A" stroke-width="1"/>
+```
+
+### Blender with Smoothie
+```xml
+<!-- Blender jar -->
+<path class="blender" d="M 5 5 L 0 45 L 35 45 L 30 5 Z"/>
+<!-- Smoothie inside (wavy top) -->
+<path class="smoothie" d="M 3 20 L 0 45 L 35 45 L 32 20 Q 25 18 17 22 Q 10 18 3 20 Z"/>
+<!-- Blender base -->
+<rect class="blender" x="-2" y="45" width="40" height="12" rx="3"/>
+<!-- Lid -->
+<rect x="8" y="0" width="20" height="8" rx="2" fill="#AFA9EC" stroke="#534AB7"/>
+<!-- Banana chunks floating -->
+<ellipse cx="12" cy="32" rx="4" ry="2" fill="#FAC775"/>
+```
+
+### Winding Journey Path
+```xml
+<path class="journey-path" d="
+  M 80 100 
+  L 200 100 
+  Q 280 100 280 150 
+  L 280 180
+  Q 280 220 320 220
+  L 520 220
+  Q 560 220 560 260
+  L 560 320
+  Q 560 360 520 360
+  L 280 360
+  ...
+"/>
+```
+
+## CSS Classes
+
+```css
+/* Journey */
+.journey-path { stroke: #D3D1C7; stroke-width: 3; fill: none; stroke-linecap: round; }
+
+/* Banana ripeness stages */
+.banana-green { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; }
+.banana-yellow { fill: #FAC775; stroke: #BA7517; stroke-width: 0.5; }
+.banana-brown { fill: #854F0B; stroke: #633806; stroke-width: 0.5; }
+.banana-spots { fill: #633806; }
+
+/* Environment elements */
+.tree-trunk { fill: #854F0B; stroke: #633806; stroke-width: 1; }
+.tree-leaf { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; }
+.ocean { fill: #85B7EB; }
+.ship-hull { fill: #5F5E5A; stroke: #444441; stroke-width: 1; }
+.container { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+.gas-cloud { fill: #C0DD97; stroke: #97C459; stroke-width: 0.5; opacity: 0.6; }
+
+/* Buildings */
+.packhouse { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
+.warehouse { fill: #FAEEDA; stroke: #854F0B; stroke-width: 1; }
+.store { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1; }
+
+/* Kitchen */
+.counter { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
+.blender { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
+.smoothie { fill: #FAC775; }
+.freezer { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+
+/* Details */
+.sticker { fill: #378ADD; stroke: #185FA5; stroke-width: 0.3; }
+.spider { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.3; }
+```
+
+## Layout Notes
+
+- **ViewBox**: 850×680 (tall for winding path)
+- **Path style**: S-curve winding path connects all 7 stages
+- **Location labels**: Country flags + place names anchor geographic context
+- **State progression**: Same object (banana) shown in different states throughout
+- **Timeline**: Horizontal timeline at bottom shows journey duration
+- **Narrative elements**: Fun details (spider, stickers, price tags) add storytelling value
+- **Environmental context**: Ocean waves, gas clouds, awnings create sense of place

package/.agent/skills/concept-diagrams/examples/commercial-aircraft-structure.md

@@ -0,0 +1,209 @@
+# Commercial Aircraft Structure
+
+A physical/structural diagram showing an aircraft side profile using appropriate SVG shapes beyond rectangles - paths, polygons, ellipses for realistic representation.
+
+## Key Patterns Used
+
+- **Path elements**: Curved fuselage body with nose cone using quadratic bezier curves
+- **Polygon elements**: Tapered wing shape, triangular stabilizers, control surfaces
+- **Ellipse elements**: Engines (cylinders), wheels (circles)
+- **Line elements**: Landing gear struts, leader lines for labels
+- **Dashed strokes**: Interior sections (fuel tank), movable control surfaces (rudder, elevator)
+- **Layered composition**: Cabin sections drawn inside the fuselage shape
+- **Leader lines with labels**: Connect labels to components they describe
+
+## Diagram
+
+```xml
+<svg width="100%" viewBox="0 0 680 400" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- FUSELAGE - main body cylinder with nose cone -->
+  <path class="fuselage" d="
+    M 80 180
+    Q 40 180 40 200
+    Q 40 220 80 220
+    L 560 220
+    Q 580 220 580 200
+    Q 580 180 560 180
+    Z
+  "/>
+  
+  <!-- Nose cone -->
+  <path class="fuselage" d="
+    M 80 180
+    Q 50 180 35 200
+    Q 50 220 80 220
+  " fill="none" stroke-width="1"/>
+
+  <!-- COCKPIT windows -->
+  <path class="cockpit" d="
+    M 45 190
+    L 75 185
+    L 75 200
+    L 50 200
+    Z
+  "/>
+  <line x1="55" y1="188" x2="55" y2="200" stroke="#534AB7" stroke-width="0.5"/>
+  <line x1="65" y1="186" x2="65" y2="200" stroke="#534AB7" stroke-width="0.5"/>
+
+  <!-- CABIN SECTIONS (inside fuselage) -->
+  <!-- First class -->
+  <rect class="first-class" x="85" y="183" width="50" height="34" rx="2"/>
+  <text class="tl" x="110" y="203" text-anchor="middle">First</text>
+  
+  <!-- Business class -->
+  <rect class="business-class" x="140" y="183" width="80" height="34" rx="2"/>
+  <text class="tl" x="180" y="203" text-anchor="middle">Business</text>
+  
+  <!-- Economy class -->
+  <rect class="economy-class" x="225" y="183" width="200" height="34" rx="2"/>
+  <text class="tl" x="325" y="203" text-anchor="middle">Economy</text>
+
+  <!-- CARGO HOLD (lower section indication) -->
+  <line x1="85" y1="217" x2="520" y2="217" class="leader"/>
+  <text class="tl" x="300" y="228" text-anchor="middle" opacity=".6">Cargo hold below deck</text>
+
+  <!-- WING - main wing shape -->
+  <polygon class="wing" points="
+    200,220
+    120,300
+    130,305
+    160,305
+    340,235
+    340,220
+  "/>
+  
+  <!-- Wing fuel tank (dashed interior) -->
+  <polygon class="fuel-tank" points="
+    210,225
+    150,280
+    160,283
+    180,283
+    310,232
+    310,225
+  "/>
+  <text class="tl" x="220" y="260" opacity=".7">Fuel</text>
+
+  <!-- Flaps (trailing edge) -->
+  <polygon class="flap" points="
+    130,300
+    120,305
+    160,310
+    165,305
+  "/>
+  <text class="tl" x="143" y="320">Flaps</text>
+
+  <!-- ENGINE under wing -->
+  <ellipse class="engine" cx="175" cy="285" rx="25" ry="12"/>
+  <ellipse cx="155" cy="285" rx="8" ry="10" fill="none" stroke="#993C1D" stroke-width="0.5"/>
+  <!-- Engine pylon -->
+  <line x1="175" y1="273" x2="190" y2="245" stroke="#5F5E5A" stroke-width="2"/>
+  <text class="tl" x="175" y="308" text-anchor="middle">Engine</text>
+
+  <!-- TAIL SECTION -->
+  <!-- Vertical stabilizer -->
+  <polygon class="tail-v" points="
+    520,180
+    560,100
+    580,100
+    580,180
+  "/>
+  <text class="tl" x="565" y="150" text-anchor="middle">Vertical</text>
+  <text class="tl" x="565" y="162" text-anchor="middle">stabilizer</text>
+  
+  <!-- Rudder -->
+  <polygon points="575,105 590,105 590,178 580,178" fill="none" stroke="#185FA5" stroke-width="0.5" stroke-dasharray="3 2"/>
+  <text class="tl" x="595" y="145" opacity=".6">Rudder</text>
+
+  <!-- Horizontal stabilizer -->
+  <polygon class="tail-h" points="
+    500,195
+    460,175
+    465,170
+    580,170
+    580,180
+    520,195
+  "/>
+  <text class="tl" x="510" y="166">Horizontal stabilizer</text>
+  
+  <!-- Elevator -->
+  <polygon points="462,174 450,168 455,163 467,169" fill="none" stroke="#185FA5" stroke-width="0.5" stroke-dasharray="3 2"/>
+  <text class="tl" x="440" y="158" opacity=".6">Elevator</text>
+
+  <!-- LANDING GEAR -->
+  <!-- Nose gear -->
+  <line class="gear" x1="100" y1="220" x2="100" y2="260" stroke-width="3"/>
+  <ellipse class="wheel" cx="100" cy="268" rx="8" ry="10"/>
+  <text class="tl" x="100" y="290" text-anchor="middle">Nose gear</text>
+
+  <!-- Main gear (under wing/fuselage junction) -->
+  <line class="gear" x1="280" y1="220" x2="280" y2="270" stroke-width="4"/>
+  <line class="gear" x1="268" y1="265" x2="292" y2="265" stroke-width="3"/>
+  <ellipse class="wheel" cx="268" cy="278" rx="10" ry="12"/>
+  <ellipse class="wheel" cx="292" cy="278" rx="10" ry="12"/>
+  <text class="tl" x="280" y="302" text-anchor="middle">Main gear</text>
+
+  <!-- LABELS with leader lines -->
+  <!-- Cockpit label -->
+  <line class="leader" x1="60" y1="175" x2="60" y2="140"/>
+  <text class="ts" x="60" y="132" text-anchor="middle">Cockpit</text>
+
+  <!-- Wing label -->
+  <line class="leader" x1="250" y1="250" x2="290" y2="330"/>
+  <text class="ts" x="290" y="345" text-anchor="middle">Wing structure</text>
+  <text class="tl" x="290" y="358" text-anchor="middle">Spars, ribs, skin</text>
+
+  <!-- Fuselage label -->
+  <line class="leader" x1="400" y1="180" x2="400" y2="140"/>
+  <text class="ts" x="400" y="132" text-anchor="middle">Fuselage</text>
+  <text class="tl" x="400" y="145" text-anchor="middle">Pressure vessel</text>
+
+</svg>
+```
+
+## CSS Classes for Physical Diagrams
+
+When creating physical/structural diagrams, define semantic classes for each component type:
+
+```css
+/* Structure shapes */
+.fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
+.wing { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+.tail-v { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+.tail-h { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+
+/* Interior sections */
+.cockpit { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
+.first-class { fill: #FBEAF0; stroke: #993556; stroke-width: 0.5; }
+.business-class { fill: #FAECE7; stroke: #993C1D; stroke-width: 0.5; }
+.economy-class { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.5; }
+.cargo { fill: #D3D1C7; stroke: #5F5E5A; stroke-width: 0.5; }
+
+/* Systems */
+.engine { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
+.fuel-tank { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.5; stroke-dasharray: 3 2; }
+.flap { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.5; }
+
+/* Mechanical */
+.gear { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
+.wheel { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.5; }
+```
+
+## Shape Selection Guide
+
+| Physical form | SVG element | Example |
+|---------------|-------------|---------|
+| Curved body | `<path>` with Q (quadratic) or C (cubic) curves | Fuselage, nose cone |
+| Tapered/angular | `<polygon>` | Wings, stabilizers |
+| Cylindrical | `<ellipse>` | Engines, wheels, tanks |
+| Linear structure | `<line>` | Struts, pylons, gear legs |
+| Internal sections | `<rect>` inside parent shape | Cabin classes |
+| Dashed boundaries | `stroke-dasharray` on any shape | Fuel tanks, control surfaces |
+
+## Layout Notes
+
+- **ViewBox**: 680×400 (wider aspect ratio suits side profile)
+- **Layering**: Draw outer structures first, then interior details on top
+- **Leader lines**: Use `.leader` class (dashed) to connect labels to components
+- **Text sizes**: Use `.tl` (10px) for component labels, `.ts` (12px) for section labels
+- **Semantic colors**: Group by system (structure=blue, propulsion=coral, fuel=amber, etc.)

package/.agent/skills/concept-diagrams/examples/cpu-ooo-microarchitecture.md

@@ -0,0 +1,236 @@
+# Out-of-Order CPU Core Microarchitecture
+
+A structural diagram showing the internal pipeline stages of a modern superscalar out-of-order CPU core. Demonstrates multi-stage vertical flow with parallel paths, fan-out patterns for execution ports, and a separate memory hierarchy sidebar.
+
+## Key Patterns Used
+
+- **Multi-stage vertical flow**: Six pipeline stages (Front End → Rename → Schedule → Execute → Retire)
+- **Parallel decode paths**: Main decode and µop cache bypass (dashed line for cache hit)
+- **Container grouping**: Logical stages grouped in colored containers
+- **Fan-out pattern**: Single scheduler dispatching to 6 execution ports
+- **Sidebar layout**: Memory hierarchy placed in separate column on right
+- **Stage labels**: Left-aligned labels indicating pipeline phase
+- **Color-coded semantics**: Different colors for each functional unit category
+
+## Diagram Type
+
+This is a **hybrid structural/flow** diagram:
+- **Flow aspect**: Instructions move top-to-bottom through pipeline stages
+- **Structural aspect**: Components are grouped by function (rename unit, execution cluster)
+- **Sidebar**: Memory hierarchy is architecturally separate but connected via data paths
+
+## Pipeline Stage Breakdown
+
+### Front End (Purple)
+```xml
+<!-- Fetch Unit -->
+<g class="node c-purple">
+  <rect x="40" y="70" width="140" height="56" rx="8" stroke-width="0.5"/>
+  <text class="th" x="110" y="90" text-anchor="middle" dominant-baseline="central">Fetch unit</text>
+  <text class="ts" x="110" y="110" text-anchor="middle" dominant-baseline="central">6-wide, 32B/cycle</text>
+</g>
+
+<!-- Branch Predictor (subordinate) -->
+<g class="node c-purple">
+  <rect x="40" y="140" width="140" height="44" rx="8" stroke-width="0.5"/>
+  <text class="th" x="110" y="162" text-anchor="middle" dominant-baseline="central">Branch predictor</text>
+</g>
+
+<!-- Decode -->
+<g class="node c-purple">
+  <rect x="230" y="70" width="160" height="56" rx="8" stroke-width="0.5"/>
+  <text class="th" x="310" y="90" text-anchor="middle" dominant-baseline="central">Decode</text>
+  <text class="ts" x="310" y="110" text-anchor="middle" dominant-baseline="central">x86 → µops, 6-wide</text>
+</g>
+```
+
+### µop Cache Bypass Path (Teal)
+The µop cache (Decoded Stream Buffer) provides an alternate path that bypasses the complex decoder:
+
+```xml
+<!-- µop Cache parallel to decode -->
+<g class="node c-teal">
+  <rect x="230" y="150" width="160" height="50" rx="8" stroke-width="0.5"/>
+  <text class="th" x="310" y="168" text-anchor="middle" dominant-baseline="central">µop cache (DSB)</text>
+  <text class="ts" x="310" y="186" text-anchor="middle" dominant-baseline="central">4K entries, 8-wide</text>
+</g>
+
+<!-- Dashed bypass path indicating cache hit -->
+<path d="M180 110 L205 110 L205 175 L230 175" fill="none" class="arr" 
+      stroke-dasharray="4 3" marker-end="url(#arrow)"/>
+<text class="tx" x="164" y="148" opacity=".6">hit</text>
+```
+
+### Rename/Allocate Container (Coral)
+Groups related rename components in a container:
+
+```xml
+<!-- Outer container -->
+<g class="c-coral">
+  <rect x="40" y="250" width="530" height="130" rx="12" stroke-width="0.5"/>
+  <text class="th" x="60" y="274">Rename / allocate</text>
+  <text class="ts" x="60" y="292">Map architectural → physical registers</text>
+</g>
+
+<!-- Inner components -->
+<g class="node c-coral">
+  <rect x="60" y="310" width="180" height="56" rx="8" stroke-width="0.5"/>
+  <text class="th" x="150" y="330" text-anchor="middle" dominant-baseline="central">Register alias table</text>
+  <text class="ts" x="150" y="350" text-anchor="middle" dominant-baseline="central">180 physical regs</text>
+</g>
+```
+
+### Scheduler Fan-Out Pattern (Amber → Teal)
+Single unified scheduler dispatching to multiple execution ports:
+
+```xml
+<!-- Unified Scheduler -->
+<g class="node c-amber">
+  <rect x="140" y="420" width="330" height="50" rx="8" stroke-width="0.5"/>
+  <text class="th" x="305" y="438" text-anchor="middle" dominant-baseline="central">Unified scheduler</text>
+  <text class="ts" x="305" y="456" text-anchor="middle" dominant-baseline="central">97 entries, out-of-order dispatch</text>
+</g>
+
+<!-- Fan-out arrows to 6 ports -->
+<line x1="170" y1="470" x2="90" y2="540" class="arr" marker-end="url(#arrow)"/>
+<line x1="215" y1="470" x2="170" y2="540" class="arr" marker-end="url(#arrow)"/>
+<line x1="265" y1="470" x2="250" y2="540" class="arr" marker-end="url(#arrow)"/>
+<line x1="305" y1="470" x2="330" y2="540" class="arr" marker-end="url(#arrow)"/>
+<line x1="355" y1="470" x2="410" y2="540" class="arr" marker-end="url(#arrow)"/>
+<line x1="420" y1="470" x2="490" y2="540" class="arr" marker-end="url(#arrow)"/>
+```
+
+### Execution Port Box Pattern
+Compact boxes showing port number and capabilities:
+
+```xml
+<!-- Execution port with multi-line capability -->
+<g class="node c-teal">
+  <rect x="55" y="540" width="70" height="64" rx="6" stroke-width="0.5"/>
+  <text class="th" x="90" y="560" text-anchor="middle" dominant-baseline="central">Port 0</text>
+  <text class="tx" x="90" y="576" text-anchor="middle" dominant-baseline="central">ALU</text>
+  <text class="tx" x="90" y="590" text-anchor="middle" dominant-baseline="central">DIV</text>
+</g>
+```
+
+### Reorder Buffer (Pink)
+Wide horizontal bar at bottom showing retirement:
+
+```xml
+<g class="c-pink">
+  <rect x="40" y="670" width="530" height="40" rx="10" stroke-width="0.5"/>
+  <text class="th" x="305" y="694" text-anchor="middle" dominant-baseline="central">Reorder buffer (ROB) — 512 entries, 8-wide retire</text>
+</g>
+```
+
+### Memory Hierarchy Sidebar (Blue)
+Separate column showing cache levels:
+
+```xml
+<!-- Container -->
+<g class="c-blue">
+  <rect x="600" y="30" width="190" height="360" rx="16" stroke-width="0.5"/>
+  <text class="th" x="695" y="54" text-anchor="middle">Memory hierarchy</text>
+</g>
+
+<!-- Cache levels stacked vertically -->
+<g class="node c-blue">
+  <rect x="620" y="70" width="150" height="50" rx="8" stroke-width="0.5"/>
+  <text class="th" x="695" y="88" text-anchor="middle" dominant-baseline="central">L1-I cache</text>
+  <text class="ts" x="695" y="106" text-anchor="middle" dominant-baseline="central">32 KB, 8-way</text>
+</g>
+<!-- Additional levels follow same pattern -->
+```
+
+## Connection Patterns
+
+### Instruction Fetch Path
+Horizontal arrow from L1-I cache to fetch unit:
+```xml
+<path d="M620 95 L200 95" fill="none" class="arr" marker-end="url(#arrow)"/>
+<text class="tx" x="410" y="88" text-anchor="middle" opacity=".6">instruction fetch</text>
+```
+
+### Load/Store Path
+Complex path from execution ports to L1-D cache:
+```xml
+<path d="M250 604 L250 640 L580 640 L580 160 L620 160" fill="none" class="arr" marker-end="url(#arrow)"/>
+<text class="tx" x="415" y="652" text-anchor="middle" opacity=".6">load / store</text>
+```
+
+### Commit Path (dashed)
+Dashed line showing write-back from ROB to register file:
+```xml
+<path d="M550 690 L580 690 L580 445 L595 445" fill="none" class="arr" stroke-dasharray="4 3"/>
+<text class="tx" x="590" y="578" opacity=".6" transform="rotate(-90 590 578)">commit</text>
+```
+
+### Path Merge (Decode + µop Cache)
+Two paths converging before rename:
+```xml
+<line x1="390" y1="98" x2="430" y2="98" class="arr"/>
+<line x1="390" y1="175" x2="430" y2="175" class="arr"/>
+<path d="M430 98 L430 175" fill="none" stroke="var(--text-secondary)" stroke-width="1.5"/>
+<line x1="430" y1="136" x2="470" y2="136" class="arr" marker-end="url(#arrow)"/>
+```
+
+## Text Classes
+
+This diagram uses an additional text class for very small labels:
+
+```css
+.tx { font-family: system-ui, -apple-system, sans-serif; font-size: 10px; fill: var(--text-secondary); }
+```
+
+Used for:
+- Execution port capability labels (ALU, Branch, Load, etc.)
+- Connection labels (instruction fetch, load/store, commit)
+- DRAM latency annotation
+
+## Color Semantic Mapping
+
+| Color | Stage | Components |
+|-------|-------|------------|
+| `c-purple` | Front end | Fetch, Branch predictor, Decode |
+| `c-teal` | Execution | µop cache, Execution ports |
+| `c-coral` | Rename | RAT, Physical RF, Free list |
+| `c-amber` | Schedule | Unified scheduler |
+| `c-pink` | Retire | Reorder buffer |
+| `c-blue` | Memory | L1-I, L1-D, L2, DRAM |
+| `c-gray` | External | Off-chip DRAM |
+
+## Layout Notes
+
+- **ViewBox**: 820×720 (taller than wide for vertical pipeline flow)
+- **Main pipeline**: x=40 to x=570 (530px width)
+- **Memory sidebar**: x=600 to x=790 (190px width)
+- **Stage labels**: x=30, left-aligned, 50% opacity
+- **Vertical spacing**: ~80-100px between major stages
+- **Container padding**: 20px inside containers
+- **Port spacing**: 80px between execution port centers
+- **Legend**: Bottom-right of memory sidebar, explains color coding
+
+## Architectural Details Shown
+
+| Component | Specification | Notes |
+|-----------|---------------|-------|
+| Fetch | 6-wide, 32B/cycle | Typical modern Intel/AMD |
+| Decode | 6-wide, x86→µops | Complex decoder |
+| µop Cache | 4K entries, 8-wide | Bypass for hot code |
+| RAT | 180 physical regs | Supports deep OoO |
+| Scheduler | 97 entries | Unified RS |
+| Execution | 6 ports | ALU×2, Load, Store×2, Vector |
+| ROB | 512 entries, 8-wide | In-order retirement |
+| L1-I | 32 KB, 8-way | Instruction cache |
+| L1-D | 48 KB, 12-way | Data cache |
+| L2 | 1.25 MB, 20-way | Unified |
+| DRAM | DDR5-6400, ~80ns | Off-chip |
+
+## When to Use This Pattern
+
+Use this diagram style for:
+- CPU/GPU microarchitecture visualization
+- Compiler pipeline stages
+- Network packet processing pipelines
+- Any system with parallel execution units fed by a scheduler
+- Hardware designs with multiple functional units