All Projects → DesignHhuang → flowchart-angular6

DesignHhuang / flowchart-angular6

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to flowchart-angular6

ionic4-angular6-crud-example
Building CRUD Mobile App using Ionic 4, Angular 6 and Cordova
Stars: ✭ 50 (+8.7%)
Mutual labels:  typescript2, angular6
angular-seat-charts
Angular Seat Charts Generator
Stars: ✭ 33 (-28.26%)
Mutual labels:  angular6
Imove
Move your mouse, generate code from flow chart
Stars: ✭ 3,282 (+7034.78%)
Mutual labels:  flowchart
AuthGuard
Example repo for guarding routes post
Stars: ✭ 42 (-8.7%)
Mutual labels:  angular6
spring-boot-angular-maven-starter
An example of Spring Boot and Angular 6 integration with the help of Maven and Kotlin.
Stars: ✭ 13 (-71.74%)
Mutual labels:  angular6
dragonfly-dag
完全支持Vue3和Vitejs的DAG流程图组件
Stars: ✭ 54 (+17.39%)
Mutual labels:  flowchart
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+4434.78%)
Mutual labels:  flowchart
Ecommerce
Angular 6 Ecommerce Application POC
Stars: ✭ 46 (+0%)
Mutual labels:  angular6
ng-walkthrough
A walkthrough for Angular
Stars: ✭ 21 (-54.35%)
Mutual labels:  angular6
mermaid.ink
Given a mermaid code (markdown-like), serve an image for you
Stars: ✭ 43 (-6.52%)
Mutual labels:  flowchart
claim-reporter-pwa-poc
Example PWA application with Angular 6 and backend with Node
Stars: ✭ 39 (-15.22%)
Mutual labels:  angular6
flowjs
FlowJS allows you to render dynamic, animated flow charts using HTML5 canvas
Stars: ✭ 51 (+10.87%)
Mutual labels:  flowchart
file-input-accessor
Angular directive that provides file input functionality in Angular forms.
Stars: ✭ 32 (-30.43%)
Mutual labels:  angular6
Warewolf
Effortless Microservice Design and Integration. This repository includes the code-base for the Warewolf Studio and Server.
Stars: ✭ 238 (+417.39%)
Mutual labels:  flowchart
ng-xform
esss.github.io/ng-xform/home
Stars: ✭ 18 (-60.87%)
Mutual labels:  angular6
Wireflow
Wireflow - user flow chart real-time collaborative tool
Stars: ✭ 2,788 (+5960.87%)
Mutual labels:  flowchart
ng-sunPawd
基于ng-zorro实现的Angular后台基础框架
Stars: ✭ 43 (-6.52%)
Mutual labels:  angular6
container-flow-chart
Immediately create your own unique variation of this popular C++ 11 Standard Container Flowchart at https://drive.google.com/file/d/1wAUsTIeKRgSfo0m-3rR4P6Boi3FuixEk/view
Stars: ✭ 12 (-73.91%)
Mutual labels:  flowchart
ts-mock-imports
Intuitive mocking library for Typescript class imports
Stars: ✭ 103 (+123.91%)
Mutual labels:  typescript2
bpmn
BPMN diagrams in R
Stars: ✭ 16 (-65.22%)
Mutual labels:  flowchart

flowchart-angular6

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

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

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

demo演示

image image

实现的功能:

  • 拖拽式添加节点
  • 拖拽式连线
  • 删除节点
  • 双击连接线删除连接线
  • 设置参数
  • 上传文件
  • 流程图转json数据
  • json数据转流程图
  • 连接线中新增按钮功能,可点击选择文件

使用

  • clone代码
  • npm install
  • ng serve
  • 在浏览器中浏览:localhost:4200
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].