Component

Flow Diagram, without JavaScript

This page is the previous one, save for one detail: flow-diagram.js is not loaded. All three diagrams are shown, the control bar changes diagram and theme, the keyboard works. What is missing is the movement — and nothing else.

The three layouts

The three buttons are <input type="radio"> elements and the switch is a checkbox: changing diagram and changing theme are written in CSS, with :has(). The curves are <svg> elements stretched to their box, so they stay on their anchors at any size. None of that waits for a script.

Form Sign-up page
Payments Stripe
Files R2
Dashboard D1
Emails Resend
Worker Processing
Sign-up incoming
Known account? if/else
Payment received? if/else
Create the account
Open access
Chase up
Client Browser
15ms
Edge Worker
2 000 ms
Cache KV
Database D1
Payment Stripe API

Request failed · 2,015 ms in total

Diagram shown

One diagram, at another scale

Without a control bar, the component shows the diagram it is given, and nothing else. Here there are only two sources and one target, and the scene runs at --fd-font-size: 11px: no other value has been touched.

Form Sign-up page
Payments Stripe
Welcome Resend
Worker Processing