HTML / CSS Visualization of RBAC Graphics

Question

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

I would like to create a graph to visualize the relationships between the elements, to see if I'm not mistaken, and to show the other team members.

I was thinking of creating a page that would create a graph / tree. I think I can handle the part on the server side, but I don’t know how to create HTML / CSS (or image).

Nodes on a graph can have multiple children and multiple parents. The arrows are directed. Example:

I am not opposed to using the latest CSS3 and HTML5 technologies, as it will only be used by select people.

Answer 1

I ran into similar problems a while ago. The solution I finally came up with is a small js library that did a great job of this, namely Dracula. A.

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

Given your needs, all you 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 information, I will let you deal with the documentation.

Hope this helps.

[ADDITION]

I would add that, generally speaking, the question of displaying nodes and arrows doesn't really matter, using svg makes it almost trivial. But things get complicated when you want to organize the display of nodes with rules such as "try to minimize the number of intersecting boundaries," "display children below their parent," etc., which all require complex mathematics.

I do not think that Dracula allows you to customize such rules. However, given your comment, I think it might be too complicated a way to make the layout look like a vertical tree, as it is an acyclic graph (at least it seems). But then you have to go through your own library for this.

Answer 2

How about using SVG ? SVG can be styled with CSS, accessed by Javascript and embedded in HTML documents. And the use of the vector format seems adequate for the visualization of Charts, since it has many advantages. Only one advantage - especially in a web environment - is the smaller file size of large graphs compared to bitmaps.

For the very visualization of Graphviz graphics. This is a software / graphic rendering library that has been actively developed since 1988. It is able to display various types of graphs and export the resulting images to various image formats, including SVG . It uses the so-called "point language" to describe the graphs. Look at the project page on the Graphviz page for many examples and documentation in point language.

Have you already experimented with dot on the command line? dot is the binary code from the Graphviz package that reads files written in the dot language and maps them to the desired image format. This is a good starting point for experimentation.

I used it to dynamically draw PHP class diagrams. I created a .dot file in php and translated it to SVG using exec dot -Tsvg graph.dot

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

Of course, you will have to make some layout compromises if you work with a common graphics library of graphs compared to drawing them manually. But getting acquainted with the language of points, you will achieve better results.

Answer 3

Just try with the following.

Graphs are one of the most commonly used data structures, as well as linked lists and trees. In a recent PHP project, I needed to build a Graph structure to parse some related URLs. The problem was simple, so instead of writing my own code, I went with one of the ones available in the Pear repository.

The Pear Structures_Graph package allows you to create and process graph data structures. It allows you to create either directional or undirected graphs, with data and metadata stored in nodes. The library provides functions for moving the graph, as well as for extracting characteristics from the graph topology.

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

Some sample code:

 <?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, 'ab' * 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]]); } ?> 

Answer 4

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