1.下載依賴的js文件，并引入

<script src="${root%20}/resources/js/graphviz/viz.js"></script>
<script src="${root%20}/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>

總結

以上是生活随笔為你收集整理的viz.js操作流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。