Flow-chart-editor NPM

flow-chart-editor

JS gzip size CSS gzip size

基于cytoscape.js的流程设计器，优点是可以在流程节点中嵌套子流程，支持实/虚线、连线弯曲、撤销重做、放大缩小，导出 json/png/jpg 文档等。演示文档 Demo

在此，感谢 easyicon.net 提供的图标。

1. 预览-Preview

2. 安装使用-Install

npm 安装

推荐使用 npm 安装

npm i flow-chart-editor -S

可在页面中引用

import FCE from "flow-chart-ed";

var fce=new FCE(options...);

脚本引用

<!DOCTYPE html>
<html>
  <head>
    <title>flow-chart-editor</title>
    <script src="js/fce.1.0.0.min.js">
  </head>
  <body>
    <div id="fce"></div>
    <script>
        var fce=new FCE(options...);
        ...
    </script>
  </body>
</html>

3. 二次开发-Build

二次开发前请确保已经安装node及webpack。在控制台中执行 npm run <target>，其中：

dev：开发模式
build：执行打包

4. 文档-Document

5. 依赖-Dependencies

jquery ^3.2.1

cytoscape ^3.2.0

cytoscape-context-menus ^3.0.5

cytoscape-edge-bend-editing ^1.5.4

cytoscape-edgehandles ^3.0.2

cytoscape-grid-guide ^2.0.5

cytoscape-view-utilities ^2.0.7

cytoscape.js-undo-redo ^1.0.1

6. 捐赠-Donation

如果觉得有用可赏杯咖啡。

7. 许可证-LICENSE

MIT.

graph graph-theory network node edge vertex link analysis visualisation visualization draw render biojs cytoscape flow-chart-editor

autoprefixer-loader copy-webpack-plugin cytoscape cytoscape-context-menus cytoscape-edge-bend-editing cytoscape-edgehandles cytoscape-grid-guide cytoscape-node-resize cytoscape-undo-redo cytoscape-view-utilities eslint-friendly-formatter extract-text-webpack-plugin jquery konva url-loader

@everything-registry/sub-chunk-1683 @infinitebrahmanuniverse/nolb-flow @zalastax/nolb-flow

6 years ago

6 years ago

6 years ago

6 years ago