At the beginning of LogicFlow overhand

Because the previous use of G6-Edit, after turning over to use too much, too much convenience, mainly g6-Edit is not complete and detailed documentation, it seems that there is no open source can not be commercial.

Logicflow has very good flow chart editing capabilities

Install LogicFlow using NPM or YARN.

# npm
$ npm install @logicflow/core --save

# yarn
$ yarn add @logicflow/core
Copy the code

Once the installation is complete, reference it using import or require.

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
Copy the code

It’s very simple to use

1. Use JSON data format to render LogicFlow. The data needs to have nodes and edges fields represented by arrays:

const data = {
  / / the node
  nodes: [{id: 50.type: 'rect'.x: 100.y: 150.text: 'hello'}, {id: 21.type: 'circle'.x: 300.y: 150],},/ / edge
  edges: [{type: 'polyline'.sourceNodeId: 50.targetNodeId: 21,}]};Copy the code

2. Create an instance of LogicFlow and pass in parameters to control the canvas, such as the size of the canvas.

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  stopScrollGraph: true.stopZoomGraph: true.width: 500.height: 500.grid: {
    type: 'dot'.size: 20,}});Copy the code

3. Render the canvas using the instance you just created.

lf.render(data);
Copy the code

At this point, we have created the simplest example possible.

You can drag and drop logicFlow nodes, and the lines between two nodes can be freely connected, which is very editable.

The LogicFlow API is very powerful, including the control bar and the drag bar can be very simple implementation of the API

The control panel

import LogicFlow from '@logicflow/core';
import { Control } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'

LogicFlow.use(Control);
Copy the code

Drag the panel

import LogicFlow from '@logicflow/core';
import { DndPanel } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'

LogicFlow.use(DndPanel);
Copy the code

And so on functions can be called API quickly in the implementation. The various apis including nodes are really a very powerful and thoughtful framework for developing a drag-and-drop flowchart editor with simple drops of code.

It also has a very high degree of customization, if the API template does not meet the requirements can be highly customized components and related methods.