好用的流程圖js插件

查詢了網上的資料，結合自己的項目記錄的筆記，供自己復習使用。

1.GoJs

插件下載地址：https://gojs.net/latest/download.html

效果圖

 

代碼：

 

 

 

 

完整的方法：

function init(set, data) {
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        myDiagram = $(go.Diagram, "goJs_container",  // create a Diagram for the DIV HTML element
            {
                "undoManager.isEnabled": true  // enable undo & redo
            });

        // define a simple Node template 新建節點
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",  // the Shape will go around the TextBlock
                $(go.Shape, "RoundedRectangle", {fill: "white"},// Shape.fill is bound to Node.data.color
                    new go.Binding("fill", "color")),
                $(go.TextBlock,
                    { margin: 8, font: "bold 14px sans-serif", stroke: '#fff' }, // Specify a margin to add some room around the text// TextBlock.text is bound to Node.data.key
                    new go.Binding("text", "key"))
         );
        // 新建線條和箭頭
        myDiagram.linkTemplate = $(go.Link,
            $(go.Shape, // the link shape
                { strokeWidth: 2, stroke: 'white' }),
            $(go.Shape, // the arrowhead
                {
                    toArrow: 'OpenTriangle',
                    fill: null, stroke: 'white'
                })
        );
        // 其他設置，圖表在畫布中居左顯示
        myDiagram.initialContentAlignment = go.Spot.Left;
        //通過節點數據和關系數組完成關系圖。
        myDiagram.model = new go.GraphLinksModel(set, data);        
    }

 橫向走向的流程圖：

 

 設置布局類型可實現

 myDiagram = $(go.Diagram, "goJs_container",  // create a Diagram for the DIV HTML element
            {
                "undoManager.isEnabled": true，  // enable undo & redo
                 layout: $(go.TreeLayout) // 樹形布局可朝着一個方向繪圖。
 });