当前位置： 首页 > article >正文

基于 mxgraph 实现流程图

article 2026/2/22 21:24:00

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

交通图

1

横道图

1
1

架构图

1

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>

效果图：
1

基本概念

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更加适合您的特定需求。

相关链接

https://github.com/maxGraph/maxGraph
https://github.com/jgraph/mxgraph
https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
https://www.draw.io/

相关文章：

基于 mxgraph 实现流程图

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

编程日记 2026/2/14 16:56:18

动态路由机制MoE专家库架构在多医疗AI专家协同会诊中的应用探析

随着医疗人工智能技术的飞速进步，AI在医学领域的应用日益增多，尤其是在复杂疾病的诊断和治疗中，AI技术的应用带来了巨大的潜力。特别是动态路由机制混合专家（Mixture of Experts，MoE）架构，因其灵活、高效的特点，正逐渐成为实现多AI专家协同会诊的关键技术。通过将多个不…...

编程日记 2026/2/16 19:12:18

双工通信：WebSocket服务

&#xff08;一&#xff09;WebSocket概述 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输 注意;Websocket也只能由客户端先握…...

编程日记 2026/2/18 22:26:48

洪水灌溉算法 + 总结

文章目录 floodfill算法图像渲染题解代码 岛屿数量题解代码 岛屿的最大面积题解代码 被围绕的区域题解代码 太平洋大西洋水流问题题解代码 扫雷游戏题解代码 衣橱整理题解代码 总结 floodfill算法 1. 寻找相同性质的联通块&#xff0c;可以使用dfs或者bfs解决&#xff0c;比如…...

编程日记 2026/2/16 12:06:32

docker中间件部署

1.docker安装 # 1.卸载旧版本 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine# 2.需要的安装包 yum install -y yum-utils# 3.设置镜像的仓库 # 3.1.默认是国外的&#x…...

编程日记 2026/2/13 20:49:58

LangChain4j（1）：初识LangChain4j

1 什么是LangChain和LangChain4j LangChain是一个大模型的开发框架&#xff0c;使用LangChain框架&#xff0c;程序员可以更好的利用大模型的能力&#xff0c;大大提高编程效率。如果你是一个lava程序员&#xff0c;那么对LangChain最简单直观的理解就是&#xff0c;LangChain…...

编程日记 2026/2/15 13:06:50

基于 Swoole 的高性能 RPC 解决方案

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/5/18 13:06:42

Photoshop 2025安装包下载及Photoshop 2025详细图文安装教程

文章目录 前言一、Photoshop 2025安装包下载二、Photoshop 2025安装教程1.解压安装包2.运行程序3.修改安装路径4.设安装目录5.开始安装6.等安装完成7.关闭安装向导8.启动软件9.安装完成 前言 无论你是专业设计师&#xff0c;还是初涉图像处理的小白&#xff0c;Photoshop 2025…...

编程日记 2026/2/20 1:29:38

CPU跑大模型怎么加速?

一、概念 近几年&#xff0c;大模型的规模越做越大。普通码农没几张显卡几乎都跑不动动辄几百B的模型了。当然&#xff0c;随着SLM进一步发展&#xff0c;移动端、PC端部署SLM变得轻松了起来。即便只有CPU也能带得起3B以内的SLM&#xff0c;只不过推理速度比较感人。因此&#…...

编程日记 2025/12/13 11:05:48

PostgreSQL详解

第一章&#xff1a;环境部署与基础操作 1.1 多平台安装详解 Windows环境 图形化安装 下载EnterpriseDB安装包&#xff08;含pgAdmin&#xff09; 关键配置项说明&#xff1a; # postgresql.conf优化项 max_connections 200 shared_buffers 4GB work_mem 32MB 服务管理命…...

编程日记 2025/12/2 5:34:05

SQL Server安装程序无法启动：系统兼容性检查失败

问题现象&#xff1a; 运行 SQL Server 2022 安装程序时&#xff0c;提示 “硬件或软件不满足最低要求”&#xff0c;安装向导直接退出或无法继续。 快速诊断 操作系统版本检查&#xff1a; # 查看 Windows 版本&#xff08;需 20H2 或更高&#xff09; winver 支持的系统&…...

编程日记 2026/2/15 19:15:15

期权合约作废的话，权利金和保证金会退还么？

