我不介意使用最新的CSS3和HTML5技术，因为它只会被选定的人使用。
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 使其变得几乎微不足道。但当你想使用规则来组织节点的显示时，比如“尽量减少交叉边的数量”、“显示子节点在它们的父节点下方”等等，这些都需要复杂的数学计算。
我不认为 Dracula 允许用户自定义此类规则。然而，考虑到您的评论，我认为可能有一种相对简单的方法可以使布局看起来像竖直树形结构，因为这是一个无环图（至少看起来是这样的）。但是你将不得不通过制作自己的库来实现这一点。
请尝试以下内容：
图表是最常用的数据结构之一，与链表和树一起使用。在最近的PHP项目中，我需要构建一个图形结构来分析一些相互链接的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文档中。而且使用矢量格式似乎对于图形可视化来说是足够的，因为它有很多优点。其中一个优点 - 特别是在Web环境下 - 是与位图图像相比，大型图形的文件大小更小。
对于图形可视化本身，Graphviz是一个不错的选择。它是一个自1988年以来一直在积极开发的图形渲染软件/库。它能够呈现各种类型的图形，并将结果图像导出到包括SVG在内的各种图像格式中。它使用所谓的“dot语言”来描述图形。请查看Graphviz 项目页面以找到许多关于dot语言的示例和文档。
您是否已经在命令行上尝试过dot？dot是Graphviz软件包中的一个二进制文件，它读取用dot语言编写的文件并将其呈现为所需的图像格式。这是一个很好的实验起点。
我曾经使用它来动态绘制PHP类图。我在php中生成了一个.dot文件，并使用exec dot -Tsvg graph.dot将其转换为SVG。
PEAR存储库中还有一个名为Image_Graphviz的GraphViz PHP包装库，可用于类似于您的项目。
当然，如果您使用通用图形绘制库而不是手动绘制它们，则必须进行一些布局妥协。但是，当熟悉dot语言时，您将获得最佳结果。