"Diagrammar: Simply Make Interactive Diagrams" by Pontus Granström (Strange Loop 2022)

Diagrams are crucial for communication and learning in STEM fields. Creating them involves repeated patterns, consistent components, exact positioning, and, ideally, user interaction. A programming language has right the tools to do all of the above, but much of its power is only available to career programmers, gated behind the complexity of things like SVG, CSS, JS, and handling user input.
Diagrammar is a tool for creating interactive diagrams, that aims to be much simpler, while retaining the power of a full programming language (Elm). It was designed for making online STEM courses at Brilliant, and we make full use of this power: parametric reusable diagrams, authors sharing toolkits and styles, precise positioning -- and any diagram can be interactive!
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
Namna, Brilliant
@pnutus
I direct and design interactive courses and tools for STEM at Brilliant. I previously studied music composition and physics, taught university math, and worked on tools and visual effects at Ubisoft. I love learning and teaching, I still dabble in music, and I have a deep interest in thoughtful and unique game design.
------- Sponsored by: -------
Stream is the # 1 Chat API for custom messaging apps. Activate your free 30-day trial to explore Stream Chat. gstrm.io/tsl

[@dwylhq874]

Really wish this was Open Source as it would be game-changing to allow everyone to both learn STEM and Elm! 🙏

[@dwylhq874]

This is such a great showcase for `Elm`! Couldn't imagine building this _reliably_ in any other programming language. Functional + Strongly Typed with _excellent_ compiler error guidance. Truly Brilliant! 😍

[@SaMusz73]

Very nice to discover Elm as the building block for this interesting tool.

[@AnythingGodamnit]

Fantastic looking tool, and wonderfully presented! I can only hope this is open-sourced 🤞 Also, am I the only one who goes into conniptions seeing code formatted like your examples 😱😂

[@carl8703]

The list of basic building blocks seems very similar to those used for openscad, which tries to do similar visualizations, but in 3d. I wonder if the developer has had inspiration from their approach, or if both projects could benefit from studying the differences that exist between their interfaces?

[@RobertLugg]

It's not clear what the development interface is for this tool. OpenSCAD has a great immediate rendering. I also like their "Modifier Characters" which simplify debugging. I had assumed that booleans operations were a requirement, but they didn't showcase any for Diagrammer. It would be nice to implement in both languages.

[@dinoscheidt]

7:44 this whole thing looks like SideFX Houdini Scripting, CSS Flexbox / Grid and ReactJS JSX syntax had a child. Would really like to know what the exploration process was to get from imperativ click UI for diagrams to deciding to use Elm etc. Very impressive result!

[@Xoque551]

Very impressive!! I can't wait to try this out!

[@ElioStalteri]

is Diagrammar open-source?

[@mskiptr]

Seems like it's only internal for now: Nitter: pnutus/status/1575851068889583618

[@swagatochatterjee7104]

It seems no. It would be very cool if it were.

[@Favmir]

I think they only do business with corporations.

[@sofia.eris.bauhaus]

it doesn't look like it is. what a waste 😕.

[@trimforspeed]

This look very nice. Is this tool available outside of Brilliant?

[@gilmoretj]

Pontus, Thank you for introducing us to Diagrammar. It is available as FOSS or can it be downloaded for personal use? I am aware Brilliant have a GitHub account but there is no repo for Diagrammar.

[@PerryWagle]

Is this worth watching if you don't then get to go off and run it?

[@swagatochatterjee7104]

I think this gives us an insight into how the tool works. Nothing more. I checked Haskell diagrams too. It is a tad bit more complicated than this. Lastly, they showed us only the primitives. They certainly have a way more complicated arsenal of libraries which helps them create all sorts of diagrams.

[@KingJellyfishII]

I thought the same. It's such a shame that a useful tool is not released to the public in one way or another.

[@GordieGii]

Is it worth watching TED if you don't then go off to Africa and dig wells?

[@seismicdna]

now this is epic

[@frechjo]

it was brilliant.

[@doBobro]

Brilliant talk!

[@ronnodas]

The comparison shouldn't be with svg or p5, but with something like pgf/tikz. Does anyone write SVG by hand?

[@DemianFerreiro]

This is a Brilliant library

[@imflash217]

this is just awesome......the other open-source tool with very similar ability i knew of was by 3Blue1Brown.......superb talk.

[@sahildawka5826]

I wonder what it would be like with descriptive image generators like Dall-e for more freedom of primitives

[@mrdmajor]

Bret Victor talk from 2013 - kzbin.info/www/bejne/m5eVm6Ogiap1a7c 🤔🤯

[@gomezmario.f]

"Aesthetically challenged" has to be my main takeaway from this talk.

[@Snorehog]

♥