基于 mxgraph 实现流程图

news2025/3/30 7:13:36

mxgraph 可以实现复杂的流程图绘制。mxGraph里的Graph指的是图论(Graph Theory)里的图而不是柱状图、饼图和甘特图等图(chart)，因此想找这些图的读者可以结束阅读了。
作为图论的图，它包含点和边，如下图所示。

交通图

横道图

架构图

mxGraph 特点

不依赖任何第三方库
封装了SVG等Vector Graph语言，并且解决不同浏览器的兼容性问题
所有数据(包括图的可视化的数据比如点的颜色形状等和用户业务数据)都保存在本地(JavaScript)里。因此即使没有网络，我们仍然可以编辑和修改，当网络恢复后我们再同步到服务器上就可以了。

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mxgraph hello world</title>
    <style type="text/css">
        #graph-container{position:relative;overflow:hidden;width:100%;height:100%;}
    </style>
</head>
<body>
    <div id="graph-container"></div>
    
    <!-- 引入 mxGraph 库 -->
    <link href="css/common.min.css" rel="stylesheet">
    <script src="javascript/mxClient.min.js"></script>
    <script type="text/javascript">
        // 获取容器元素
        const container = document.getElementById('graph-container');
        // 创建mxGraph实例
        const graph = new mxGraph(container);
        // 获取默认父节点
        const parent = graph.getDefaultParent();
        // 开始编辑会话
        graph.getModel().beginUpdate();
        try {
            var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
            var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
            var e1 = graph.insertEdge(parent, null, '', v1, v2);
        } finally {
            // 结束编辑会话
            graph.getModel().endUpdate();
        }
    </script>
</body>
</html>

效果图：

基本概念

Graph: mxGraph的核心对象，表示整个图形。它包含图形元素、连接器等。

Cells: 表示图形中的节点或连接线，并可以具有各种属性，例如标签、样式和几何位置。

事务
对于图的修改，我们需要放到beginUpdate之间endUpdate，这里面的所有操作就是一个事务。和数据库的事务类似，它要么都成功要么都失败，而且mxGraph的回滚(undo)也是以事务为单位的。因此正确的写法是首先调用beginUpdate；然后把图的修改放到try里；最后在finally里调用endUpdate。代码类似如下结构：

model.beginUpdate();
try
{
  //更新点和边
}
finally
{
  model.endUpdate();
}

Model: 表示mxGraph的数据模型，负责维护图形元素和连接器。在图形中添加或删除单元格时，将更新该模型。

mxGraphModel里真正的存放图的数据，但是我们通常并不直接操作mxGraphModel，而是通过mxGraph的函数间接操作mxGraphModel。

Views: 它们管理与绘制图形相关的所有信息，如滚动条、缩放级别、选择状态和当前显示的区域。

Stylesheet: 用于定义图形元素和连接器的样式。样式可以为某些元素建立默认值，同时允许对特定元素应用自定义样式。

Layouts: 自动排列节点的算法。使用布局可以使大量节点更好地组织在一起，使其更美观也更易于理解。mxGraph中提供了许多不同类型的布局。

图形事件：例如单击、双击、拖动、改变大小等事件。mxGraph具有内置的事件处理程序，允许您轻松地捕获和处理这些事件。

Connectors: 连接两个节点的线条。mxGraph支持不同类型的连接器，例如直线、曲线、箭头等。

Ports: 是一种特殊类型的单元格，用于在节点上定义连接点。它们可以是输入或输出端口，并且可以与相邻单元格连接。

缩放和滚动：mxGraph支持通过缩放和滚动来浏览和查看大型图形。您可以根据需要放大或缩小图形，并使用滚动条在图形中导航。

工具栏和菜单：mxGraph支持自定义工具栏和菜单，以便用户可以轻松地添加、删除或编辑图形元素。

导入和导出：mxGraph支持从其他源导入图形数据（如XML文件），并将其导出为多种格式，如JPEG、PNG和PDF等。这使得mxGraph是一个非常灵活的工具，可以与其他应用程序集成使用。

打印：mxGraph包含了有用的打印功能，可让您生成高质量的打印输出，适合各种场合，如报告、演示文稿等。

客户端事件：mxGraph支持很多事件（如鼠标单击、双击、拖拽等）的处理，在客户端完成前台处理，减少后台交互数据，提升用户体验。

服务器端事件：mxGraph还支持在服务器端处理事件，这样就可以执行像验证和数据库保存等更复杂的操作。

虚拟布局：mxGraph提供了一种虚拟布局算法来解决大型图形的布局问题。该算法使用分层分组法和分级约束算法来生成图形布局，以便效率更高、速度更快、可扩展性更强。

数据绑定：mxGraph支持将数据绑定到图形元素上，以实现数据和图形之间的同步，并实时更新图形。当数据发生变化时，图形也将自动更新，这在某些应用程序中非常有用。

插件系统：mxGraph提供了一个插件系统，允许您添加自定义功能，比如样式编辑器、标尺等等。通过使用插件系统，您可以使mxGraph更加适合您的特定需求。