Get started with jointjs CDN

// Include the JointJS library
const script = document.createElement('script');
script.src = 'https://cdn.cdnhub.io/jointjs/3.7.7/joint.min.js';
document.head.appendChild(script);

// Wait for the library to load before initializing the graph
script.onload = () => {
  // Create a new paper with a given size
  const paper = new joint.dia.Paper({
    el: document.createElement('div'),
    width: 800,
    height: 600,
    gridSize: 10,
    model: new joint.dia.Graph(),
  });

  // Append the paper to the body
  document.body.appendChild(paper.el);

  // Create some cells
  const source = new joint.shapes.rect({
    position: { x: 100, y: 100 },
    size: { width: 50, height: 50 },
    attrs: {
      label: { text: 'Source' },
      rect: { fill: 'green' },
    },
  });

  const target = new joint.shapes.rect({
    position: { x: 200, y: 100 },
    size: { width: 50, height: 50 },
    attrs: {
      label: { text: 'Target' },
      rect: { fill: 'red' },
    },
  });

  // Add the cells to the graph and the paper
  paper.model.add(source, target);
  paper.add(source, target);

  // Create a connection between the source and target
  const link = new joint.dia.Link({
    source: { id: source.id },
    target: { id: target.id },
  });

  // Add the link to the graph and the paper
  paper.model.add(link);
  paper.add(link);

  // Refresh the paper to render the new elements
  paper.refresh();
};