Architecture Flow Diagram Features Block for React

Edit HOPS at the top of the file: each hop has a name, a caption, an icon and ms, its time at the median. The total, each hop's share of the budget, the bar's segment widths and the sentence under the bar are all worked out from that list, so they always agree. The layout is built for five hops across.

The dot is drawn with SMIL animation inside each cell's SVG: each cell's dot starts 0.7 seconds after the one before and rests for the rest of a 3.5-second loop, so one dot seems to travel the whole path. It's hidden when the visitor prefers reduced motion, and the diagram reads the same without it. Delete the circle in Wire to remove it.

The diagram is an ordered list named "The request path". Each hop is a list item with a heading and a caption, and its time and share are a term and its value, announced as "Time spent at Edge, 6 ms". The wire, the chevrons and the bar are hidden from assistive technology, because the list says everything they draw.

Below md the five cells stack as rows: the icon and name at the start, the time at the end, on a vertical wire through the icons. The bar keeps its proportions without the names inside the segments, and the sentence under it names the largest hop. Nothing scrolls sideways at 320 pixels.

No, on purpose: a request path is a picture of order in space, so the diagram keeps its direction (dir="ltr") and reads Client to Store whichever way the page runs. Values such as "6 ms" and "15% of the budget" are wrapped in bdi so they keep their order.

The diagram is the feature, so the block has no call to action. Add a Shine Button to the header row if your page wants one there.