{"id":15040652,"url":"https://github.com/designhhuang/flowchart-angular6","last_synced_at":"2025-10-15T18:15:05.252Z","repository":{"id":79164364,"uuid":"144124485","full_name":"DesignHhuang/flowchart-angular6","owner":"DesignHhuang","description":"一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例","archived":false,"fork":false,"pushed_at":"2019-05-15T10:16:52.000Z","size":6928,"stargazers_count":46,"open_issues_count":0,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-10T07:43:41.645Z","etag":null,"topics":["angular6","flowchart","jquery","jsplumb","ngx-drag-drop","typescript","typescript2"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DesignHhuang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-08-09T08:37:18.000Z","updated_at":"2024-12-14T15:35:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"1c42778e-d373-4133-b020-339ea62a669c","html_url":"https://github.com/DesignHhuang/flowchart-angular6","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DesignHhuang/flowchart-angular6","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignHhuang%2Fflowchart-angular6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignHhuang%2Fflowchart-angular6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignHhuang%2Fflowchart-angular6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignHhuang%2Fflowchart-angular6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DesignHhuang","download_url":"https://codeload.github.com/DesignHhuang/flowchart-angular6/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignHhuang%2Fflowchart-angular6/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267317701,"owners_count":24068481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular6","flowchart","jquery","jsplumb","ngx-drag-drop","typescript","typescript2"],"created_at":"2024-09-24T20:44:52.641Z","updated_at":"2025-10-15T18:15:05.080Z","avatar_url":"https://github.com/DesignHhuang.png","language":"JavaScript","readme":"# flowchart-angular6\n一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例(目前已更新到Angular 7版本)\n\n### 更新：解决ng-zorro版本更新带来的图标加载问题(由于集成了两种icon加载方式，弹出框的icon会出现两个，之后有时间再修改)\n\n\n* 网上找了很久都没有找到用angular实现的可拖拽式的流程图组件，于是就基于jsplumb自己写了一个，实现了一些基本的功能，后续可能会再添加点。\n\n### demo演示\n![image](https://github.com/DesignHhuang/flowchart-angular6/blob/master/src/assets/image/yanshi.gif)\n![image](https://github.com/DesignHhuang/flowchart-angular6/blob/master/src/assets/image/yanshi2.gif)\n\n\n### 实现的功能：\n\u003e * 拖拽式添加节点\n\u003e * 拖拽式连线\n\u003e * 删除节点\n\u003e * 双击连接线删除连接线\n\u003e * 设置参数\n\u003e * 上传文件\n\u003e * 流程图转json数据\n\u003e * json数据转流程图\n\u003e * 连接线中新增按钮功能，可点击选择文件\n\n### 使用\n\u003e * clone代码\n\u003e * npm install\n\u003e * ng serve\n\u003e * 在浏览器中浏览：localhost:4200\n\n\n\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignhhuang%2Fflowchart-angular6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignhhuang%2Fflowchart-angular6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignhhuang%2Fflowchart-angular6/lists"}