使用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节点，以及根节点数量不同要选用不同的布局算法。

使用mxGraph绘制流程图

猜你喜欢