#Data Visualization (1)

Diagram Design: Editorial Diagram Taste as 45 Visual Types and 32 Machine Verifiers

Editor's takeWhat is most worth stealing is that taste is decomposed into three decidable machine contracts: color as semantic roles plus a contrast contract (verify-contrast.py computes WCAG for every role against the background it actually sits on, compositing translucency first), geometry as a 4px grid plus per-diagram budgets of at most 9 nodes, 12 arrows and 2 accent elements, and numbers as data-value / data-carry / data-status declarations in the HTML that 32 verify-* scripts recompute. Measured locally: change one delta in the shipped waterfall example from −38 to −36 and verify-waterfall.py immediately reports that bar 6 'FY26 plan' declares 236 while the walk arrives at 238; mermaid_extract.py on the 9-node fixture prints a node and edge census, hub degrees, entry and terminal nodes, collapsible groups and budget flags; the adversarial Excalidraw fixture's 'IGNORE ALL PREVIOUS INSTRUCTIONS' survives only as an escaped inert label while its two links and one embed land in the discarded list. The limits are stated just as honestly: the README concedes output quality depends on the model, the same prompt can lay out differently twice, and the result is not a diffable source format — for docs that live in Git and change every sprint, Mermaid is still the better fit; PNG export needs a one-time Playwright plus Chromium install; the 9-node budget means complex systems must be split into overview plus detail; and the 210 pre-baked examples were built under an earlier skin, with regeneration an open v5.1 task.

Cathryn Lavery's diagram-design (MIT, 54,318 stars) turns one sentence of natural language into a self-contained HTML+SVG editorial diagram: 45 visual types each with its own reference, semantic patterns chosen before layout; six mandatory connector rules, a 4px grid and a per-diagram budget of at most 9 nodes make taste decidable; .drawio / Mermaid / Excalidraw sources are extracted, never rendered, then redrawn through four dials (format, size, detail, audience) with a fidelity ledger; every diagram's HTML carries a data-* metadata contract that 32 verify-* scripts audit number by number and line by line.