https://github.com/designhhuang/flowchart-angular6

一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例
https://github.com/designhhuang/flowchart-angular6

angular6 flowchart jquery jsplumb ngx-drag-drop typescript typescript2

Last synced: 2 months ago
JSON representation

一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例

• Host: GitHub
• URL: https://github.com/designhhuang/flowchart-angular6
• Owner: DesignHhuang
• Created: 2018-08-09T08:37:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-15T10:16:52.000Z (over 6 years ago)
• Last Synced: 2025-06-10T07:43:41.645Z (6 months ago)
• Topics: angular6, flowchart, jquery, jsplumb, ngx-drag-drop, typescript, typescript2
• Language: JavaScript
• Size: 6.61 MB
• Stars: 46
• Watchers: 4
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# flowchart-angular6

一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例(目前已更新到Angular 7版本)

### 更新：解决ng-zorro版本更新带来的图标加载问题(由于集成了两种icon加载方式，弹出框的icon会出现两个，之后有时间再修改)

* 网上找了很久都没有找到用angular实现的可拖拽式的流程图组件，于是就基于jsplumb自己写了一个，实现了一些基本的功能，后续可能会再添加点。

### demo演示

![image](https://github.com/DesignHhuang/flowchart-angular6/blob/master/src/assets/image/yanshi.gif)

![image](https://github.com/DesignHhuang/flowchart-angular6/blob/master/src/assets/image/yanshi2.gif)

### 实现的功能：

> * 拖拽式添加节点

> * 拖拽式连线

> * 删除节点

> * 双击连接线删除连接线

> * 设置参数

> * 上传文件

> * 流程图转json数据

> * json数据转流程图

> * 连接线中新增按钮功能，可点击选择文件

### 使用

> * clone代码

> * npm install

> * ng serve

> * 在浏览器中浏览：localhost:4200