viz.js操作流程

1.下载依赖的js文件，并引入

<script src="${root }/resources/js/graphviz/viz.js"></script>
<script src="${root }/resources/js/graphviz/viz-lite.js"></script>

2.使用方式：

第一种：

//js代码：   
 $(function(){
        var strbuf =new StringBuffer();
        strbuf.append('digraph G{size = "4, 4"; main[shape=box];');
        strbuf.append('main->parse;');
        strbuf.append('parse->execute;');
        strbuf.append('main->init[style = dotted];');
        strbuf.append('main->cleanup;');
        strbuf.append('execute->{make_string; printf};');
        strbuf.append('init->make_string;');
        strbuf.append('edge[color = red];');
        strbuf.append('main->printf[style=bold, label="100 times"];');
        strbuf.append('make_string[label = "make a
string"];');
        strbuf.append('node[shape = box, style = filled, color = ".7.3 1.0"];');
        strbuf.append('execute->compare;}');
        
         
        image = Viz(strbuf.toString(), { format: "png-image-element" });
        document.getElementById("profile_center").appendChild(image);
    })


//jsp代码
<center id="profile_center"></center>                
                        

第二种：

//js代码：
<script type="text/vnd.graphviz" id="view_div">
digraph g {
    nodesep = .05;
    rankdir = LR;
    
    node[shape = record, width = .1, height = .1];
    
    node0[label = "<f0> |<f1> |<f2> |<f3> |<f4> |<f5> |<f6> |", height = 2.5];
    //我是一个节点，我有7个属性
    node [width = 1.5];
    node1[label = "{<n> n14 | 719 |<p>}"];
    //我还是一个节点， 也定义了三个属性
    node2[label = "{<n> a1 | 719 |<p>}"];
    node3[label = "{<n> i9 | 512 |<p>}"];
    node4[label = "{<n> e5 | 632 |<p>}"];
    node5[label = "{<n> t20 | 959 |<p>}"];
    node6[label = "{<n> o15 | 794 |<p>}"];
    node7[label = "{<n> s19 | 659 |<p>}"];

    //好了，我开始连接了
    node0:f0->node1:n;
    node0:f1->node2:n;
    node0:f2->node3:n;
    node0:f5->node4:n;
    node0:f6->node5:n;
    node2:p->node6:n;
    node4:p->node7:n;
}
</script>


<script type="text/javascript">
    $(function(){
            document.getElementById("messages_center").innerHTML=Viz(document.getElementById("view_div").innerHTML, "SVG");
        })
</script>

//jsp：代码：
<center id="messages_center">

</center>