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.

This is exactly my cup of tea. So of course, I started excitedly skimming through to look for the part where they show the graphical programming environment they came up with to build these diagrams (because of course I would say that is the obviously correct solution, hahaha) and then.. Elm. It's always Elm.

@Ivan Reese I have created a graphical programming environment prototype a few years ago (for real work, the goal was not to be shiny and simple). So why should I even look up what is Elm? 😄

Don't get me wrong — I think Elm is cool. I just find it funny how many times I've seen someone do basically this exact project (a tool of some sort for building little interactive widgets) and choose Elm.

In fact... yes. I have recorded some clips, uploaded to YouTube but it's just as rubbish as the code... I am a worker, not a salesman.

I appreciate the use of color, and the emphasis on making concrete data visible and manipulable at all times.

Yep. When you edit the languages and the data in the same graphical editor because the language is just the same data. The difference is that the DSL items are used by the runtime. ... and the whole thing was hand made POJO

@Lorand Kedves Really? Did you expect something more than talking to yourself? Stop wasting your time and teach me Java.

@Giskard Reventlov I don't understand your comment and it seems unfriendly. Please, clear + friendly.

@Giskard Reventlov Never dared to think of that as a goal, but challenge accepted. ASM, BCEL dropped for the first glimpse, trying Javassist. This thing gets really weird... @Kartik Agaram "The road to hell is paved with good intentions" - sometimes your best intentions to my hell, mine to yours. This tension is the heart of all fundamental research: either get partners via clear explanations built upon shared terminology or go ahead, drop and rebuild even those languages. In this case, the "no lifeguard on duty" sign is miles (meaning, decades) behind. There is nothing "friendly" about seeing coming true, statement by statement, or knowing the role IT plays in it... So, true. I am just talking to myself. Sorry.