Towards Diagram Compilation

Towards Higher Level Syntax for Programming Languages 2025-12-01-1

Paul Tarvydas

Jan 01, 2025

Experimenting with ideas for compiling diagrams to code…

Diagram

This diagram was drawn using draw.io[1].

Can I (or anyone else who’d like to help) compile these diagrams and generate, say, Javascript code from them?

Each top-level rectangle should generate a class.

Maybe the diagrams should be transpiled into markdown format, then we could transpile the markdown files into Javascript class definitions? Hmmm.

For example, something like

...

Culling

Here is the culled graphML for the above diagram.

Draw.io saves diagrams in graphML[2] format.

The raw graphML file contains tons of graphical information. I removed that information and left only the stuff that’s “interesting” semantically. I built the culling tool using 0D[3] and Python. The tool is currently WIP, but, I would be glad to share it.

I originally used OhmJS to do the culling, but, found that culling one of my bigger diagrams used up too much memory on my development machine. So, I wrote a small stream-based-parser in OhmJS and transpiled it to Python. The Python version doesn’t build an AST in-memory, so it doesn’t need as much memory.

The original .drawio file is some 140 lines long and contains some very long lines due to “style” information, most of which can be discarded. The culled version is only 40 lines long.

I discarded too much information. It looks like I need to keep some attribute information for comments and for shadowed rectangles and (x,y,w,h) information for the rectangles.

I probably need to use exhaustive search code to unwind the containment relationships between the boxes. For example, I need to know that the “port” rectangle is contained inside the Message rectangle.

To do this, I need to keep (x,y,w,h) graphical information for the rectangles.

I’ve done this kind of searching before using high-school math (point containment and figure intersection) using Prolog. Other languages could easily calculate these relationships using looping code. I used Prolog because I knew Prolog and I like its concise syntax for writing exhaustive search patterns.

I guess that one could use an XML parser library to breathe this culled code into a program. I have done this before using OhmJS[4] because OhmJS was handy and I don’t have any experience using XML parser libraries in any programming language. Using OhmJS makes it easy to change my mind about what I want to discard and what to keep. For example, at this moment, I see that I need to keep (x,y,w,h) information in the output. I would simply edit the t2t .grammar and .rewrite files to rewrite that info in some other form.

The ‘parent=“1”’ information looks redundant and useless and can probably be discarded. It doesn’t provide containment information - that will need to be calculated.

The culled information can be rewritten using t2t[5] into JSON. Would that make things any easier?

Bibliography

[1] Draw.io from https://app.diagrams.net

[2] GraphML from http://graphml.graphdrawing.org

[3] 0D from https://github.com/guitarvydas/0D

[4] OhmJS from https://ohmjs.org

[5] t2t from https://github.com/guitarvydas/t2t

Paul’s Substack

Discussion about this post