Component

Flow Diagram

An animated architecture diagram, with three layouts: a hub and its sources, a decision tree, a request from end to end. HTML, CSS and JavaScript — no framework, no build step, not a single external request.

The three layouts

The bar at the bottom is made of native controls. Switch the JavaScript off and you can still go from one diagram to another, and from dark to light: it is CSS. What the script adds is the movement — the dots travelling, the path lighting up, the links filling in.

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

THEME DARK

Diagram shown FLOW DECISION LATENCY

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