你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用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: 支持点击线进

demo里，样式和HTML写在demo.html，js写在了demo.js，用到的示例数据写在了metadata.js,是一个数组。其他主要的东西还有：jquery-2.1.4.min.js、jquery-ui.min.js、jquery-ui.custom.min.css、jsPlumb-2.2.8.js剩下的bootstrap相关的都是为了页面美观才加进去的，和核心功能无关。 至于jsPlumb的用法，在demo.js中都有标记。