@html-graph/core NPM

Graph visualization library that enables to customize nodes using HTML

Visit live demo

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

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

Features:

easy nodes customization using HTML
wide configuration options out of the box
draggable and scalable canvas with draggable nodes
exhaustive set of examples
typescript support
mobile devices support

Getting started:

npm i @html-graph/core

import { Canvas, ApiPortPayload } from "@html-graph/core";

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, ApiPortPayload>] {
  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.