Notes Regarding Diagrams as Syntax
2025-03-30
I currently use draw.io as my code editor and use a software pipeline to compile drawings to working code
to do this I transpile draw.io's save file format graphML to JSON
I compile the JSON to some existing language, say Python (or Javascript, or Common Lisp, or Odin, (WASM would be a target, if I knew enough about WASM), etc.)
then I get the existing language to do the heavy lifting of making the source code run on a computer
the "problem" with infinite canvases is: they're infinite
I want to create a bunch of layers and to navigate easily between them. Draw.io is unsatisfactory - the best I can do is create new tabs only in the X direction, but not Z direction (nor Y direction)
I want to draw 2 kinds of things
little networks that compose new blocks out of existing blocks
textual code (say, snippets of Python)
I want each layer to be not-busy, i.e. Rule of 7 (no more than 7±2 items-of-interest on a layer)
currently, I think that I want to double-click on a figure and dive into the internals of that figure, i.e. display a new canvas layer focussed on the internals of what I clicked on
if I imagine using an infinite canvas for this, I would expect the editor to maintain a stack of locations
{center point X zoom factor}. Something like: double click on an figure, canvas scrolls to other place on canvas and zooms in, then double-click ??? to snap back to exactly where I was earlier [this sounds a lot like clicking on a link in a browser, then hitting BACKSPACE to return to previous page, except that many browsers forget what I was looking at and at what zoom factor]Kinopio is a canvas tool that allows jumping to other canvases (‘/‘ command), but you have to explicitly enter a “back” link (another ‘/‘)
I conclude that an editor should ONLY edit. Things like relationships (i.e. semantics) should be divorced from the editor code. Maybe semantics should be some kind of plugin. In emacs-speak, they would be "modes" that you could program and load in as .el files, then enable/disable them.
relations that I find useful:
containment
relative position (NSEW, to right of, to left of, above, below, simple grade-school math relations on (X,Y), etc.)
connection - Shown as arrows on draw.io. Arrows can have 0 width and can be invisible.
touching, butted-together (long sides are at same position, more than 1 point of each at the same position)
intersection, e.g. "Ports" on the edges of a "Part"
lines join ("dot" in electronic schematics)
lines cross but do not join (hop over (arc), gap, simple Z position, lines cross without a "dot")
bounding boxes and center points
Jef Raskin, in "Humane Interface" gives a method of selecting figures that lie upon on another
a "roll" stack of figures that overlap at some (X,Y)
hit TAB to shift and rotate the items on the stack of figures at a certain (X,Y)
top-most figure on stack is "selected", other figures at that (X,Y) are not "selected", hit TAB to "select" next figure down
basic SVG has everything that I think is needed. SVG goes way beyond this basic level, but, I perceive that to be too much unnecessary complication.
rectangle
ellipse
line
text
group
groups are recursive, like Lisp lists. Groups contain figures or other groups.
PDF
See Also
Email: ptcomputingsimplicity@gmail.com
References: https://guitarvydas.github.io/2024/01/06/References.html
Blog: guitarvydas.github.io
Videos: https://www.youtube.com/@programmingsimplicity2980
Discord: https://discord.gg/65YZUh6Jpq
Leanpub: [WIP] https://leanpub.com/u/paul-tarvydas
Gumroad: tarvydas.gumroad.com
Twitter: @paul_tarvydas
Substack: paultarvydas.substack.com