使用mxGraph繪制流程圖

mxGraph是一個強大的JavaScript流程圖前端庫，可以快速建立互動式圖表和圖表應用程式，國内外著名的ProcessOne和draw.io都是使用該庫建立的強大的線上流程圖繪制網站.

這個庫相當強大和複雜，以至于初次接觸會無從下手，不過官方的文檔是相當強大和完善的，還有衆多的示例可以參考，是以，做出簡單的效果是沒有問題的，我主要介紹一下我自己在項目中遇到的問題。

• 1.HTML元素作為流程圖元素

在項目中，我們要實作如下所示的流程圖。每個節點左側是圖示，中間是文字描述，右側是狀态展示，這種樣式使用HTML是很好處理的，那麼在mxGraph中節點可以使用HTML嗎，當然是可以的。

首先，我們需要設定使用HTML标簽

graph.htmlLabels = true;
           

然後，在建立cell的時候傳入HTML，大小，以及樣式即可，如下：

var style = 'text;strokeColor=none;fillColor=none;html=1;whiteSpace=wrap;verticalAlign=middle;overflow=hidden;';
        var html = '<table class="cellTable">' +
            '                        <tr>' +
            '                            <td>' +
            '                                <div class="cellIcon"><div></div></div>' +
            '                            </td>' +
            '                            <td class="cellLabel"></td>' +
            '                            <td class="cellState"><i class="fa"></i></td>' +
            '                        </tr>' +
            '                    </table>';
//建立cell
        var cell = new mxCell(html, new mxGeometry(0, 0, 293, 89), style);
        cell.vertex = true;
           

使用HTML元素作為節點，可以很好的控制樣式，而且HTML節點也能很友善的添加事件和其他操作，十分友善。

• 2.流程圖自動布局

  mxGraph提供了多種流程圖布局算法，常用緊湊樹布局算法即可，即

  new mxCompactTreeLayout(graph);

  不過這種算法隻針對隻有一個根節點的，對于這種有多個節點的，如下面這種：

則需要使用另外的算法來完成布局：

new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH);
           

通過根節點的數量來選擇不同的布局算法，以上。

又爛尾了，寫不下去，綜上，可以用HTML節點，以及根節點數量不同要選用不同的布局算法。