在期权交易中&#xff0c;权利金是否可以退回&#xff0c;主要取决于期权的交易情况和合约条款。 期权作废的三种情形 一般来说期权作废一共有三种情况&#xff0c;分别是到期没有行权、主动放弃或者是标的退市了。 第一种是到期未行权&#xff0c;一般来说值得都是虚值期权&…...

编程日记 2026/2/17 6:20:36

MIPI计算ECC和CRC工具介绍

一、MIPI简介 MIPI联盟&#xff0c;即移动产业处理器接口&#xff08;Mobile Industry Processor Interface 简称MIPI&#xff09;联盟。MIPI&#xff08;移动产业处理器接口&#xff09;是MIPI联盟发起的为移动应用处理器制定的开放标准和一个规范。MIPI官网https://mipi.org/…...

编程日记 2026/2/22 0:27:48

医院管理系统（源码）分享

「医院管理系统&#xff08;源码&#xff09; 源码&#xff1a; https://pan.quark.cn/s/b6e21488fce3 第1章 绪论 1.1 项目背景 随着计算机科学的迅猛发展和互联网技术的不断推进&#xff0c;人们的生活方式发生了巨大的变化&#xff0c;同时也推动了整个软件产业的发展。把…...

编程日记 2026/2/21 7:22:42

使用Geotools从DEM数据中读取指定位置的高程实战

目录 前言 一、GridCoverage2D对象介绍 1、GridCoverage2D的属性 2、GridCoverage2D核心方法 3、GridCoverage2D中的高级操作 二、指定位置的高程获取 1、存储原理 2、相关属性的获取 3、获取高程的方法 三、总结 前言 在地理信息科学领域&#xff0c;高程数据是至关重…...

编程日记 2026/2/21 3:45:14

uniapp 在app上 字体如何不跟着系统字体大小变

在UniApp开发中&#xff0c;默认情况下App的字体可能会跟随系统字体设置而变化。如果你希望保持固定的字体样式&#xff0c;不随系统字体设置改变&#xff0c;可以采用以下几种方法&#xff1a; 方法一&#xff1a;全局CSS设置 在App.vue的样式中添加以下CSS&#xff1a; /*…...

编程日记 2025/12/22 23:12:47

RAG优化：python从零实现GraphRag 一场文档与知识的“恋爱”之旅

嘿，亲爱的算法工程师们，准备好迎接一场文档与知识的“恋爱”之旅了吗？今天我们要介绍的 Graph RAG，就像是一位“红娘”，帮助文档和知识在图的世界里找到彼此，擦出智慧的火花！ 文章目录 为什么需要 Graph RAG？Graph RAG 的“恋爱秘籍”准备好了吗？让我们开始吧！环境设…...

编程日记 2025/12/20 10:00:28

STM32F103_LL库+寄存器学习笔记05 - GPIO输入模式，捕获上升沿进入中断回调

导言 GPIO设置输入模式后&#xff0c;一般会用轮询的方式去查看GPIO的电平状态。比如&#xff0c;最常用的案例是用于检测按钮的当前状态&#xff08;是按下还是没按下&#xff09;。中断的使用一般用于计算脉冲的频率与计算脉冲的数量。 项目地址&#xff1a;https://github.…...

编程日记 2026/2/14 15:34:54

如何为你的github开源项目选择合适的开源协议？

如何为你的github开源项目选择合适的开源协议&#xff1f; 导言 在github开源世界中&#xff0c;选择一个合适的开源协议是至关重要的。它不仅定义了他人如何使用你的代码&#xff0c;还决定了你的项目能否被广泛接受和传播&#xff0c;还能避免侵权问题。 然而&#xff0c;面…...

编程日记 2025/12/25 18:13:12

【深度破解】爬虫反反爬核心技术实践：验证码识别与指纹伪装

一、反爬技术体系全景图 现代Web应用的常见反爬手段&#xff1a; mermaid&#xff1a; graph TDA[反爬体系] --> B[行为特征检测]A --> C[验证码体系]A --> D[指纹追踪]B --> B1[请求频率]B --> B2[鼠标轨迹]B --> B3[页面停留时间]C --> C1[图形验证码…...

编程日记 2025/12/19 22:24:56

dynamic_cast的理解

dynamic_cast&#xff1a;&#xff08;具体使用就不详细说明了&#xff09; C 中用于 安全的类层次结构转换 的类型转换运算符&#xff0c;主要用于 多态类型&#xff08;即包含虚函数的类&#xff09;的指针或引用之间的转换 前提条件&#xff1a; 必须要有虚函数才能使用 dy…...

