Diagram Kit

The eleven diagrams that show up most in decks, explainer pages and product tours, all described as data: you pass nodes and relationships, the component handles layout and the entrance. They share one animation contract — links and outlines are traced in as strokes, nodes pop in following the topology, and hovering or focusing a node keeps only its related paths lit while the rest fade, with a tooltip for extra detail. The DiagramKit frame provides the title, description, legend and play / replay control, and each diagram is reached as a static property such as DiagramKit.Venn. Every diagram is an SVG whose viewBox scales to the container width, and CJK labels wrap automatically.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<DiagramKit/>

    </div>
  );
}

Installation

Usage

import { DiagramKit } from "@/components/ui/diagram-kit";

<DiagramKit title="How the order hub routes work" legend={[{ label: "Inbound" }, { label: "Outbound" }]}>
  <DiagramKit.HubRouting
    hub={{ id: "hub", label: "Order hub", detail: "About 1,200 orders a day" }}
    spokes={[
      { id: "web", label: "Website", side: "in" },
      { id: "store", label: "Store", side: "in" },
      { id: "wh", label: "Warehouse", side: "out" },
      { id: "cs", label: "Support", side: "out" },
    ]}
  />
</DiagramKit>;

<DiagramKit trigger="mount" accent="#0ea5e9">
  <DiagramKit.Venn
    sets={[
      { id: "design", label: "Design" },
      { id: "eng", label: "Engineering" },
      { id: "biz", label: "Business" },
    ]}
    intersections={[
      { sets: ["design", "eng", "biz"], words: ["Usable", "Buildable", "Profitable"] },
    ]}
  />
</DiagramKit>;

Each diagram also works on its own without the DiagramKit frame; it then plays as soon as it mounts.

Props

DiagramKit

Every diagram also takes interactive?: boolean (default true: hover / focus highlighting and tooltips), label?: string (the SVG's accessible name) and className?: string. The tables below list only each diagram's data props; the shared node type DiagramNode is { id, label, detail? }.

DiagramKit.HubRouting

DiagramKit.SequenceLanes

DiagramKit.CycleBuild

DiagramKit.TimelineNodes

DiagramKit.RadialBranches

DiagramKit.FunnelAbsorption

DiagramKit.TierPyramid

DiagramKit.AnchoredCallouts

DiagramKit.BranchReveal

With interactive={false} the whole tree is expanded and cannot be toggled.

DiagramKit.QuadrantPositioning

DiagramKit.Venn

Also exported by name: wrapText (CJK-aware line-wrap estimation), DIAGRAM_SERIES and all of the types above.

How it works

• Shared animation contract: link and outline pathLength goes from 0 to 1 (easing [0.65, 0, 0.35, 1]), and nodes scale up from 0.6 with a fade on a spring (stiffness 320, damping 26), entering in topological order stagger apart
• Timing variables: --wb-diagram-draw (700ms), --wb-diagram-stagger (90ms), --wb-diagram-accent (#3b82f6) and --wb-diagram-dim (0.25, the opacity of everything else while highlighting); props take precedence over the variables
• Replay: the frame's Replay button remounts the diagram so the whole entrance runs again from the start
• CJK wrapping: labels live in SVG text and wrap by estimated character width (CJK can break between any two characters, Latin text breaks between words, and punctuation is kept off the start of a line); text beyond the line limit ends in an ellipsis
• Venn: the dashed outlines are traced in, then the circles spring together from apart, and the overlaps light up via clip-path fills; intersection words cross-fade every 1.8 seconds
• Funnel: particles with a deterministic spread are drawn in from the top and some are "absorbed" at intermediate stages, matching each stage's drop-off; each stage shows its conversion rate from the previous one on the right
• Anchored callouts: the underlying content can be anything; the component measures where it sits, splits labels between the left and right sides without overlapping, and connects each one to its anchor with an elbow leader line

Accessibility

• Each diagram's SVG has a title and desc, plus an sr-only structured text alternative (a list or table) so screen readers get the full data
• Nodes are focusable with Tab, and focusing one highlights its related paths just like hover; keyboard focus also draws an outline
• Branch reveal nodes are role="button" with aria-expanded, toggled with Enter or Space (Enter during IME composition is ignored)
• Quadrant items can be dragged, or focused and moved with the arrow keys (hold Shift to move by 10)
• Tooltips are purely visual (aria-hidden); the same information is in the sr-only text
• When the user has turned on reduce motion in their system settings, every diagram shows its final state straight away: no stroke tracing, no node pop-ins, no particles or pulses, and the Venn intersection words do not rotate