graph-engine v1.0.2

Graph

中文README: https://github.com/aiyojun/graph-engine/blob/main/README_ZH.md

Graph is a GUI tool that describes a model of things using nodes and lines. Node data visualization, modular editing, data import and export and other functions. Written in Typescript and rendered by the native DOM api, with no front-end framework intrusion and maximum performance. The subproject graph-engine is the core rendering engine of Graph and can be imported as node_module. Provide concise api invoking. Can be Integrated with any front-end framework (react/vue). Support electron localization deployment.

electron version(machine vision algorithm application, my another opensource project)：

Usage

import { Graph } from 'graph-engine'

// Create and mount the default theme graph:
const graph = new Graph()
    .mount(document.getElementById('root'))

// Create a node without any in/out ports:    
const node = graph.createNode({ x: 0, y: 0, w: 100, h: 40 })

// More functions please refer to documentation ...
    

Application

Any problem that can be described using nodes and wires can be described using Graph for data visualization, model manipulation, JSON generation, and more. Graph does not constrain your imagination and creativity, it can bring your wild ideas to life.

The functions that can be completed include but are not limited to the following:

1. Visualize topology data
2. Construction flow chart
3. Flow model simulation
4. ...

Features

Currently, the project provides the following features:

Function points related to Graph (basic function)

Function points associated with Node

Function points associated with Wire

Other functions

Node exists only as a drag-and-drop container, and you can put any element, no matter how complex, into the created Node.

Advantages and characteristics

• You can leave drag-and-drop nodes, module wiring, etc. to graph-engine and focus on the data logic itself.
• Very smooth operation experience; Concise api invoking; Seamless integration of any model; Super extensibility...
• Achieve browser native performance without any framework intrusion. There is no limit to the number of loaded nodes, and the performance depends entirely on the performance of your browser and the computer you are using.
• Up to the browser console performance monitor, no script invoking time cost unless necessary.
• Can be integrated with any framework! You can create a node for a Vue component, a node for a React component, or even your own framework with a simple call to the mount interface.
• If you choose Graph, then don't consider using any flow-chart-graph related projects (not necessarily, I'm shallow)! The performance and architecture beat all flow engines...

If you want to know more about other flow projects, do some research and comparison, etc., similar projects are:

1. react-flow(react)
2. vue-flow(vue)
3. flowy-vue
4. flowy
5. WireFlow
6. react-flow-chart
7. uber/react-digraph