Search
Loading the Library

There are several ways to load the diagramming library, depending on your project's needs. This guide covers the most common approaches:

  • Simple & Quick: Use <script> tags to get started on a basic HTML page right away.
  • Modern & Browser-native: Use modern ES Modules with an importmap.
  • Professional & Scalable: Install npm package for projects that use a bundler like Webpack or Vite.

Choose the method that best fits your development setup.

A Note on Library Structure

The library is organized into six main modules or namespaces: Collections, Controls, Drawing, Diagramming, Animations and Graphs. In the UMD distribution, these are accessed via the global `MindFusion` object (e.g., `MindFusion.Diagramming`). When using ES modules or npm packages, you'll typically import these modules directly. You will see these concepts in action in the examples below. 

For more information on JavaScript modules see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules.

Loading UMD namespaced scripts

UMD is a pattern of universal module definition for JavaScript modules. These modules are capable of working irrespective of the executing environment. In web browsers, it exposes the module functionality to the global scope.

In order to load the UMD scripts, add references to files from diagram distrbution's /umd folder using <script> tags. Note that the order of the scripts matters: controls.js must be loaded after collections and drawing, and diagramming.js must be loaded after animations and graphs. After these scripts are loaded, you can access the global MindFusion namespace object from your code.

HTML  Copy Code

<!DOCTYPE html>
<html>
<head>
    <title>My First Diagram</title>

    <!-- 1. Load the library scripts -->
    <script src="umd/collections.js" type="text/javascript"></script>
    <script src="umd/drawing.js" type="text/javascript"></script>
    <script src="umd/controls.js" type="text/javascript"></script>
    <script src="umd/animations.js" type="text/javascript"></script>
    <script src="umd/graphs.js" type="text/javascript"></script>
    <script src="umd/diagramming.js" type="text/javascript"></script>
</head>
<body>

    <!-- 2. Define the container for the diagram -->
    <div style="width: 600px; height: 400px; overflow: auto; border: 1px solid #ccc;">
        <canvas id="diagram" width="2100" height="2100">
        This page requires a browser that supports HTML 5 Canvas element.
        </canvas>
    </div>

    <script type="text/javascript">
        // 3. The diagramming API is now accessible via global MindFusion object
        document.addEventListener("DOMContentLoaded", function () {
            console.log(`Your MindFusion.Diagramming version is: ${MindFusion.Diagramming.Diagram.version}`);
            var DiagramView = MindFusion.Diagramming.DiagramView;
            var diagramView = DiagramView.create(document.getElementById("diagram"));
        });
    </script>

</body>
</html>

Loading ES6 modules via importmap

Diagram's ES6 modules conform to modern JavaScript module definition that supports native import and export statements. You could import these modules directly, without using any additional module/package libraries or tools, by defining your script file as a module via <script type="module"> tag:

HTML  Copy Code

<script src="app.js" type="module"></script>

In order to make the diagram's ES6 modules available for importing, add the following importmap, referencing the scripts, contained in distribution's /esm folder. The purpose of the importmap is to define a map of module names which allow using import specifiers such as import {x} from "@mindfusion/diagramming" (instead of a relative path to the corresponding script file), both internally and in in your code.

HTML  Copy Code

<script type="importmap">
{
    "imports":
    {
        "@mindfusion/collections":"./esm/collections.js",
        "@mindfusion/controls":"./esm/controls.js",
        "@mindfusion/drawing":"./esm/drawing.js",
        "@mindfusion/diagramming":"./esm/diagramming.js",
        "@mindfusion/graphs":"./esm/graphs.js",
        "@mindfusion/animations":"./esm/animations.js"
    }
}
</script>

Now you can consume the modules you need by importing them into your app.js:

JavaScript  Copy Code

import * as Diagramming from '@mindfusion/diagramming';
import * as Drawing from '@mindfusion/drawing';

var diagramView = Diagramming.DiagramView.create(
    document.getElementById("diagram"), diagram);

As of late 2024, importmap is now supported by all major modern browsers, including Chrome, Firefox, Edge, and Safari. For compatibility with older browsers, you can still use a polyfill like the https://github.com/guybedford/es-module-shims library.You can always check the latest support details at https://caniuse.com/import-maps.

Loading npm packages and bundling

There are six npm packages that provide the functionality of MindFusion.Diagramming, each containing the corresponding module. To use JsDiagram in a project, you only need to install the @mindfusion/diagramming package, the rest will be automatically added as dependencies:

npm install @mindfusion/diagramming

Each of the packages contains three distributions - ES module, CommonJs module and UMD, that you can use depending on your project setup.

To consume a module as a CommonJS module, use the 'require' statement. The CommonJs version of the module will be loaded from the /dist/cjs folder, as specified in the package.json's main field.

JavaScript  Copy Code

const Diagramming = require('@mindfusion/diagramming');
const { DiagramView } = require('@mindfusion/diagramming');

To consume a module as an ES6 module, use the 'import' statement. The ES6 version of the module will be loaded from the /dist/esm folder, as specified in the package.json's module field.

JavaScript  Copy Code

import * as Diagramming from '@mindfusion/diagramming';
import { DiagramView, Diagram } from '@mindfusion/diagramming';

A sample webpack bundle configuration is shown in Samples\MinApp\TypeScript\WebPack folder of distribution:

package.json  Copy Code

...
"dependencies": {
    "@mindfusion/diagramming":"^4.8.2"
},
...

MindFusion.Diagramming for JavaScript Programmer's Guide © 2026 MindFusion