Visual representation of graph grammar

A lot of the existing packages for graph grammars seem to have GUIs for writing rules, and in some of them that seems to be your only option.

Tonight I prototyped a way to export a graph grammar as a HTML page, with embedded SVG images of the left and right sides of each rule. Red shows deleted nodes and edges, or changed tags. Green shows new nodes and edges. To make the left and the right side match up, I inserted the missing objects on both sides and colored them white. I also copied over positions from right to left, so that the "neato" layout engine would have the same starting point.

(This is a portion of the rule 30 grammar.)

I'm increasingly unhappy with my choice of JSON; here's another reason why, because the JSON parser rewrites the order of the rules. I tried to sort the rules by which node labels they contained, which improved things slightly for this example.

One option that would keep a JSON representation is go from JSON object to a JSON list-of-objects:

[
  { "left":  "X[x]; P[x]; P1[x]; C[cursor]; X->C [h]; P->C[v]; P->P1[h]",
    "right": "X[x]; P[x]; P1[x]; C[x];      X->C [h]; P->C[v]; P->P1[h]; N[cursor]; P1->N[v]; C->N[h]" 
  },
   ...
]

Then it would be pretty easy to have "comment" or "name" as additional fields.

There are a ton of Javascript graph drawing libraries, although the ones I looked at were all two years old or more; I'm considering a similar version of this prototype that renders using one of those tools rather than SVG. Then it might be possible to make the page interactive.

The same code can be adapted to make a step-by-step illustration of the graph grammar. Here I show just the graphs with new nodes highlighted in green, but it should be possible to indicate where the rule matches as well.

It would not be too hard to have this be a Javascript-driven flipbook rather than a long page with every image on it.