编程日记 2026/2/14 14:30:40

MATLAB 编写的函数或算法生成可供 C++ 调用的库或组件

MATLAB 编写的函数或算法生成可供 C 调用的库或组件 使用 MATLAB Coder 生成 C/C 代码&#xff1a; MATLAB Coder 允许您将 MATLAB 函数转换为可移植的 C 或 C 代码。生成的代码可以作为静态库、动态库或源代码&#xff0c;供 C 项目直接调用。具体步骤包括&#xff1a; 准备…...

编程日记 2026/2/16 4:16:51

Java基础知识-反射

一、什么是反射&#xff1f; Java反射&#xff08;Reflection&#xff09;是Java语言的核心特性之一&#xff0c;它允许程序在运行时&#xff08;Runtime&#xff09;动态地操作类和对象。通过反射API&#xff0c;我们可以在程序运行期间&#xff1a; 获取任意类的Class对象构…...

编程日记 2026/2/13 15:37:47

【大模型学习】什么是具身智能

目录 一、技术背景与历史发展 二、什么是具身智能&#xff1f; 三、技术要点及具体实现细节 1. 感知技术&#xff1a; 2. 运动控制&#xff1a; 3. 学习机制&#xff1a; 4. 人机交互&#xff1a; 四、架构 五、应用 六、实际应用案例 一、技术背景与历史发展 人工智能的…...

编程日记 2026/2/15 6:32:32

直播预告 | TDgpt 智能体发布 时序数据库 TDengine 3.3.6 发布会即将开启

从海量监控数据&#xff0c;到工业、能源、交通等场景中实时更新的各类传感器数据&#xff0c;时序数据正在以指数级速度增长。而面对如此庞杂的数据&#xff0c;如何快速分析、自动发现问题、精准预测未来&#xff0c;成为企业数字化转型过程中的关键挑战。 TDengine 的答案是…...

编程日记 2026/2/13 2:41:50

服务器硬盘出现故障都有哪些解决方法？

服务器作为核心的硬件设施和互联网中必不可少的网络设备&#xff0c;承载着重要的数据信息和业务应用&#xff0c;但是服务器硬盘也会出现故障的情况&#xff0c;当服务器硬盘发生故障该如何进行解决呢&#xff0c;下面&#xff0c;我们就从以下几个方面进行探讨一下吧&#xf…...

编程日记 2026/2/15 18:05:30

vscode 通过Remote-ssh远程连接服务器报错 could not establish connection to ubuntu

vscode 通过Remote-ssh插件远程连接服务器报错 could not establish connection to ubuntu&#xff0c;并且出现下面的错误打印&#xff1a; [21:00:57.307] Log Level: 2 [21:00:57.350] SSH Resolver called for "ssh-remoteubuntu", attempt 1 [21:00:57.359] r…...

编程日记 2026/2/14 16:30:30

【JavaScript 简明入门教程】为了Screeps服务的纯JS入门教程

0 前言 0-1 Screeps: World 众所不周知&#xff0c;​Screeps: World是一款面向编程爱好者的开源大型多人在线即时战略&#xff08;MMORTS&#xff09;沙盒游戏&#xff0c;其核心机制是通过编写JavaScript代码来控制游戏中的单位&#xff08;称为“Creep”&#xff09;&#…...

编程日记 2026/2/14 20:18:01

Prometheus stack命令行接入springboot服务metrics

使用Prometheus Stack监控SpringBoot应用 本文将详细介绍如何使用Prometheus Stack监控SpringBoot应用的metrics。假设你已经安装了Kubernetes集群&#xff0c;并使用Helm安装了Prometheus Stack全家桶。SpringBoot应用已经配置好&#xff0c;暴露了相应的metrics端点。 Sprin…...

编程日记 2026/2/17 23:20:42

Git Bash 设置Notepad++作为默认编辑器

网上搜的时候发现别人搞得有点复杂 &#xff08;绝对正确的方法&#xff09;Git Bash 设置Notepad作为默认编辑器_git 通过notpad 编辑器-CSDN博客 最简单的方式就是重新安装git&#xff0c;然后在选择编辑器的时候&#xff0c;勾选notepad即可...

编程日记 2026/2/15 8:18:47