js流程图：aworkflow.js、aiflowjs

项目地址

https://github.com/auto-workflow/aiflow

AIFlow

简单易用的流程图库，可用于流程图展示，也可用于拖拉拽工作台模式

demo

拖拉拽工作台：https://auto-workflow.github.io/aiflow/output/demo/dag/index.html

动画：https://auto-workflow.github.io/aiflow/output/demo/animate/index.html

自动排序：https://auto-workflow.github.io/aiflow/output/demo/autosort/index.html

自定义模版：https://auto-workflow.github.io/aiflow/output/demo/custom/index.html

默认模版的各种操作：https://auto-workflow.github.io/aiflow/output/demo/defaultTemplate/index.html

流程图：https://auto-workflow.github.io/aiflow/output/demo/process/index.html

技术文档

API文档

https://auto-workflow.github.io/aiflow/doc/api/AIFlow.html

快速开始

安装

npm i aiflow

引用

import AIFlow from 'aiflow';

1，定义node:

let node1 = {    // 唯一标识，必须    id: '123',    // 自定义数据，用于填充模版    defineData: {        nodeName: '数据拆分'    },    // 画布中位置    position: [100, 100],    // 输入圈，对象数组，每个对象表示一个输入，以下标区分    input: [        {        }    ],    // 输出圈，对象数组，每个对象表示一个输出。enbaleInputs：对象数组，每个对象定义可以输入的圈信息（id对应节点，inputIndex对应输入点下标），如果undefined,则所以输入点都能连接，如果是空数组，则所有输入点都不能连接。    output: [        {            enbaleInputs: [{                id: '124',                inputIndex: 0            }]        }    ]};let node2 = {    // 使用的模版，默认使用defaultTemplate    templateName: 'iconTemplate',    id: '124',    defineData: {        nodeName: '随机采样',        imgSrc: 'base64'    },    // 画布中位置    position: [300, 100],    // 输入    input: [        {        }    ],    // 输出    output: [    ]};

2，定义节点关系:

let edges = [    {        // 输出节点及输出圈，‘123:0’表示id为123的node的下标为0的输出点        src: '123:0',        // 输入节点及输入圈，'124:0'表示id为124的node的下标为0的输入点        to: '124:0'    }];

3，实例化:

// 全局配置let globalConfig = {    // 是否静态图片，true：节点和连线都不可拖动，false：不做限制    isStatic: false,    // 整个图默认模版，默认为defaultTemplate    templateName: 'defaultTemplate',    // templateName: 'iconTemplate',    // 自动排序参数配置    autoSort: {        // 是否需要自动排序，true: 程序智能计算每个node的位置，false: 根据node position来定位        on: true        // 可选，开启自动排序时，配置type。不配置 使用默认排序方法，withMedium: 使用中位数排序法        type: 'withMedium',        // 自动排序时，true: 水平排序，false: 垂直排序        horizontal: false,        // 可选，node对齐方式，start: 水平排列时表示上对齐，垂直排列时表示左对齐 middle: 中间对齐 end: 水平排列时表示下对齐，垂直排列时表示右对齐        align: 'middle',        // 可选，beginX 起点X坐标，默认10 可选类型 number | 'center' | 'left' | 'right'        beginX: 30,        // 可选，beginY 起点Y坐标，默认10 可选类型 number | 'middle' | 'top' | 'bottom'        beginY: 30,        // 可选，spaceX 横向间距，默认200        spaceX: 200,        // 可选，spaceY 纵向间距，默认100        spaceY: 60,        // 可选，开启中位数排序法时，处理超出画布逻辑 默认'default'(起点变为0，0) | justify(自动左上角移动) | hidden(隐藏超出部分)        overflow: 'hidden',        // 可选 设定分层方法。不填写 默认分层方法 ｜ barycenter: 重心法，所有节点尽量往底层放        hryType: 'barycenter'    }};// 实例化let workflow = new AIFlow(document.getElementById('aw'), {nodes, edges}, globalConfig);

效果一览