Graphviz是一个强大的开源的图形软件包,不仅支持桌面应用,也支持Web应用,其关键技术在于它的自动布局和布线功能。
安装libgv-php5后,Graphviz支持PHP编程,可以实现浏览器上显示图形。然而,整个开发环境的安装与设置相对比较复杂一些,需要相当的专业技术。
Graphviz是一个开源软件,有源码,支持不同平台。linux系统下使用XDot程序显示dot格式的文件。
Graphviz显示图形时,可以选择不同的策略进行布局和布线显示图形。
Graphviz的官方网站(点击进入):Graphviz
| Graphviz - Graph Visualization Software。
Web版的Graphviz网站(点击进入):Webgraphviz。
PHP代码如下(其中保护若干调试代码,已经注释了):
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>GVPHP</title> </head> <?php // ini_set('display_errors', true); // if( !(bool)ini_get( "enable_dl" ) || (bool)ini_get( "safe_mode" ) ) { // ECHO "dh_local(): Loading extensions is not permitted. "; // } else { // ECHO "OK"; // } // http://www.graphviz.org/pdf/dotguide.pdf page 23 include('libgv-php5/gv2.php'); $g = gv::digraph('G'); //line 1 $N = gv::protonode($g); // line 3 $cluster0 = gv::graph($g, 'cluster0'); // line 2 gv::setv($N, "style", "filled"); // line 3 gv::setv($N, "color", "white"); // line 3 gv::setv($cluster0, "style", "filled"); // line 4 gv::setv($cluster0, "color", "lightgrey"); // line 5 gv::edge($cluster0, 'a0', 'a1'); //line 6 gv::edge($cluster0, 'a1', 'a2'); //line 6 gv::edge($cluster0, 'a2', 'a3'); //line 6 gv::setv($cluster0, "label", "process #1"); // line 7 $cluster1 = gv::graph($g, 'cluster1'); // line 10 gv::setv($N, "style", "solid"); gv::setv($N, "color", "black"); gv::edge($cluster1, 'b0', 'b1'); //line 12 gv::edge($cluster1, 'b1', 'b2'); //line 12 gv::edge($cluster1, 'b2', 'b3'); //line 12 gv::setv($cluster1, "label", "process #2"); // line 13 gv::setv($cluster1, "color", "blue"); // line 14 $node_start = gv::node($g, 'start'); gv::setv($node_start, "shape", "Mdiamond"); $node_end = gv::node($g, 'end'); gv::setv($node_end, "shape", "Msquare"); gv::edge($g, 'start', 'a0'); //line 16 gv::edge($g, 'start', 'b0'); //line 17 gv::edge($g, 'a1', 'b3'); //line 18 gv::edge($g, 'b2', 'a3'); //line 19 gv::edge($g, 'a0', 'a3'); //line 20 gv::edge($g, 'a3', 'end'); //line 21 gv::edge($g, 'b3', 'end'); //line 22 gv::layout($g, 'dot'); gv::render($g, 'png', 'graph1.png'); gv::rm($g); echo '<img src="graph1.png">'; ?> </html>
界面效果如下:
DOT语言代码如下:
digraph G { subgraph cluster0 { node [style=filled,color=white]; style=filled; color=lightgrey; a0 -> a1 -> a2 -> a3; label = "process #1"; } subgraph cluster1 { node [style=filled]; b0 -> b1 -> b2 -> b3; label = "process #2"; color=blue } start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end; start [shape=Mdiamond]; end [shape=Msquare]; }