Keyboard DAG Editing
Directed Acyclic Graphs or DAGs are an important data-structure for representing any kind of processing pipeline.
They turn up in audio applications, from modular synthesisers to Pure Data patches. (As long as there are no feedback loops.) They are used in Machine Learning pipelines. In continuous integration and delivery of software and other business processes.
Something that I've long thought about are different ideas for editing DAGs. Typically we use custom editors highly coupled to a specific application. Mostly these are variants of drawing boxes and arrows. Or "node based" editors.
But I'm always fascinated by the idea of generic editors for particular data-structures. When we decouple the editor and the structure from the particular application, we unlock a lot of potential value as we can then quickly think of applying the structure in new contexts.
We have these for text. (Most code editors handle multiple programming languages. Even word-processors aren't specific to "novels" vs "business letters".) And image editing. And spreadsheets for grid or table-shaped data. But rarely for other data shapes.
I've played around with writing my own generic boxes and arrows type editors. But one thing that I don't particularly like is having to use the mouse. It's not that I dislike the mouse in itself. It's that anything that forces a lot of switching between mouse and keyboard gets frustrating. And in my experience, much data-flow DAG editing involves a LOT of backwards and forwards between the mouse and keyboard.
Wouldn't it be great if we could have a simple, purely keyboard way of editing DAGs?
Well DAGs often DO have text representations. Graphviz is the popular open-source library for visualising DAGs and is based on the DOT text format. Pure Data has its own text-based file format.
But such text files aren't intended for humans to read or follow. They don't show the graph structure clearly. And editing them often requires you to remember arbitrary IDs for nodes. These formats are also tightly coupled to the specific application.
I'd like something which feels like a simple text editor, that is completely keyboard controlled, and which nevertheless lets me clearly see, understand and edit the DAG structure.
So the other day, I had some thoughts and set down to vibe-code a concept demonstration.
The main "insight" is to borrow a multi-column paradigm from spreadsheets. Arrow keys are fine for navigating a 2D grid of cells. And while a DAG is NOT a grid, we can nevertheless overlay a DAG onto a grid relatively "efficiently". By which I mean, we only need as many columns as our maximum number of parallel paths through the graph. And we can often squash multiple paths into the same column as long as they are not overlapping.
We treat a column in the grid a simple sequence of nodes. Each automatically connected from the one above. We use a specific key shortcut, ctrl and "+" to fork a second sequence. This moves into a new empty column. We also have a way merge a sequence back into another sequence. This starts by "grabbing the output" from a node, with ctrl+Return. And then pasting it onto another node with ctrl+v where it is treated as a second input.
With these three extra key controls - fork, grab output and paste input; and navigation within the grid using Shift+arrow keys - we have the ability to build up our DAG with simple keyboard presses.
The final requirement is to delete nodes and connections. Ctrl-backspace deletes a node. While deleting individual connections requires a pop-up "palette" opened with ctrl+"." We can navigate within this palette with arrow keys and delete unwanted connections with the backspace key.
So this is just a first experiment. It's buggy and somewhat klunky but you can play with it and get a feel for using it here : DAGEdit. When the code is in better shape and some of the more egregious bugs are ironed out, I'll make it available.