HTML/CSS Visualizing a RBAC Graph

Question 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.

Question 2

Just try with the following.,

Graphs are one of the most frequently used data structures,along with linked lists and trees. In a recent PHP project I needed to build a Graph structure to analyze some interlinked urls. The problem was of a simple nature, so rather than writing my own code, I went with the one available in the Pear repository.

The Pear Structures_Graph package allows creating and manipulating graph data structures. It allows building of either directed or undirected graphs, with data and metadata stored in nodes. The library provides functions for graph traversing as well as for characteristic extraction from the graph topology.

Also refer the following location : http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

Some Sample Codes :

<?php

require_once 'Structures/Graph.php';
require_once 'Structures/Graph/Node.php';

$nonDirectedGraph = new Structures_Graph(false);

$nodes_names = array('a', 'b', 'c' ,'d', 'e');
$nodes = array();

foreach($nodes_names as $node) {
    /* Create a new node / vertex */
    $nodes[$node] = new Structures_Graph_Node();

    /* Add the node to the Graph structure */
    $nonDirectedGraph ->addNode($nodes[$node]);
}

/**
  * Specify connections between different nodes.
  * For example in the following array, 'a-b'
  * specifies that node 'a' is connected to node 'b'.
  * Also refer to the figure above.
  */

$vertices = array('a-b', 'b-c', 'b-d', 'd-c', 'c-e', 'e-d');

foreach($vertices as $vertex) {
    $data = preg_split("/-/",$vertex);
    $nodes[$data[0]]->connectTo($nodes[$data[1]]);
}
?>

Question 3

What about using SVG? SVG can be styled by CSS, accessed by Javascript and embedded in HTML documents. And using a vector format seems to be adequate for Graph visualization as it has many advantages. Just one advantage - especially in web environment - is the smaller file size of large graphs compared to bitmap images.

For the graph visualization itself, Graphviz comes in mind. It is a graph rendering software / library that has been actively developed since 1988. It is able to render various types of graphs and export the resulting image to various image formats including SVG. It uses the so called 'dot language' to describe graphs. Have a look at the Graphviz project page to find many examples and documentation on the dot language.

Do you have experimented with dot on the command line yet? dot is a binary from the Graphviz package that reads files written in the dot language and renders them to the desired image format. It is a good starting point for experiments.

I have once used it for drawing PHP class diagrams dynamically. I've generated a .dot file in php and translated it to SVG using exec dot -Tsvg graph.dot

There's also a PHP wrapper library for GraphViz in the PEAR repositories called Image_Graphviz that is used in similar projects as yours.

Of course you'll have to make some layout compromises if you are working with a generic graph drawing library comparing to drawing them manually. But when going familiar with the dot language you'll achieve best results.

Question 4

If you can use Python on the server side, you could use Networkx to generate high-quality graphics and save them as SVG, PNG or whatever you like.