This issue is recommended is an ant experience technology open source graph editing engine – X6.

X6 is a graph editing engine under AntV, which provides a series of out-of-the-box interactive components and easy-to-use node customization capabilities, which facilitates us to quickly build DAG diagrams, ER diagrams, flow charts and other applications.

Features

• Easy to customize: support to customize node styles and interactions using SVG/HTML/React/Vue
• Out of the box: built-in 10+ graph editing companion extensions, such as box selection, alignment lines, minimap, etc.
• Data-driven: Based on MVC architecture, users focus more on data logic and business logic
• Event-driven: a complete event system that can listen for any event occurring within the chart

Install X6

Install X6 via npm or yarn.

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

Once installed, use import or require to reference it.

import { Graph } from '@antv/x6'; 

If imported directly via a script tag, you can use one of three CDNS and default to returning the latest version of X6:

• • https://unpkg.com/@antv/x6/dist/x6.js
  • https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js

< li data – track = “70” > https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js (do not support for the latest version) < / li >

< script src="https://unpkg.com/@antv/x6/dist/x6.js"> < /script> 

For production environments, it’s recommended to use an explicit version number to avoid unexpected breaking with a new version:

• https://unpkg.com/@antv/x6@1.1.1/dist/x6.js
• https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js
• https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js

<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>

使用X6

1 Create the container

Creates a container on the page for the X6 plot, which can be a div tag.

< div id="container"> < /div> 

2 Prepare data

X6 supports JSON data, and the object needs to have nodes and edges fields, which are represented by arrays, respectively:

const data = {
// node 
  nodes: [
    {
      id: 'node1', // String，Optional, unique identification of the node
      x: 40,       // Number，Required, the x value of the node position
      y: 40,       // Number，Required, the y value of the node position 
      width: 80,   // Number，Optional, width value for node size 
      height: 40,  // Number，Optional, node-size height 
      label: 'hello', // String，Node tags 
    },
    {
      id: 'node2', // String，Unique identification of the node
      x: 160,      // Number，Required, the x value of the node position
      y: 180,      // Number，Required, the y value of the node position 
      width: 80,   // Number，Optional, width value for node size 
      height: 40,  // Number，Optional, node-size height 
      label: 'world', // String，Node tags 
    },
  ],
  // edge
  edges: [
    {
      source: 'node1', // String，Must, the starting node id
      target: 'node2', // String，Must, target node id
    },
  ],
};

3 Render canvas

First, we need to create a Graph object and specify a drawing container for it on the page, usually specifying the size of the canvas.

import { Graph } from '@antv/x6';
// Exposed X6 global variables when introduced using CDN  Span >
// const { Graph } = X6

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
});

If introduced via script tags, our Graph object is mounted below the X6 global variable:

<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<script>
  const graph = new X6.Graph({
    container: document.getElementById('container'),
    width: 800,
    height: 600,
  });
</script>

Then, we can use the graph we just created to render our nodes and edges.

graph.fromJSON(data)

At this point, we have the simplest Hello –> World example:

4 Background and grid

Next, let’s set a background color and mesh for the canvas, and also support background image, mesh type, etc.

import { Graph } from '@antv/x6';

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#fffbe6', // Set the background color of the canvas 
  },
  grid: {
    size: 10,      // Mesh size 10px
    visible: true, // Render a grid background 
  },
});

class=”pgc-h-arrow-right” data-track=”75″>

—END—

Open source protocol: MIT