shashankmc / perfect-graph

Create perfect graph visualisations easily

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool



We want to build a collaborative Knowledge Graph Editor. To achive that goal we need a Graph Visualizer on a web browser and it needs to have a declarative rendering. Because in imperative style we need to call appropriate api functions respect to the data changes like addNode, deleteNode etc. But we just want to change JSON data (node and edge information) and render elements respectively to the changes.


First, install Nodejs and Yarn to your working environment. Then

yarn global add expo-cli


expo init my-project
cd my-project
yarn add perfect-graph unitx-ui unitx

After you can write this command to the terminal in your project directory

yarn web

So let's start coding

import { Graph } from "perfect-graph";

function MyGraph() {
  return (
      style={{ width: "100%", height: 250 }}
        { id: 1, position: { x: 10, y: 10 } },
        { id: 2, position: { x: 300, y: 100 } },
      edges={[{ id: 51, source: 1, target: 2 }]}

Furthermore please refer to the Components Section.


Create perfect graph visualisations easily

License:MIT License


Language:JavaScript 75.9%Language:TypeScript 24.1%Language:HTML 0.0%