Flow Diagram Workflow Block for React

The steps are STEPS at the top of the file: each has a name, a lucide icon, a one-line summary, substeps and the tool it uses. The flow is a six-column grid on wide screens, so keep six, or change md:grid-cols-6 and the percentages in the loop bracket (start-[calc(100%*2.5/6)] and w-[calc(100%/6)] place it over the third and fourth columns). The bracket is drawn by hand, so point it at any two neighbouring steps by changing those two numbers.

Nothing is hover-only. The node is a real button, so keyboard focus opens its card the same way a pointer does. The sub-steps are also a list inside each step: read out by screen readers on every screen, shown in full on a phone, and shown on any touch screen, where hover doesn't exist. The card is a convenience for wide screens with a mouse, not the only way to the text.

It's an ordered list with six items, each with an h3 for the step's name. The node button is named by that heading and described by its list of sub-steps, so it reads "Review, button, an editor reads it against the brief…". The arrows, the line and the loop bracket are decorative and hidden; the loop is stated in words, in Review's summary and in the caption under the figure.

It stops being a row. Below md each step becomes a row of its own on a vertical rail, with the node at the start and its text at the end, and the sub-steps are always visible. The arrows between nodes and the bracket over the row are for wide screens only. Nothing scrolls sideways at 320 pixels.

Yes. The row, the bracket and the arrows are laid out with logical properties, so the flow runs from the right, the arrows turn around and the loop bracket still spans Review back to Draft.

The header and the figure fade up once on load, and the hover card fades in when it opens. With reduced motion the entrance is skipped. The flow itself doesn't animate: no arrow travels along the line.