Split Architecture Diagram Hero Block for React

Edit NODES and EDGES at the top of the file. Each node has an id, a label, an icon, its corner x and y in the diagram's 358 by 170 box, and whether it's active; each edge joins two ids, and is drawn between their centres. FLOW is the edge the request travels along. Keep nodes on a grid, as here, three columns 135 apart and two rows 104 apart, so the edges run straight. INSPECTOR holds the card's numbers.

So their text stays readable. An SVG scales its text with the drawing, and on a phone 12px labels would shrink. Here the edges and the travelling dot are an SVG, and each node is a small HTML box placed over it in percent of the same 358 by 170 box: the layout scales with the canvas, while the labels keep their size at every width.

The text comes first in the source, so reading order and the tab order are the same on every screen; the canvas takes the first column on wide screens with lg:col-start-1 lg:row-start-1, and falls under the text below lg. The divider is the text column's lg:border-s with Guides marks="start" rules="none" sides={false}; on a phone the canvas gets its own top rule. The canvas has no frame: the rail and the divider are its edges.

The nodes and edges appear once, with CSS transitions, each delayed a little more than the one before through a CSS variable. The travelling dot is an SVG animateMotion along the flow edge's path, fading in and out at its ends, and it loops. Under reduced motion the transitions are off and the dot is hidden, since SVG animations don't follow that setting on their own.

The drawing and the inspector are hidden from them, and the figure carries a written description instead: Service topology: CDN to API, API to Queue, Queue to Worker, API to Cache, Worker to Cache, Cache to DB. Requests flow from API to Queue. It's built from NODES, EDGES and FLOW, so it changes when you change the diagram. The headline is the block's one h1, and the pill and both calls to action are links named by their text.

Yes. The nodes are placed from the inline start, and the SVG of edges flips with them, so in Arabic or Hebrew the CDN sits at the end and the request travels from the end toward the start, the way the page reads. The labels themselves don't flip.