VGraph, more than just a graph visualization engine, but also a solution for graph analysis.

Introduction • Demo • Tutorial •

English | 简体中文

VGraph is the graph visualization and analysis engine of VisActor. The core capabilities are as follows:

• Rich elements: Built-in multiple nodes, edges and other graph elements to meet the drawing needs of various graph analysis scenarios such as flowcharts, mind maps, and DAGs.
• High performance: Based on the high-performance rendering engine, it supports smooth interaction of tens of thousands of nodes and edges.
• Rich interaction: Built-in rich interaction, supports custom interaction to meet various interactive analysis needs.
• Layout on demand: Supports a variety of built-in layouts and custom layouts, which can be combined and switched at will.

This repository includes the following packages:

1. @visactor/vgraph: The core code repository of VGraph
2. @visactor/react-vgraph: The VGraph component encapsulated based on React
3. @visactor/react-vgraph-ui: Some React UI components for VGraph

# npm
$ npm install @visactor/vgraph

# yarn
$ yarn add @visactor/vgraph

import { Graph } from '@visactor/vgraph';
// prepare data
const data = {
    nodes: [{
        id: 'Hello',
        x: 100,
        y: 100,
    }, {
        id: 'World',
        x: 300,
        y: 100,
    }],
    edges: [{
        source: 'Hello',
        target: 'World',
    }],
};
const spec = {
  //  specify the graph container
  container: 'graphContainer',
  width: 800,
  height: 600,
  //  configure node style
  setDefaultNode(nodeData) {
      return {
          label: nodeData.id,
          width: 100,
          height: 40,
      }
  }
};
// create graph instance
const vgraph = new Graph(spec);
// import data
vgraph.data(data);

First of all, please install @microsoft/rush

$ npm i --global @microsoft/rush

Then clone locally:

# clone
$ git clone [email protected]:VisActor/VGraph.git
$ cd vgraph
# install dependencies
$ rush update
# start vgraph development server
$ rush start
# start document development server
$ rush docs

Maintainers can read the release guide for npm publishing.

• Homepage
• Graph Examples
• VGraph Tutorials
• CodeSandbox Template for bug reports

If you would like to contribute, please read the Code of Conduct and our contributing guide first。

Small streams converge to make great rivers and seas!

This project is licensed under the MIT License.

Third-party runtime and peer dependency licenses are listed in THIRD_PARTY_LICENSES.md.