Please note: While the bounty is no longer available, I\'m still keen for anyone with an answer to this question to contribute; I\'m still watching it, and I\'m
Who need's a backend? Here's a working prototype using HTML/CSS/JS:
http://jsfiddle.net/RuvE6/6/
Just enter the RCC8 code syntax in the field and hit the button!
Some current limitations:
Edit: How it works
Basically, there are two families of relationships shown with these diagrams:
There are then sub-types or variations, like:
Both of the basic concepts are kind of baked into the HTML rendering world:
I handle the variations with special classes that (rather crudely) wiggle margins around to accomplish the desired layout:
(child has negative top margin to touch parent)
(a wrapper is added to trigger CSS on the children - the second element has negative left margin to overlap the first.)There is some static markup commented out in the jsfiddle showing the structure I started with.
To complete the functional loop, there is a bit of code that parses the RCC8 statement into A {XX} B parts, and attempts to render the necessary markup for each part. It checks as it goes to not duplicate regions. I also go through afterwards and set the heights of all sibling the same, which ensures they will overlap and/or abut properly.
This code is really just a start, and it has it's conceits. It's basically a linear diagram, which means it doesn't, for instance, handle cases where there are complicated adjacencies, like this:
A {EC} B, C {EC} B, D {EC} B
These might be handled be smarted JS parsing and more complicated CSS, but probably quickly venture into the realm of more force-directed layouts (a smarter bubble chart, for instance).