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.\n";
// } 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];
}