Strange Loop

Sept 30 - Oct 2, 2021


Union Station


St. Louis, MO

Register for 2021!

Diagrammar: Simply Making Interactive Diagrams

Programmatically creating technical diagrams is powerful. A diagram author can make repeated patterns, create reusable functions, position elements exactly, and most importantly, allow user interaction. However, much of this power is only available to career programmers, since it is gated behind the complexity of things like SVG, CSS, JS, and user input.

Diagrammar is a tool for creating interactive diagrams using Elm, aiming to be much simpler, while retaining the power of a full programming language. It was designed for authors making online STEM courses at Brilliant. The course content is particularly well-suited to the programmatic approach: many similar, technical diagrams with numerous opportunities for shared toolkits and styles.

In this talk, I will give you a quick tour of Diagrammar and its primitives, share ideas for designing simple, learnable tools, and tell you what we've learned from authors creating thousands of diagrams across dozens of courses.

Pontus Granström

Pontus Granström

Namna, Brilliant

I design and implement interactive STEM courses at Brilliant, as well as the tools used to make them. I've previously studied music composition and physics, taught university math, and made tools and visual effects for games at Ubisoft. I love learning and teaching, I still dabble in music, and I have a deep interest in thoughtful and unique game design.