Question

I have a RBAC structure stored in my database (a project built with Yii).

I would love to generate a graph to visualize the relationships between the items to see if I’m not making logical mistakes, and to show to other team members.

I was thinking to create a page that would generate a graph / tree. I think I can handle the server-side part but I have no idea how to generate the HTML/CSS (or image).

Nodes in the graph can have multiple children and multiple parents. Arrows are directed. Example:

I don’t mind using latest CSS3 and HTML5 tech since it will be only used by selected people.

Answer 1

I ran into similar concerns a while ago. The solution I finally came with is a little js library that perfectly did the trick, namely Dracula.

Here is a link to the library : https://github.com/strathausen/dracula

Considering your needs, all you’ll have to do is something like :

var g = new Graph();

g.addEdge('author', 'create');
g.addEdge('author', 'reader');
g.addEdge('author', 'admin');

// add here the other edges.

var layouter = new Graph.Layout.Spring();
layouter.layout();

var renderer = new Graph.Renderer.Raphael('#canvas', g, 400, 300);
renderer.draw();

For more infos, I’ll let you struggle with the documentation.

Hope it helps.

[ADDENDUM]

I would add that, generally speaking, the matter of displaying nodes and arrows is not of a big deal, using svg makes it near trivial. But things get complicated when you want to organize the display of the nodes with rules such as “try to minimize the number of crossing edges”, “display children below their parent”, etc which all need complex mathematics.

I don’t think that Dracula allows one to customize that kind of rules. Nevertheless, considering your comment, I think there may be a not-too-complicated way to make the layout looks like vertical tree, since it is an acyclic graph ( at least, it seems to be ). But then you will have to go through the making of your own library for this.