Now that the library is loaded, you need to add the diagram component to your HTML page. There are two primary ways to do this:

1.  The classic <canvas> element: This is a straightforward approach where you manually add an HTML <canvas> element to your page, wrapped inside a <div> that handles scrolling. It's great for simple projects or when you want explicit control over the core HTML structure.

2.  The Web Components method: This is a more modern, encapsulated approach. You use custom HTML tags (e.g. <mindfusion-diagramview>) and the library handles the internal setup for you. This is ideal for complex UIs or if you are building your application using a component-based architecture.

We will cover both methods below.

HTML elements

The DiagramView control relies on the HTML5 Canvas element to render graphics on web page. If you need to display large diagrams, place the Canvas inside a Div element.
Overflow and scrolling will be handled internally by DiagramView.

HTML  Copy Code
<div style="width: 800px; height: 600px;">     <canvas id="diagram" width="2100" height="2100">         This page requires a browser that supports HTML5 Canvas element.     </canvas> </div>

To create an instance of the DiagramView class, call its static create method, passing the DOM canvas object as argument:

JavaScript  Copy Code
var diagramView = DiagramView.create(     document.getElementById("diagram"));

The MindFusion.Diagramming toolkit includes additional user interface controls such as Ruler, Overview, NodeListView and ZoomControl. If you'd like to use any of them, you will need to add Div and/or Canvas element for each one; for an example, see the Controls sample project.

Web components

Call WebComponents.register to register each control class from the Diagramming package as a web component. After registration, you can use the following tags to create corresponding components:

• <mindfusion-diagramview> creates a DiagramView instance.
• <mindfusion-ruler> creates a Ruler instance.
• <mindfusion-zoomcontrol> creates a ZoomControl instance.
• <mindfusion-overview> creates an Overview instance.
• <mindfusion-nodelistview> creates a NodeListView instance.

When instantiated as a web component, each control class creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling controls' find method with id argument.

HTML  Copy Code
<mindfusion-diagramview     id="diagramView"     style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: auto;"> </mindfusion-diagramview>

JavaScript  Copy Code
var diagramView = DiagramView.find("diagramView"); var diagram = diagramView.diagram;

This method is demonstrated in the WebComponents.html example from the library's distribution, where you can find a complete, runnable example.