HTML/CSS Visualisierung eines RBAC-Graphen

Question

Ich habe eine RBAC-Struktur in meiner Datenbank gespeichert (ein Projekt, das mit Yii erstellt wurde).

Ich würde gerne ein Diagramm erstellen, um die Beziehungen zwischen den Elementen zu visualisieren, um zu sehen, ob ich keine logischen Fehler mache, und um anderen Teammitgliedern zu zeigen.

Ich dachte daran, eine Seite zu erstellen, die ein Diagramm/einen Baum erzeugen würde. Ich denke, dass ich mit dem serverseitigen Teil umgehen kann, aber ich habe keine Ahnung, wie man das HTML/CSS (oder Bild) erzeugt.

Knoten im Diagramm können mehrere untergeordnete und mehrere übergeordnete Elemente enthalten. Pfeile sind gerichtet. Beispiel:

Ich habe nichts dagegen, die neuste CSS3 und HTML5 Technologie zu verwenden, da sie nur von ausgewählten Leuten benutzt wird.

Answer 1

Ich stieß auf ähnliche Bedenken vor einer Weile. Die Lösung, mit der ich schließlich kam, ist eine kleine Bibliothek, die perfekt funktioniert, nämlich Dracula.

Hier ist ein Link zu der Bibliothek ist: https://github.com/strathausen/dracula

Ihre Bedürfnisse In Anbetracht, alles, was Sie tun müssen, müssen, ist so etwas wie:

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(); 

Weitere Infos, ich werde dich kämpfen lassen mit die Dokumentation.

Ich hoffe, es hilft.

[NACHTRAG]

ich hinzufügen würde, allgemein gesprochen, die Frage der Knoten und Pfeile Anzeige ist nicht eine große Sache, svg macht es in der Nähe von trivial. Aber die Dinge werden kompliziert, wenn Sie die Anzeige der Knoten mit Regeln wie "versuchen Sie, die Anzahl der sich überschneidenden Kanten zu minimieren", "Kinder unterhalb ihrer Eltern anzeigen" etc. organisieren möchten, die alle komplexe Mathematik benötigen.

Ich glaube nicht, dass Dracula erlaubt, diese Art von Regeln anzupassen. Dennoch denke ich, dass es bei der Betrachtung Ihres Kommentars eine nicht allzu komplizierte Möglichkeit gibt, das Layout wie einen vertikalen Baum aussehen zu lassen, da es ein azyklischer Graph ist (zumindest scheint es das zu sein). Aber dann musst du dafür eine eigene Bibliothek erstellen.

Answer 2

Wie wäre es mit SVG? SVG kann von CSS gestylt werden, auf Javascript zugreifen und in HTML-Dokumente eingebettet werden. Die Verwendung eines Vektorformats scheint für die Graph-Visualisierung ausreichend zu sein, da es viele Vorteile bietet. Nur ein Vorteil - insbesondere in Web-Umgebungen - ist die kleinere Dateigröße großer Grafiken im Vergleich zu Bitmap-Bildern.

Für die grafische Darstellung selbst ist Graphviz zu berücksichtigen. Es ist eine Grafik-Rendering-Software/Bibliothek, die seit 1988 aktiv entwickelt wurde. Es ist in der Lage, verschiedene Arten von Graphen zu rendern und das resultierende Bild in verschiedene Bildformate einschließlich SVG zu exportieren. Es verwendet die so genannte "Punktsprache", um Graphen zu beschreiben. Werfen Sie einen Blick auf die Graphviz project page, um viele Beispiele und Dokumentationen zur Punktsprache zu finden.

Haben Sie bereits in der Befehlszeile mit dot experimentiert? dot ist eine Binärdatei aus dem Graphviz-Paket, die in der Punktsprache geschriebene Dateien liest und in das gewünschte Bildformat rendert. Es ist ein guter Ausgangspunkt für Experimente.

Ich habe es einmal zum Zeichnen von PHP-Klassendiagrammen dynamisch verwendet. Ich habe eine .dot-Datei in PHP erstellt und übersetzte es exec dot -Tsvg graph.dot

Es gibt auch eine PHP-Wrapper-Bibliothek für GraphViz in der PEAR-Repositories Image_Graphviz genannt SVG verwenden, die in ähnlichen Projekten wie bei Ihnen verwendet wird.

Natürlich müssen Sie einige Layout-Kompromisse machen, wenn Sie mit einer generischen Graphzeichnungsbibliothek arbeiten, im Vergleich zum manuellen Zeichnen. Wenn Sie jedoch mit der Punktsprache vertraut sind, erzielen Sie die besten Ergebnisse.

Answer 3

Probieren Sie mit den folgenden.,

Graphen sind eine der am häufigsten verwendeten Datenstrukturen, zusammen mit verknüpften Listen und Bäumen. In einem aktuellen PHP-Projekt musste ich eine Graph-Struktur erstellen, um einige miteinander verknüpfte URLs zu analysieren. Das Problem war von einfacher Natur. Anstatt meinen eigenen Code zu schreiben, ging ich mit dem im Pear-Repository zur Verfügung.

Das Pear Structures_Graph-Paket ermöglicht das Erstellen und Manipulieren von Graph-Datenstrukturen. Es ermöglicht den Aufbau von gerichteten oder ungerichteten Graphen, wobei Daten und Metadaten in Knoten gespeichert werden. Die Bibliothek bietet Funktionen zum Graphtraversing sowie zur Merkmalsextraktion aus der Graphentopologie.

Auch beziehen sich die folgende Lage: http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

Einige Beispielcodes:

<?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]]); 
} 
?> 

Answer 4

Wenn Sie Python auf der Server-Seite verwenden können, könnten Sie Networkx verwenden hochwertige Grafiken zu erzeugen und speichern sie als SVG, PNG oder was auch immer du magst.