Improve SVG diagrams for docs

freekmurze · claude · freekmurze · commit b45ce52ccaab · 2026-02-16T16:11:24.000+01:00
- Add system font stack (external SVGs can't inherit page font)
- Add "processing" label to server processing indicator
- Remove em dashes from diagram labels
- Tighten vertical spacing in sequence diagrams

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/docs/images/flexible-cache-timeline.svg b/docs/images/flexible-cache-timeline.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 560 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 560 132" fill="none" xmlns="http://www.w3.org/2000/svg" style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif">
     <rect x="0" y="8" width="300" height="42" rx="6" fill="#1f2937" stroke="#374151" stroke-width="1" />
     <rect x="300" y="8" width="150" height="42" rx="6" fill="#1f2937" stroke="#6b7280" stroke-width="1" stroke-dasharray="4 3" />
     <rect x="450" y="8" width="110" height="42" rx="6" fill="none" stroke="#374151" stroke-width="1" />
diff --git a/docs/images/grace-period.svg b/docs/images/grace-period.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 560 310" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 560 310" fill="none" xmlns="http://www.w3.org/2000/svg" style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif">
     <rect x="20" y="0" width="100" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
     <text x="70" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">BROWSER</text>
     <rect x="210" y="0" width="140" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
@@ -10,23 +10,24 @@
     <line x1="480" y1="28" x2="480" y2="300" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
     <line x1="74" y1="60" x2="272" y2="60" stroke="#6b7280" stroke-width="1.5" />
     <polygon points="268,56 268,64 276,60" fill="#6b7280" />
-    <text x="175" y="52" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
+    <text x="175" y="50" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
     <line x1="276" y1="100" x2="78" y2="100" stroke="#f3f4f6" stroke-width="1.5" />
     <polygon points="82,96 82,104 74,100" fill="#f3f4f6" />
-    <text x="175" y="92" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">stale response — instant!</text>
+    <text x="175" y="90" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">stale response, instant!</text>
     <line x1="284" y1="100" x2="472" y2="100" stroke="#6b7280" stroke-width="1.5" stroke-dasharray="4 3" />
     <polygon points="468,96 468,104 476,100" fill="#6b7280" />
-    <text x="383" y="92" text-anchor="middle" fill="#6b7280" font-size="11" font-style="italic">defer: regenerate</text>
-    <rect x="474" y="106" width="12" height="36" rx="2" fill="#1f2937" stroke="#374151" stroke-width="1" />
-    <line x1="476" y1="152" x2="288" y2="152" stroke="#6b7280" stroke-width="1.5" />
-    <polygon points="292,148 292,156 284,152" fill="#6b7280" />
-    <text x="383" y="144" text-anchor="middle" fill="#9ca3af" font-size="11">fresh result cached</text>
-    <line x1="20" y1="192" x2="540" y2="192" stroke="#374151" stroke-width="1" stroke-dasharray="2 4" />
-    <text x="280" y="208" text-anchor="middle" fill="#6b7280" font-size="10" font-style="italic">later — next visitor</text>
-    <line x1="74" y1="238" x2="272" y2="238" stroke="#6b7280" stroke-width="1.5" />
-    <polygon points="268,234 268,242 276,238" fill="#6b7280" />
-    <text x="175" y="230" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
-    <line x1="276" y1="275" x2="78" y2="275" stroke="#f3f4f6" stroke-width="1.5" />
-    <polygon points="82,271 82,279 74,275" fill="#f3f4f6" />
-    <text x="175" y="267" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">fresh response — instant!</text>
+    <text x="383" y="90" text-anchor="middle" fill="#6b7280" font-size="11" font-style="italic">defer: regenerate</text>
+    <rect x="474" y="108" width="12" height="30" rx="2" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="498" y="123" fill="#4b5563" font-size="9" font-style="italic">processing</text>
+    <line x1="476" y1="148" x2="288" y2="148" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="292,144 292,152 284,148" fill="#6b7280" />
+    <text x="383" y="140" text-anchor="middle" fill="#9ca3af" font-size="11">fresh result cached</text>
+    <line x1="20" y1="188" x2="540" y2="188" stroke="#374151" stroke-width="1" stroke-dasharray="2 4" />
+    <text x="280" y="206" text-anchor="middle" fill="#6b7280" font-size="10" font-style="italic">next visitor</text>
+    <line x1="74" y1="236" x2="272" y2="236" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="268,232 268,240 276,236" fill="#6b7280" />
+    <text x="175" y="228" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
+    <line x1="276" y1="272" x2="78" y2="272" stroke="#f3f4f6" stroke-width="1.5" />
+    <polygon points="82,268 82,276 74,272" fill="#f3f4f6" />
+    <text x="175" y="264" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">fresh response, instant!</text>
 </svg>
diff --git a/docs/images/regular-cache-expiry.svg b/docs/images/regular-cache-expiry.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 560 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 560 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif">
     <rect x="20" y="0" width="100" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
     <text x="70" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">BROWSER</text>
     <rect x="210" y="0" width="140" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
@@ -14,7 +14,8 @@
     <line x1="284" y1="92" x2="472" y2="92" stroke="#6b7280" stroke-width="1.5" stroke-dasharray="4 3" />
     <polygon points="468,88 468,96 476,92" fill="#6b7280" />
     <text x="383" y="84" text-anchor="middle" fill="#6b7280" font-size="11">cache expired, generate fresh response</text>
-    <rect x="474" y="98" width="12" height="36" rx="2" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <rect x="474" y="100" width="12" height="30" rx="2" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="498" y="115" fill="#4b5563" font-size="9" font-style="italic">processing</text>
     <text x="175" y="120" text-anchor="middle" fill="#6b7280" font-size="11" font-style="italic">browser waits...</text>
     <line x1="476" y1="144" x2="288" y2="144" stroke="#6b7280" stroke-width="1.5" />
     <polygon points="292,140 292,148 284,144" fill="#6b7280" />
diff --git a/docs/images/regular-vs-flexible.svg b/docs/images/regular-vs-flexible.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 560 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 560 220" fill="none" xmlns="http://www.w3.org/2000/svg" style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif">
     <text x="0" y="16" fill="#f3f4f6" font-size="14" font-weight="600">Regular cache</text>
     <rect x="0" y="28" width="340" height="34" rx="6" fill="#1f2937" stroke="#374151" stroke-width="1" />
     <rect x="340" y="28" width="220" height="34" rx="6" fill="none" stroke="#374151" stroke-width="1" />
