Writing Diagrams (Incl. Mathematical Diagrams)

Continuing an occasional series of posts on approaches to “writing” diagrams in a textual form and then letting the machine render them, here are some recent examples that caught my eye…

Via this Jupyter notebook on inverse kinematics, I came across Asymptote, “a standard for typesetting mathematical figures, just as TeX/LaTeX is the de-facto standard for typesetting equations” (file suffix: .asy). The language uses LaTeX for labels, and is a hight level programming language in it’s own right – which means is can do calculations in it’s own right as part of the diagram creation process.

Asymptote is also available via IPython magic, as demonstrated in this Asymptote demo notebook:

The inverse kinematics notebook is also worth reviewing in a couple of other respects. Firstly, it demonstrates embedding of another “written diagram” approach, using Graphviz:

One of the easiest ways to use Graphviz scripting in Jupyter notebooks is via some IPython Graphviz magic.

It also demonstrates how to use Sympy to to “implement” equations relating to the diagram and then generating animations based on them. (I still think it would be nice if we could unify the various maths rendering and calculating scripts.)

Way back when I learned to programme, I remember being given “railroad diagrams” (though I’m not sure they were called that? Syntax diagrams, maybe?) that described the programming language grammar defined in BNF in a visual way. Here’s a tool for generating them:

It’s a bit shiny, and a bit of pain that it doesn’t just take BNF. On the other hand, this Railroad Diagram Generator looks far more powerful:

Unfortunately, it looks to be web only and there’s no source. However, if you’re okay running Java, here’s an alternative – Chrriis/RRDiagram:

I did find a Python railroad diagram generator, Syntrax [code], but it didn’t accept BNF.

Along similar lines to the blockdiag tools I’ve described before is the purely in browser mermaid.js.

Supported chart types include flowcharts, sequence diagrams and Gantt charts.

Finally, another Grammar of Graphics style charting language – Brunel – for generating d3 output (among other things?). It can be used in notebooks, but it does require Java to be installed (as you might expect of something with an IBM relationship…?!)

PS although I think of writing diagrams more in the sense of generating rendered diagrams from text (which makes generating the diagram reproducible and maintable), these are maybe also relevant as a capture step:

• WIRIS hand – write a maths equation in the browser and generate a text rendering of it [demo];
• along similar lines, the MyScript Math API [demo];
• Mathpix API – generate text version of handwritten equation in an image (presumably can also capture print formatted equations?). Wrappers for the API exist, e.g. Convert hand-drawn equations to LaTeX with the mathpix [R]package’;
• if you prefer things a bit more raw and research grade, Glyphoid/math-handwriting-lib [demo].