Basics

Graph

Let’s build our first graph by defining some nodes and edges. Nodes are the blocks and edges are the relationships between the blocks.

The data shapes require one property of id but you can pass label or icon to them to show some sort of indication what it represents.

const nodes = [
{
    id: '1',
    label: '1'
  },
  {
    id: '2',
    label: '2'
  }
];
 
const edges = [
  {
    source: '1',
    target: '2',
    id: '1-2',
    label: '1-2'
  },
  {
    source: '2',
    target: '1',
    id: '2-1',
    label: '2-1'
  }
];

These shapes above will create two elements 1 and 2 and create a relationship between them. Once we have this defined, we can simply pass these properties to the Canvas and it will do the rest!

import React from 'react';
import { GraphCanvas } from 'reagraph';
 
export const MyDiagram = () => (
  <GraphCanvas
    nodes={nodes}
    edges={edges}
  />
);

This will render a graph like this: