HTML/CSS Визуализация графика RBAC

Я столкнулся с подобными опасениями некоторое время назад. Решение, к которому я, наконец, пришел, — это небольшая библиотека js, которая отлично справилась с задачей, а именно Дракула.

Вот ссылка на библиотеку: https://github.com/strathausen/dracula

Учитывая ваши потребности, все, что вам нужно сделать, это что-то вроде:

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

Для получения дополнительной информации я позволю вам бороться с документацией.

Надеюсь, поможет.

[ДОБАВЛЕНИЕ]

Я бы добавил, что, вообще говоря, вопрос отображения узлов и стрелок не имеет большого значения, использование svg делает его почти тривиальным. Но все усложняется, когда вы хотите организовать отображение узлов с помощью таких правил, как «попытаться минимизировать количество пересекающихся ребер», «отображать дочерние элементы ниже их родителя» и т. д., которые требуют сложной математики.

Я не думаю, что Дракула позволяет настраивать такие правила. Тем не менее, учитывая ваш комментарий, я думаю, что может быть не слишком сложный способ сделать макет похожим на вертикальное дерево, так как это ациклический граф (по крайней мере, так кажется). Но тогда вам придется пройти через создание собственной библиотеки для этого.

Попробуйте следующее.

Графы являются одной из наиболее часто используемых структур данных, наряду со связанными списками и деревьями. В недавнем PHP-проекте мне нужно было построить структуру Graph для анализа некоторых взаимосвязанных URL-адресов. Проблема была простой, поэтому вместо того, чтобы писать собственный код, я использовал тот, который доступен в репозитории Pear.

Пакет Pear Structures_Graph позволяет создавать структуры графовых данных и управлять ими. Он позволяет строить как ориентированные, так и неориентированные графы с данными и метаданными, хранящимися в узлах. Библиотека предоставляет функции для обхода графа, а также для извлечения характеристик из топологии графа.

Также обратитесь к следующему местоположению: http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

Некоторые примеры кодов:

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

Как насчет использования SVG? SVG можно стилизовать с помощью CSS, получить к нему доступ с помощью Javascript и встроить в HTML-документы. И использование векторного формата кажется подходящим для визуализации Graph, поскольку оно имеет много преимуществ. Только одним преимуществом, особенно в веб-среде, является меньший размер файла больших графиков по сравнению с растровыми изображениями.

Что касается самой визуализации графика, на ум приходит Graphviz. Это программное обеспечение/библиотека для рендеринга графиков, которая активно разрабатывается с 1988 года. Она способна отображать различные типы графиков и экспортировать полученное изображение в различные графические форматы, включая SVG. Он использует так называемый «точечный язык» для описания графов. Посетите страницу проекта Graphviz, чтобы найти много примеров и документации по языку точек.

Вы уже экспериментировали с dot в командной строке? dot — это двоичный файл из пакета Graphviz, который читает файлы, написанные на языке точек, и преобразует их в нужный формат изображения. Это хорошая отправная точка для экспериментов.

Однажды я использовал его для динамического рисования диаграмм классов PHP. Я создал файл .dot в php и перевел его в SVG, используя exec dot -Tsvg graph.dot

В репозиториях PEAR также есть библиотека-оболочка PHP для GraphViz под названием Image_Graphviz, которая используется в аналогичных проекты как ваши.

Конечно, вам придется пойти на некоторые компромиссы компоновки, если вы работаете с общей библиотекой рисования графиков, по сравнению с рисованием их вручную. Но при знакомстве с точечным языком вы добьетесь наилучших результатов.

Если вы можете использовать Python на стороне сервера, вы можете использовать Networkx для создания высококачественной графики и сохранения ее как SVG, PNG или что угодно.