@diyguy/graphflow v0.0.26

GraphFlow

Graph visualization library that enables to create graph nodes using HTML

Instead of connecting nodes dirrectly this library uses concept of ports, which provide greater fexibility at managing connections. Port is an entity of node to which connection can be attached to.

This library fits for tasks where easy nodes customization and interactiveness are required.

Features:

• easy customization of nodes using HTML
• wide configuration options out of the box
• draggable and scalable canvas with draggable nodes
• typescript support

Getting started:

npm i @diyguy/graphflow

import { Canvas } from "@diyguy/graphflow";

const canvasElement = document.getElementById("canvas")!;

const canvas = new Canvas(canvasElement, {
  scale: { enabled: true },
  shift: { enabled: true },
  nodes: { draggable: true },
  background: { type: "dots" },
});

function createNode(
  name: string,
  frontPortId: string,
  backPortId: string,
): [HTMLElement, Record<string, HTMLElement>] {
  const node = document.createElement("div");
  node.classList.add("node");

  const frontPort = document.createElement("div");
  frontPort.classList.add("port");
  node.appendChild(frontPort);

  const text = document.createElement("div");
  text.innerText = name;
  node.appendChild(text);

  const backPort = document.createElement("div");
  backPort.classList.add("port");
  node.appendChild(backPort);

  return [node, { [frontPortId]: frontPort, [backPortId]: backPort }];
}

const [node1, ports1] = createNode("Node 1", "port-1-1", "port-1-2");
const [node2, ports2] = createNode("Node 2", "port-2-1", "port-2-2");

canvas
  .addNode({ element: node1, x: 200, y: 400, ports: ports1 })
  .addNode({ element: node2, x: 600, y: 500, ports: ports2 })
  .addConnection({ from: "port-1-2", to: "port-2-1" });

Refer to Examples for more.

Refer to Development for run instructions.