HTMLGraph

Getting started

First, let’s include the library in your project and create a canvas. You have several options to do this:

  1. Via npm
    
npm i @html-graph/html-graph

and use it like this

    
import { CanvasBuilder } from "@html-graph/html-graph";

const element = document.getElementById('canvas');

const canvas = new CanvasBuilder()
  .setElement(element)
  .build();
  1. Local file as module

Download html-graph.js from releases and use it like this

    
<script type="module">
  import { CanvasBuilder } from "/html-graph.js";

  const element = document.getElementById('canvas');

  const canvas = new CanvasBuilder()
    .setElement(element)
    .build();
</script>
  1. Local file as UMD

Download html-graph.umd.cjs from releases and use it like this

    
<script src="/html-graph.umd.cjs"></script>
<script>
  const element = document.getElementById('canvas');

  const canvas = new HtmlGraph.CanvasBuilder()
    .setElement(element)
    .build();
</script>

Here’s a basic example of graph visualization:

Basic example