UI组件前端图形学【免费下载链接】mxgraphmxGraph is a fully client side JavaScript diagramming library项目地址https://gitcode.com/gh_mirrors/mx/mxgraph点击查看免费下载mxGraph 是一款完全运行在浏览器端的 JavaScript 图表库使用 SVG 与 HTML 完成渲染支持绘制流程图、组织结构图、树图、网络拓扑等各类交互式图表并且可以嵌入任意 Web 框架或直接以静态页面运行。本文以仓库 README.md 为主线结合根目录 index.html、JavaScript 用户手册、官方教程、源码说明 以及 80 余个开箱即用的 示例系统讲解 mxGraph 的定位、架构、快速上手、扩展方式与部署要点帮助读者在了解项目现状的前提下正确评估并复用这套久经生产检验的图表引擎。mxGraph 是什么定位与核心理念README.md 对 mxGraph 给出了一个非常凝练的定义mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering——一个纯客户端fully client side的 JavaScript 图表库渲染依赖 SVG 与 HTML。这句话包含两层关键信息纯客户端图表的创建、交互、编辑与序列化全部在浏览器内完成。图表数据以内存对象mxCell与 XML 两种形式存在即使没有后端浏览器也可以完整地创建、编辑并导出图表SVG HTML 渲染顶点、连线、标签等图形元素基于 SVG 绘制工具栏、菜单等 UI 组件基于 HTML 构建二者配合实现所见即所得的编辑体验。README 同时强调了两条重要的技术事实零第三方依赖、零插件mxGraph 不使用任何第三方软件不需要浏览器插件。库内全部代码以mx前缀命名并挂载到全局命名空间属于纯 vanilla JavaScript因此can be integrated in virtually any framework理论上可以嵌入 React、Vue、Angular、jQuery 乃至无框架的静态页面多语言后端配套虽然客户端是纯 JavaScript但项目同时提供了 Java 与 .NET 两套服务端实现详见仓库中的 java/ 与 dotnet/ 目录用于在服务端完成渲染图片、存储加载图表、生成图对象等任务PHP 后端曾在历史版本中存在但自 4.0.3 版本之后被弃用。当前仓库的版本号为4.2.22020 年 10 月 28 日发布该信息在根目录 index.html 的页首、package.json 的version字段以及 mxClient.js 中的mxClient.VERSION常量三处保持一致是本仓库可直接验证的版本事实。项目现状EOL 状态、历史沿革与社区生态开发已停止仓库处于 EOL 状态README 在开篇即给出重要声明Development on mxGraph has now stopped, this repo is effectively end of life截至 2020 年 11 月 9 日。这意味着本仓库不再有新功能开发代码库处于功能完备但冻结维护的状态。与 EOL 状态相关的几个事实需要如实了解官方不再维护活跃社区转向了多个 forkREADME 中列出的已知 fork 包括jsGraph/mxgraph与process-analytics/mxgraph等各 fork 的定位与活跃度以各自仓库为准此处仅转述 README 的原始信息npm 构建无人维护历史上存在一个 npm 发布包包名为mxgraph但 README 明确指出该构建已不再维护需要依赖 npm 安装的读者应留意版本与维护状态TypeScript 无官方支持官方不提供类型定义但社区有独立的类型定义项目README 提到以hungtcs/mxgraph-type-definitions为主导仓库的 DefiniteTyped 迁移计划TypeScript 用户需要依赖这类第三方类型包PHP 后端已弃用PHP 模型在 release 4.0.3 之后被移除并单独归档mxgraph-php。历史沿革从商业产品到 draw.io 基石README 的 History 一节回顾了项目脉络mxGraph 于2005 年作为商业项目创建一直运营到2016 年。其早期的核心竞争力USP是对非 SVG 浏览器的支持——在 SVG 尚未普及的年代mxGraph 通过 VML 等降级方案保证了跨浏览器渲染。当这一优势因浏览器标准化而失效后开发团队将商业化重心转移到 draw.io即 diagrams.net 的前身而 mxGraph 本身则pretty much feature complete, production tested in many large enterprises and stable for many years——功能基本完备、在多家大型企业生产环境中经过长期验证、稳定性维持多年。README 同时给出了一条面向新项目的审慎建议Over time you can expect this codebase will break features against new browser releases, its not advised to start new projects against this codebase for that reason——随着浏览器不断更新该代码库的功能会逐渐在新版本浏览器上出现问题因此不建议用它在全新项目中起盘。对开发者而言这条建议的实际含义是评估 mxGraph 时应优先将其视为可参考、可移植、可复用的成熟实现而非继续投入的新平台若确需在现有产品中集成应做好浏览器兼容性回归测试。仓库全景从根目录 index.html 出发的资源导航README 的 Getting Started 明确指出根目录的 index.html 是进入全部资源的入口文件。实际查看该文件可以发现它既是版本说明页也是文档导航中枢文档DocumentationTutorial 教程面向初学者的循序渐进入门User ManualJavaScript用户手册最核心的 JavaScript 客户端使用文档User ManualJava用户手册Java 版本使用文档Known Issues 已知问题跨浏览器兼容性等已知问题的汇总。安装与示例Installation Examples.NET.NET 后端项目含 GDI 渲染、ASP.NET 示例JavaJava 后端与 Swing 示例JavaScript纯客户端库入口含 源码目录 与全部 浏览器示例。API 规格API Specifications.NET APIDoxygen 生成Java APIJavadoc 生成JavaScript APIJSDuck 生成按类索引。此外 package.json 显示该 npm 包的入口为./javascript/dist/build.js构建流程由 Gruntgrunt build构建配置位于 etc/build/Gruntfile.js与 webpack 驱动依赖仅限构建期 devDependencies运行时零依赖与 README 的无第三方软件声明互为印证。JavaScript 客户端侧的示例极其丰富仅 javascript/examples 目录就收录了 80 余个主题示例覆盖锚点anchors、动画animation、自动布局autolayout、剪贴板clipboard、XML 编解码codec、折叠collapse、拖拽源dragsource、文件 IOfileio、分组groups、手绘工具handles、分层布局hierarchicallayout、JSON 数据jsondata、合并merge、监控monitor、变形morph、正交连线orthogonal、重叠标记overlays、端口ports、径向树布局radialtreelayout、泳道swimlanes、触摸支持touch、验证validation等几乎全部功能点此外还有 编辑器套件diagrameditor、grapheditor、layouteditor、processeditor、workfloweditor和完整的 grapheditor/www 应用。可以说每一个功能模块都有对应的可运行示例页面这是上手 mxGraph 最直接的路径。快速上手Hello, World! 实战运行环境本地文件系统即可教程 明确指出客户端需要一台 Web 服务器来分发文件也可以完全不依赖服务器、直接从本地文件系统运行。Hello, World!示例就以单个 HTML 文件的形式随仓库发布打开 javascript/examples/helloworld.html 即可看到效果建议使用 Chrome 或 Firefox 等现代浏览器。库加载mxBasePath 与 mxClient.js在 示例文件 的head中可以看到标准的三段式加载方式!-- 1. 设置资源基准路径必须在加载库之前定义且不要带结尾斜杠 -- script typetext/javascript mxBasePath ../src; /script !-- 2. 加载并初始化库 -- script typetext/javascript src../src/js/mxClient.js/script其中mxBasePath是 mxGraph 加载内部资源样式表、图片、本地化文本的基准路径必须先于mxClient.js定义。mxClient.js是库的引导文件bootstrapping mechanism生产版本javascript/src/js/mxClient.js内含运行所需全部代码同时内置浏览器与操作系统识别常量IS_IE、IS_IE11、IS_EDGE、IS_QUIRKS等。从源码可见mxClient通过include机制按需动态加载各模块其VERSION字段即当前版本4.2.2。如需将示例部署到自己的页面可参照 教程 的写法script typetext/javascript mxBasePath javascript/src; /script script typetext/javascript srcjavascript/src/js/mxClient.js/script核心代码创建图、插入顶点与边Hello, World! 的核心逻辑集中在main函数中约 helloworld.html 的 L17-L49逐段拆解如下function main(container) { // 1. 浏览器兼容性检查不支持的浏览器直接给出错误提示 if (!mxClient.isBrowserSupported()) { mxUtils.error(Browser is not supported!, 200, false); } else { // 2. 屏蔽浏览器自带的右键上下文菜单图表组件自行接管 mxEvent.disableContextMenu(container); // 3. 在给定 DOM 节点内创建图实例 var graph new mxGraph(container); // 4. 启用橡皮筋矩形框选交互 new mxRubberband(graph); // 5. 获取默认父节点——通常是根节点的第一个子节点即 layer 0 var parent graph.getDefaultParent(); // 6. 在单个事务内批量修改模型保证一次刷新 graph.getModel().beginUpdate(); try { // 插入两个顶点id 传 null 表示由模型自动分配 var v1 graph.insertVertex(parent, null, Hello,, 20, 20, 80, 30); var v2 graph.insertVertex(parent, null, World!, 200, 150, 80, 30); // 在 v1 与 v2 之间插入一条边 var e1 graph.insertEdge(parent, null, , v1, v2); } finally { // 提交事务刷新显示 graph.getModel().endUpdate(); } } }这段代码几乎包含了 mxGraph 客户端编程的全部核心概念mxGraph(container)将图渲染进一个指定 DOM 节点示例中即页面底部那个带网格背景的graphContainer容器graph.getModel()返回底层数据模型mxGraphModel所有结构变更都要通过模型事务完成beginUpdate() / endUpdate()是 mxGraph 的批量更新机制——事务内的所有变更插入顶点、插入边在endUpdate()时一次性提交并重绘这是高性能处理大量单元格的标准写法finally保证异常时也能正确结束事务insertVertex(parent, id, value, x, y, width, height)的参数依次为父节点、单元格 id、标签文本、x/y 坐标、宽/高insertEdge(parent, id, value, source, target)则在两个顶点之间建立连线。页面最后一行body onloadmain(document.getElementById(graphContainer))将容器节点交给main函数从而在页面加载完成后渲染出Hello, → World!的连线图。若在本地复现只需把示例中的mxBasePath与src路径按仓库布局调整为相对路径即可例如将仓库 clone 到本地后直接通过git clone https://gitcode.com/gh_mirrors/mx/mxgraph获取再用浏览器打开 javascript/examples/helloworld.html。核心架构客户端 多后端以及 JavaScript 侧八个包教程 的 Overview 部分用一张架构图概括了 mxGraph 的整体形态客户端JavaScript 图表组件 可选的应用外壳与各语言后端Java、.NET 等分层协作。当后端存在时客户端可以按需使用后端完成三类任务创建图片服务端渲染导出为图像存储和加载图表服务端持久化创建图的对象表示服务端对图模型做程序化处理。上述场景还可以自由组合例如在每次修改发生时把变更的 XML 描述实时推送给后端或由后端自动保存以防客户端数据丢失当然客户端也可以在离线模式下运行——此时既不需要后端也不需要 Web 服务器。JavaScript 客户端内部的组织方式可以参见随库发布的源码说明 javascript/src/js/index.txt其中明确将库划分为8 个包包职责代表性类editor图表编辑器的应用外壳mxEditorviewmodel图组件核心模型、视图、渲染、撤销、校验mxGraph、mxGraphModel、mxCell、mxGraphView、mxCellRenderer、mxStylesheet、mxUndoManager、mxCellOverlay、mxMultiplicityhandler交互事件监听器框选、工具提示、单元格编辑等mxRubberband、mxTooltipHandler、mxGraphHandlerlayout自动布局算法mxCompactTreeLayout等shape各类图形mxShape的子类体系mxShapeutil工具类剪贴板、拖拽、常量、事件、国际化、日志mxClipboard、mxDataTransfer、mxConstants、mxEvent、mxUtils、mxResources、mxLogioXML 编解码将 JS 对象序列化为 XMLmxObjectCodec、mxCodec、mxCodecRegistry顶层类mxClient负责引导它includes (or dynamically imports) everything else即要么一次性引入全部代码生产版mxClient.js单文件模式要么按需动态加载各模块。mxClient.VERSION保存当前版本号。view与model是图组件的核心三件套其协作关系是理解 mxGraph 的关键mxGraphModel持有单元格mxCell构成的图数据结构mxGraphView缓存每个单元格的状态坐标、尺寸、样式解析结果负责几何计算mxCellRenderer根据mxStylesheet中定义的样式外观把单元格状态绘制到画布上。撤销历史由mxUndoManager实现图标标记用mxCellOverlay校验规则通过mxMultiplicity定义。这套模型—视图—渲染的分离设计使 mxGraph 既能以无头模式headless做服务端渲染见 dotnet/src/reader 与 java/src/com/mxgraph/reader 的 view reader 实现也能在浏览器中做全交互编辑。事件模型三类事件与全局键盘交互源码说明 对事件体系做了专门梳理mxGraph 中存在三类事件原生 DOM 事件由浏览器直接派发跨浏览器的封装与内存泄漏规避由mxEvent辅助方法完成mxEvent还负责解析 DOM 节点与 JavaScript 事件处理器之间的循环引用——这是 IE6 时代著名的内存泄漏来源mxEventObject在mxEventSource上触发的事件。监听器是接收(sender, evt)两个参数的函数通过mxEventSource.addListener/mxEventSource.removeListener增删用fireEvent触发mxMouseEventsmxGraph专属的鼠标事件。监听器是实现了mousedown、mousemove、mouseup三个方法的对象通过mxGraph.addMouseListener/removeMouseListener注册由mxGraph.fireMouseEvent派发。在交互层源码说明 还给出了一组跨浏览器、跨平台的全局键盘/鼠标绑定这些是客户端内置的默认行为按键组合行为Control-Drag复制克隆选中的单元格Shift-Rightclick显示上下文菜单Alt-Click强制橡皮筋marquee框选Control-Select切换选中状态Shift-Drag将偏移量约束在单一方向上Shift-Control-Drag或Shift-Rightdrag平移画布panning这一整套事件机制配合handler包中的监听器橡皮筋选择、工具提示、连接线、单元格编辑等构成了 mxGraph 开箱即用的完整交互体验——在 javascript/examples 目录下几乎每个交互特性都有对应的演示如 events.html、handles.html、touch.html。全局配置变量、资源与图片规范六个可预定义的全局变量源码说明 的 Configuration 一节列出了在加载客户端之前可以预定义的全局变量用于指定语言或基础路径全局变量作用默认行为mxBasePath指定mxClient.basePath即库资源基准路径由加载页面设置mxImageBasePath指定mxClient.imageBasePath内置图片的加载路径可改以适配自有环境mxLanguage指定资源语言mxClient.language—mxDefaultLanguage指定默认语言mxClient.defaultLanguage—mxLoadResources是否加载本地化资源默认truemxLoadStylesheets是否加载样式表默认true内置图片均从mxClient.imageBasePath加载除了整体调整基准路径也可以逐一定义图片变量覆盖mxGraph.prototype.collapsedImage、mxGraph.prototype.expandedImage、mxGraph.prototype.warningImage、mxWindow的closeImage/minimizeImage/normalizeImage/maximizeImage/resizeImage、mxPopupMenu.prototype.submenuImage、mxUtils.errorImage、mxConstraintHandler.prototype.pointImage。单元格告警图标mxGraph.setCellWarning使用的基础文件名images/warning不含扩展名由mxGraph.warningImage定义。上述图片资源实际位于 javascript/src/images 目录如collapsed.gif、expanded.gif、warning.gif、point.gif、submenu.gif等。本地化资源mxEditor与mxGraph在类加载时向mxResources注册资源文件resources/editor*.properties与resources/graph*.properties库默认随附英文与德文两种语言资源可见于 javascript/src/resources 目录。图片使用建议源码说明 给出了一条历史悠久的兼容性经验至今仍有参考价值HTML 元素内工具栏、右键菜单等建议使用GIF256 色调色板PNG 放入 HTML 元素时旧版 IE 会忽略透明通道图组件内部建议使用PNG24 位GIF 放进图中时Mac 版 Firefox 可能显示异常颜色且 Mac 上动态 GIF 只显示第一帧为加快运行时图片渲染可用new Image(); image.src url;预取图片。类系统、子类化与二次开发模式类与单例、保留字源码说明 的 Classes 一节说明mxGraph 中存在两种类——普通类映射为构造函数 prototype如mxEditor是函数mxEditor.prototype是其原型对象**单例singleton**则映射为全局对象变量名即类名如mxConstants就是一个持有全部常量的对象字面量。所有类以mx前缀作为全局命名空间的约定以避免与页面中其他对象冲突。该文档还列出了一些不应占用的保留字段名mxObjectId对象配合mxObjectIdentity使用时的标识字段、as对象作为另一对象的字段时、id对象在 codec 中作为 idref 时、mxListenerListmxEvent挂在 DOM 节点上的监听器字段、window._mxDynamicCodeSafari/Chrome 下mxClient.include动态加载代码的临时变量、_mxJavaScriptExpressionSafari/Opera/Firefox 3/IE 下mxUtils.eval的全局临时变量。标准子类化范式同样来自 源码说明 的 Subclassing / Constructor / Functions / Variables 几节给出了完整的二次开发范式。以继承mxGraph为例第一步定义子类构造函数用call显式逐个透传参数调用父类构造函数function MyGraph(container) { mxGraph.call(this, container); }第二步通过原型继承并重定义 constructor 字段——先让原型继承父类实例再修正constructor保证类型可通过mxUtils.getFunctionName(obj.constructor)正确识别MyGraph.prototype new mxGraph(); MyGraph.prototype.constructor MyGraph;第三步可选注册编解码器如果子类需要参与 XML 编解码在类加载时复用父类 codec 并替换模板var codec mxCodecRegistry.getCodec(mxGraph); codec.template new MyGraph(); mxCodecRegistry.register(codec);第四步扩展父类函数。推荐先调用父类实现supercall再追加逻辑父类调用通过apply并传入this与arguments完成MyGraph.prototype.isCellSelectable function(cell) { var selectable mxGraph.prototype.isSelectable.apply(this, arguments); var geo this.model.getGeometry(cell); return selectable (geo null || !geo.relative); }如果某个函数需要被整体替换也可以直接在父类原型上重写文档同时给出mxGraph.prototype.isCellSelectable function(cell){...}的直接覆盖写法。第五步添加新方法。例如给子类增加一个返回模型 XML 的方法MyGraph.prototype.getXml function() { var enc new mxCodec(); return enc.encode(this.getModel()); }第六步添加新字段。注意原型字段在实例间共享值只创建一次MyGraph.prototype.myField Hello, World!;若需要每个实例独立的字段值则应在构造函数中定义function MyGraph(container) { mxGraph.call(this, container); this.myField new Array(); }最后new MyGraph(container)container为承载图视图的 DOM 节点即可完成实例化。这套构造函数 原型链 可选 codec 注册的范式在整个库中高度一致是编写 mxGraph 扩展的最重要方法论。部署、压缩与浏览器/服务器要求单文件部署与 HTTP 压缩源码说明 的 Deployment 一节说明生产版本deployment version的mxClient.js已将全部所需代码合并为单个文件页面只需在head中引入script typetext/javascript srcjs/mxClient.js/script若使用源码版进行开发javascript/src完整目录是必需的源码客户将获得javascript/devel/source.zip其中每个类一个文件解压后将页面中的mxClient.js路径指向解压后的版本即可。Compression 一节还建议在 Apache2 mod_deflate 环境下可通过src/js/.htaccess中的指令SetOutputFilter DEFLATE加速 JavaScript 源码的传输。浏览器与服务器要求根目录 index.html 的 Requirements 一节给出了官方声明的运行环境要求JavaScript 客户端浏览器要求Google Chrome 30 及以上、Firefox 31 及以上、Microsoft Internet Explorer 9.0 及以上、Microsoft Edge 20 及以上、Safari 6.2 及以上、Opera 20 及以上、Android 5.0 及以上默认浏览器、iOS 8.0 及以上默认浏览器。这与 mxClient.js 源码中基于 userAgent 的浏览器识别逻辑IS_IE、IS_IE11、IS_EDGE、IS_QUIRKS等常量相印证——其中 IE 相关分支正是当年非 SVG 浏览器支持 USP 的代码遗产服务端要求Java 6.0 及以上或 .NET 3.5 及以上PHP 5.0 为非正式支持I/O 模块需要 libxml且 PHP 示例不支持图片导出。需要再次强调的是 README 的告诫这套浏览器要求基于 2020 年的浏览器版本制定EOL 后的代码库在更新的浏览器版本上可能出现功能退化生产环境务必实测。获取帮助、社区支持与现状提醒README 的 Support 一节说明了官方支持渠道Stack Overflow 上设有mxgraph标签提问前应遵守 Stack Overflow 的选题规范否则问题很可能被关闭。同时 README 坦言如果读者需要活跃的持续支持更稳妥的路线是商业图表产品如 yFiles、GoJS 等同类工具而 mxGraph 本身由于已停止开发官方不提供积极维护。此处的现实含义是mxGraph 更适合作为功能完备、经过大规模生产验证的成熟开源实现来借鉴、移植或在其基础上做内部维护新项目立项时则应把维护成本与浏览器演进风险纳入决策。结语mxGraph 是一套结构清晰、功能完备且沉淀了近二十年生产经验的纯客户端 JavaScript 图表库view/model为核心的图组件、handler交互层、layout布局算法、io的 XML 编解码、editor应用外壳配合 80 余个可运行示例与三套文档体系构成一个完整的可学、可用、可改的图表技术栈。本文以 README.md 为骨架串联起仓库中的 教程、用户手册、源码说明、Hello, World 示例 与 根目录导航覆盖了定位、现状、上手、架构、事件、配置、扩展与部署的完整链路。开发者可以将 Hello, World! 作为起点逐层深入示例目录并结合 JavaScript API 规格 与 ChangeLog 继续研读同时在 EOL 状态下务必结合自身项目的浏览器兼容性预期与长期维护策略做出取舍。赞分享UI组件前端图形学【免费下载链接】mxgraphmxGraph is a fully client side JavaScript diagramming library项目地址https://gitcode.com/gh_mirrors/mx/mxgraph点击查看免费下载相关推荐如何快速掌握跨平台工具面向Mac用户的Windows启动盘制作完整指南如何快速掌握跨平台工具面向Mac用户的Windows启动盘制作完整指南 你是否曾经遇到过这样的尴尬时刻朋友拿着一台老旧的Windows电脑来找你帮忙重装系统桌面应用LaTeX Workshop终极指南如何在VS Code中高效排版学术论文LaTeX Workshop终极指南如何在VS Code中高效排版学术论文 还在为复杂的LaTeX环境配置而烦恼吗LaTeX Workshop作为VS Co开发工具IDEJavaScript PDF生成完整指南纯JS客户端PDF库快速上手JavaScript PDF生成完整指南纯JS客户端PDF库快速上手 pdfmake是一个强大的纯JavaScript PDF生成库支持客户端和服务器端使用前端后端上一篇HTTPLab快捷键大全提升调试效率的终极清单下一篇Luch-Request 项目常见问题解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考