HTMLGraph | Getting started

Getting Started

First, include the library in your project and create a canvas. You have several options:

1. Install via npm (recommended)

    
npm i @html-graph/html-graph

Then use it:

    
&lt;div id=&#34;canvas&#34;&gt;&lt;/div&gt;

    
import { CanvasBuilder } from &#34;@html-graph/html-graph&#34;;

const element = document.getElementById(&#39;canvas&#39;);
const canvas = new CanvasBuilder(element).build();

2. Use script from CDN as ES module

    
&lt;div id=&#34;canvas&#34;&gt;&lt;/div&gt;
&lt;script type=&#34;module&#34;&gt;
  import { CanvasBuilder } from &#34;https://unpkg.com/@html-graph/html-graph@3.7.0&#34;;

  const element = document.getElementById(&#39;canvas&#39;);
  const canvas = new CanvasBuilder(element).build();
&lt;/script&gt;

3. Use local file as ES module

Download html-graph.js from releases and use:

    
&lt;div id=&#34;canvas&#34;&gt;&lt;/div&gt;
&lt;script type=&#34;module&#34;&gt;
  import { CanvasBuilder } from &#34;/html-graph.js&#34;;

  const element = document.getElementById(&#39;canvas&#39;);
  const canvas = new CanvasBuilder(element).build();
&lt;/script&gt;

4. Use local file as UMD

Download html-graph.umd.cjs from releases and use:

    
&lt;div id=&#34;canvas&#34;&gt;&lt;/div&gt;
&lt;script src=&#34;/html-graph.umd.cjs&#34;&gt;&lt;/script&gt;
&lt;script&gt;
  const element = document.getElementById(&#39;canvas&#39;);
  const canvas = new HtmlGraph.CanvasBuilder(element).build();
&lt;/script&gt;

Now you can visualize your graph by adapting the implementation of this basic example. Refer to canvas section for base API and modules section for all available advanced features.

Basic example