2026-10-06 — Themed diagram guide and component architecture diagram

The adaptive diagram pipeline introduced on 2026-09-08 now has a maintainer guide, and the React component architecture diagram is generated by it instead of being drawn inline.

Changes

  • New page Adaptive themed diagrams, listed in the navigation. It covers the files kept per diagram, the registry in site-nextjs/scripts/build-diagrams.mjs, pnpm diagrams:generate and pnpm diagrams:check, how Mermaid CLI and Puppeteer find a browser, the six node class names that follow the theme, and where the docs site and the Next.js app swap in host SVGs.

  • The guide notes that Vercel builds (pnpm build:vercel) do not run diagrams:check, so maintainers run it locally (or through pnpm build) before pushing diagram changes.

  • The component architecture diagram moved from an inline Mermaid block to docs/modules/nextjs/images/diagrams/react-component-architecture/. It is registered as a docs-only diagram (publish: false), and its node layers and subgraphs use the theme class names, so it now follows light and dark mode like the HCI diagrams. The 2026-09-08 note said this diagram already used the pipeline; this change makes that true.

  • The generator now also themes subgraph titles (two new stylesheet bindings in build-diagrams.mjs), which the HCI diagrams never needed because they have no subgraphs. Their manifests (.theme.json) gained the two bindings; their SVGs did not change.

  • The old standalone source docs/modules/nextjs/images/React Component Architecture-2025-04-13.mmd became the canonical .mmd in that folder.

  • Getting started, Tooling (Node / pnpm) and both HCI pages link to the guide.

  • README.adoc shows badges for the docs site, the Deploy to Vercel workflow and the live site.