html-draft

# html-draft — Flat Engineering Blueprint Diagrams Generate one HTML page that renders a technical diagram in a strict flat-blueprint aesthetic — the look of a printed engineering specification sheet, not a marketing landing. **Stack:** Tailwind v4 via `@tailwindcss/browser` CDN for layout + utilities, D3 v7 via jsDelivr CDN for SVG-based diagrams (nodes, connectors, layouts, animations). **Use this when** the user wants an architecture diagram, system flow, technical spec sheet, or component map as a standalone HTML artifact (suitable for slides, reports, exports). **Don't use this for:** - Inline schemas inside markdown documents — use a mermaid renderer instead - Newspaper / reading-first single-column pages with monospace ink-on-cream feel - Multi-section interactive explainers with pill navigation ## Design philosophy Precise. Objective. High data-ink ratio (Tufte). Every pixel earns its place; nothing decorative. The stack is modern (Tailwind + D3) but the output looks like a printed engineering doc. ## Visual rules ### Flat, outlined, monochrome - **No** drop shadows, gradients, glassmorphism, blur, rounded buttons - 1px or 2px solid borders define structure - White content blocks on a light-gray canvas - Accent: black, or a single semantic color (red for error, etc.) used sparingly - Do **not** import a Tailwind component library — pure utility classes only ### Design tokens (declared once via `@theme`) ```css @theme { --color-c-bg: #f8fafc; /* p...