Skip to content
vxvx
GitHubRSS

The diagram kit

Diagram draws one value of Picture: boxes, arrows between them, notes and frames. The landing’s picture uses it; the pages imported from packages/vx/docs still draw with Mermaid. It renders SVG into the page when the site is built, so the picture is there with no script, in both themes, and at any width. The data is documented in packages/vx-docs/src/components/guide/diagram/README.md; this page renders each part, and packages/vx-docs/tests/diagram-kit.test.ts reads what it built.

Boxes and arrows

Section titled “Boxes and arrows”
^buildutils#buildui#buildapi#buildcache hitapp#build
Tones: accent is the one the text is about, muted is skipped, danger is wrong.

Timelines

Section titled “Timelines”
utilsbuilduibuildappbuildapibuildworker 1worker 2
lanes() turns workers and their bars into boxes, one row per worker.

Notes and frames

Section titled “Notes and frames”
a framereadsapp#buildsrc/index.tsbanner.txta note, in the tone it needs
A frame groups boxes; a note says what a picture cannot draw.