diagram-builder

Diagram Builder

Diagram-builder draws a diagram of any kind — a system architecture, a timeline, a slide-style presentation, a process flow, a comparison, a mind-map, a planner board — as nested boxes authored in plain YAML and rendered by a generic engine: no framework, no server, opens under file://. Its whole material is two primitives — a recursive section that ARRANGES and a component that CARRIES — and its work is to find the form that teaches THIS idea best and lower it into that geometry. Everything domain-specific lives in the data; nothing about a domain lives in the engine. Everything on the canvas invites the reader toward the centre: the layout centres its content, a click opens a bottom-centre panel, a chip spotlights a relation.

idea
 └─ document        the deck: title, subtitle, version, palette, pages
     └─ page        one act/view (also the ROOT section: its columns + sections)
         └─ section     a grid zone; nests other sections freely (a grid of grids)
             └─ component   a leaf: a card, a divider, a lane label, a declared hole
   filters (page-level only) light a relation across components

The governing definition (the anchor)

Internalize this before anything else. Every design decision is judged against it, and the adversarial critique at the end of the cycle is run against it:

A diagram is a semantic design tool: nested boxes, one inside another. Some boxes are sections — they group other sections or groups of components. Sections divide into columns, vertically and horizontally. Components expand horizontally and vertically — a merge on two axes: a span of columns plus a row-span of rows — and they sit in columns, or in cells flowing downward. The objective is compaction and symmetry: the canvas fills inside a centered width cap (max-width ≈ 1280px — a medium resolution, no horizontal scroll). It neither expands to arbitrary width nor leaves holes — full rectangles.