Diagrammar: Simply Make Interactive Diagrams
summary
A lightweight diagramming language built in Elm generates precise, parametric visuals by treating every image as a composable diagram and every lesson as a pure function from an input value to a diagram. It exposes primitives like circle polygon row column plus transforms and slider and locator inputs (and a stepper for time), demonstrates recursion with a Sierpinski example, enforces no hidden state, and powers thousands of diagrams across dozens of Brilliant courses, producing consistent, interactive visuals that work in production.
AI-written summary · about
chapters (11)
- 0:00Start
- 3:20Plotting Diagramming
- 18:11Clear over Concise
- 20:06The right language
- 26:11Curated building blocks
- 27:54Curated Style
- 30:16Tactility
- 31:05Consistency
- 31:51Visual Questions
- 33:27Algebra → Diagram
- 34:24Wrap-up
related talks
41mBuilding a Graphical IDE in Elm/Purescript
21mDoodle-Driven Development
23mPicture combinators and recursive fish
25mA Picture Worth a Thousand Programmes
40mSketch-n-Sketch: Interactive SVG Programming with Direct Manipulation
15mDraw me a software or the art of diagrams that stick in the mind
39mEscher in Elm: Picture combinators and recursive fish
45mA Picture is Worth 1000 Lines of Code