**JSplumb-jquery 插件详解** JSplumb 是一个功能强大的JavaScript库，它允许开发者在HTML页面上创建和管理动态连接，常用于构建流程图、网络拓扑图等可视化应用。结合jQuery库，JSplumb 可以更加便捷地操作DOM元素，实现更加流畅的交互效果。 **1. JSplumb 的核心功能** - **连接管理**：JSplumb 提供了丰富的API来创建、删除、更新和管理连接。连接可以是直线、曲线或者自定义路径，且支持动态调整。 - **端点（Endpoint）定义**：端点是连接的起点和终点，JSplumb 允许自定义端点的形状、大小、颜色等属性，甚至可以设置为可拖动，增强了用户交互性。 - **事件监听**：通过监听各种事件，如连接创建、删除、移动等，可以实时响应用户的操作，实现动态交互。 - **样式定制**：连接线的颜色、宽度、箭头、透明度等都可以自由定制，满足不同场景的需求。 - **动画支持**：JSplumb 支持连接线的动画效果，如平滑过渡、缩放等，提升用户体验。 **2. 使用JSplumb与jQuery的结合** - **jQuery选择器**：利用jQuery强大的选择器，可以快速定位到页面上的特定元素，作为JSplumb的端点或连接目标。 - **事件委托**：jQuery的事件委托机制可以帮助处理动态添加的元素，使得JSplumb的连接管理更加灵活。 - **DOM操作**：jQuery简化了对DOM的操作，与JSplumb结合，可以轻松地在创建连接时同步更新HTML结构。 **3. jsPlumb-1.6.4 版本特性** - **性能优化**：1.6.4版本对代码进行了优化，提高了渲染速度和响应速度，降低了内存占用。 - **API改进**：此版本可能引入了一些新的API和方法，提供了更方便的接口来控制连接和端点。 - **兼容性提升**：1.6.4版本增强了对不同浏览器和设备的支持，包括触摸设备。 - **文档完善**：官方文档对于1.6.4版本的API和示例有详尽的解释，方便开发者查阅和学习。 **4. 示例与实践** - **基本使用**：创建一个端点并连接到另一个端点，可以通过`jsPlumb.addEndpoint()`和`jsPlumb.connect()`实现。 - **拖放功能**：通过`jsPlumb.draggable()`使端点或元素可拖动，可以创建可自由布局的流程图。 - **连接线样式**：使用`jsPlumb.connect({connector: "Bezier", paintStyle: {stroke: "blue", strokeWidth: 4}})`定义连接线样式。 - **事件处理**：注册事件监听器，例如`jsPlumb.bind("connection", function(info) {...})`处理连接创建事件。 - **自定义端点**：通过`jsPlumb.Endpoints`和`jsPlumb.extend()`创建自定义端点类型。 总结，JSplumb-jquery 结合了JSplumb的强大功能和jQuery的便利性，为开发基于HTML的流程图和网络图应用提供了强大的工具。通过理解和掌握这个插件，开发者能够轻松构建出交互性强、视觉效果佳的可视化应用。在实际项目中，可以根据需求选择合适的版本，并充分利用提供的API和文档进行定制化开发。

