shadcn.io is not affiliated with official shadcn/ui
Diagram FAQ Block for Svelte
A centred identity-service FAQ whose first answer carries a sequence diagram with three lifelines and four numbered arrows, driven by a list of steps you can hover, focus or press.
Installation
Overview
An FAQ for Svelte with Ark UI whose first answer is a diagram. A centred header sits over a narrow band of six questions under a rule with + marks, each opened by a circled plus that turns into a cross. The first answer holds a sequence diagram in a framed figure with corner marks: three lifelines, your API, your app and the identity service, and four numbered arrows that show a token refresh. Beside it the four steps are buttons: hovering, focusing or pressing one darkens its arrow and fades the others, and pressing it again lets go. The diagram is drawn in CSS with logical sides, so in right-to-left text the lifelines and arrows mirror. It's built from Accordion and Guides, with your theme's tokens for every colour. For auth, payments and any product where one flow explains most of the questions.
FAQ
How do the steps and the diagram work together?
The diagram is decoration, hidden from assistive technology; the four steps carry the same words and are the real controls. Hovering or focusing a step lights its arrow and fades the rest; pressing a step pins it (aria-pressed) so it stays lit when the pointer leaves, and pressing it again unpins it. Nothing is pinned to start, so every arrow shows at full strength.
How do I draw a different flow?
Edit STEPS and LIFELINES at the top of the file. A step has an id, the short label on its arrow, a title and text for the list, gap (0 for an arrow between the first two lifelines, 1 between the last two) and toward, which is start or end along the reading direction. Three lifelines and four arrows fit a 320-pixel phone; a longer flow needs a taller figure, not a wider one.
Does the diagram work in right-to-left languages?
Yes. The lifelines are columns of a grid and the arrows use start and end, so the order of the three participants and the direction of every arrowhead mirror with the page. The labels on the arrows are code-like strings and stay as written.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.
How does it work with a keyboard?
Each question is a button inside its own h3 under the section's h2. Tab moves from question to question and, in an open answer, through the steps; Enter or Space opens a question or pins a step.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.