**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

vue-flow-topology 介绍 vue-flow-topology 该项目可以看做是一个独立的 Vue 项目（大数据流水线拓展流程工作台），也可以嵌入到其他vue项目中使用，新版会作为优先版本持续迭代。 版本一：基于 Vue-cli3.0 + view-design + JSPlumb 开发（ master 分支 ）。 版本二：基于 Vue-cli3.0 + Ant Design Vue + JSPlumb 开发（ simple 分支 ）。 特性 :check_mark_button: 支持画布重绘、拖拽、放大、缩小功能 :check_mark_button: 支持鼠标滚轮缩放画布功能 :check_mark_button: 支持拖拽、添加、删除节点功能 :check_mark_button: 支持不同连线类型进行关联节点功能 :check_mark_button: 支持删除连线、重绘连线功能 :check_mark_button: 支持点击画布设置属性功能 :check_mark_button: 支持点击节点设置属性功能 :check_mark_button: 支持点击线进