**jsPlumb 概述** jsPlumb 是一个开源JavaScript库，专为在Web应用程序中绘制连接图和拓扑图而设计。它基于HTML5 canvas、SVG或VML技术，能够在各种现代浏览器上运行，包括IE6+、Firefox、Chrome、Safari和Opera。这个库的主要目标是提供一种简单易用的方式来创建和操作这些可视化图表，同时保持高度的灵活性和可定制性。 **主要功能** 1. **连接元素**：jsPlumb 提供了一种方便的方式，可以在页面上的DOM元素之间建立动态连接。这些连接可以是直线、曲线或其他自定义形状，可以包含箭头和其他视觉标记。 2. **端点管理**：每个连接都有两个端点，jsPlumb允许用户定义端点的外观和行为，例如大小、形状、颜色以及它们如何响应用户的拖动操作。 3. **事件监听**：库提供了丰富的事件机制，如连接的创建、删除、移动等，可以方便地与其他JavaScript库或应用逻辑交互。 4. **动画支持**：jsPlumb 支持平滑的动画效果，如连接的淡入淡出、移动等，使得交互更富动态性。 5. **预定义样式**：内置了一些预定义的样式，如连接线的颜色、宽度和样式，也可以自定义样式以满足个性化需求。 6. **工具提示和标签**：可以在连接和端点上添加工具提示或标签，提供额外的信息展示。 7. **可扩展性**：jsPlumb 设计时考虑了插件系统，可以通过编写插件扩展其功能，比如添加新的连接类型、端点类型等。 **优化与修改** 在您提到的"绘画巨作"基础上进行的优化和修改可能涉及以下几个方面： 1. **性能提升**：可能对连接和端点的渲染算法进行了优化，减少了计算量，提高了页面的响应速度。 2. **用户体验**：可能改进了用户交互设计，使拖动连接、选择元素等操作更加流畅和自然。 3. **错误修复**：解决了原代码中的某些bug，提高了程序的稳定性和可靠性。 4. **功能增强**：可能添加了新的特性或功能，比如新的端点类型、连接约束条件等，以满足特定需求。 5. **兼容性**：可能增强了对不同浏览器或不同版本的兼容性，使得应用能在更多环境下正常工作。 **应用场景** jsPlumb 库广泛应用于以下场景： 1. **网络架构图**：在展示服务器、路由器等设备间的网络拓扑结构时，jsPlumb 可以轻松地创建和调整连接。 2. **流程图**：在业务流程模拟或工作流设计中，用于描绘各个步骤之间的关系。 3. **数据可视化**：将复杂的数据模型通过连线表示，便于理解和分析。 4. **UI设计**：在布局编辑器或原型设计工具中，用以构建组件间的连接。 5. **教学工具**：在教学环境中，帮助解释和演示概念之间的关系。 **学习与实践** 要掌握 jsPlumb，你需要了解基本的HTML和JavaScript知识，然后通过阅读官方文档、查看示例代码和实践项目来熟悉它的API和用法。在实践中不断优化和调整，你会发现 jsPlumb 是一个强大的工具，可以帮助你创建出富有表现力和交互性的拓扑图。

你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。

官方修改jsplumbtoolkit.js,取消自带域名访问限制，亲测可用

vue-jsplumb-editor 功能点 菜单节点区域 从菜单中拖动一个节点到主设计区域，可放置该节点 按节点类型组织节点 主设计区域 操作可撤销 背景的平移和缩放 可接收从菜单中拖入的节点 拖入的节点会根据当前的节点信息生成对应的端点（用于拖出连线） 生成的端点分两种类型：源端点和目标端点，应在样式上作区分 源端点放置在节点bottom位置，目标节点防止在节点的top位置（便于从上往下拖出连接线） 所有节点可通过拖拽移动位置 所有节点和连接线可删除 所有节点和端点在鼠标悬浮需要有tooltip框来提示节点或端点信息 所有节点、端点和连接线在鼠标悬浮时需要设置不同的样式 所有节点和连接线可被选中 操作实时保存数据 导入数据生成流程图 节点配置区域 在设计区域选中节点时，节点配置区域会显示一个对应的节点配置面板 不同节点应拥有对应的节点配置面板 节点面板用来

JsPlumb 所有 JsPlumb 示例 HTML5Application_jsplumbDemo 是一个 NetBeans 项目。 即使没有服务器，它也只能在 Firefox 中工作。

流程图-角度6 一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例（当前已更新到Angular 7版本） 更新：解决ng-zorro版本更新带来的图标加载问题（由于集成了两种图标加载方式，放置框的图标会出现两个，之后有时间再修改） 网上找了很久都没有找到用角度实现的可拖拽式的流程图组件，于是就基于jsplumb自己写了一个，实现了一些基本的功能，后续可能会再添加点。 演示 实现的功能： 拖拽式添加例程 拖拽式连线 删除摘要 双击连接线删除连接线 设定参数 发布文件 流程图转json数据 json数据转流程图 连接线中新增按钮功能，可点击选择文件 使用 克隆代码 npm安装

jsPlumb-1.7.4.zip

jsplumb-2.9.2.min.js 可用于网络拓扑图、连线图。

语音播报、菜单类型demo，含（节点拖动创建，线条双击删除，节点及端点删除等功能） 效果图：https://blog.csdn.net/lihong22/article/details/105412363