Replace Mermaid flow charts with a readable, dependency-free CSS step-flow

[mxinden-bot]

Why

Valentin noted that text in the flow charts sits behind the lines. Root cause: Mermaid centers each message label over its arrow, and the Client↔Server arrows cross the middle DNS lifeline, so labels land on top of that vertical line. A CSS "halo" didn't stick (Mermaid's own injected styles override it), and dropping DNS to a note (already reverted) lost the actor and looked worse. Even reordering participants only half-fixes it (the long alpn=h3 + IP hints (+ECH) label would still cross a lifeline).

What

Drop Mermaid for the two diagrams and render them as a small, dependency-free CSS step-flow: one row per hop, a → DNS / ↔ server badge plus the action, grouped by "first connection" / "second connection". No lifelines, so nothing can overlap.

Keeps all the substance:

• the DNS hop, the TCP+TLS-then-HTTP/2 path, the "only now does the client learn h3" beat, and the wasted second connection (Alt-Svc panel);
• the straight-to-QUIC/HTTP/3 first connection (HTTPS-record panel).

Bonus

Removes the ~1 MB Mermaid CDN module and its IntersectionObserver lazy-loader. The diagrams now render instantly with no JS and no third-party fetch, and they inherit the site's own fonts/colors.

Notes

• No changes outside the two diagrams + their CSS (and removing the loader script).
• I can't screenshot from here, so please eyeball it; if you'd rather keep Mermaid, the fallback option is reordering participants to Client, Server, DNS (only the two DNS arrows cross), but this version is the foolproof one.

🤖 Generated with Claude Code

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	savearoundtrip	b570540	Jun 09 2026, 11:02 AM