Getting Started: Building Your First Interactive JavaScript Diagram

Source: Dev.to

Overview

In this guide, we’ll walk through the steps to build a minimal but powerful JavaScript diagramming application from scratch. Here’s a sneak peek at what you’ll create:

Our finished app will use the MindFusion JavaScript Diagram library to allow users to:

• Create flowchart shapes with drag‑and‑drop.
• Customize node and link colors in real‑time.
• Edit text directly within diagram elements.
• Save the current diagram to a file and load it back.

Ready? Let’s dive in!

Setting Up the Project

To save time, we’ll build upon a ready‑made starter project from MindFusion. It provides a solid foundation with a pre‑configured vanilla JavaScript environment.

First, clone the project from GitHub and start the development server:

# Clone the repository
git clone https://github.com/MindFusionComponents/diagram-starter-vanilla

# Navigate into the project directory
cd diagram-starter-vanilla

# Install dependencies
npm install

# Start the local server
npm start

Once running, you’ll see the basic starter application, which includes a diagram canvas, an overview panel, a shape palette, and zoom controls.

The backend is a simple Express server (server.js) that serves the static files. Our main focus will be on the frontend in index.html and index.js.

Initializing the Diagram Components

The diagram and its related UI components are initialized in index.js. Each component is tied to an HTML element (a <canvas> or <div>) in index.html.

For example, the main DiagramView is created by associating it with a <canvas> element with the ID "diagram":

// create a DiagramView component that wraps the "diagram" canvas
var diagramView = MindFusion.Diagramming.DiagramView.create(document.getElementById("diagram"));
var diagram = diagramView.diagram;

Similarly, the Overview and Palette components are linked to their respective elements:

// create an Overview component
var overview = MindFusion.Diagramming.Overview.create(document.getElementById("overview"));
overview.diagramView = diagramView;

// The Palette component lets users create shapes via drag‑and‑drop
var palette = MindFusion.Diagramming.Controls.Palette.create(document.getElementById("palette"));

We can easily add predefined shapes to the palette. The code below adds a Flowchart Shapes category and populates it with common shapes like Start, Input, Process, and Decision.

palette.addCategory("Flowchart Shapes");
var shapes = ["Start", "Input", "Process", "Decision"];
for (var i = 0; i < shapes.length; i++) {
    // Add each shape to the palette (implementation details omitted)
}

(Further implementation details continue in the original guide.)

Customizing Node Appearance

We then listen for the change event on these inputs. When a new color is selected, we update a global variable and apply the new color to all currently selected nodes.

// Global variable for the default node brush color
let defaultNodeBrushColor = '#e0e9e9';

// Get the color‑picker element
const nodeColorPicker = document.getElementById('nodeColorPicker');

// Update the default color when the picker changes
nodeColorPicker.addEventListener('change', (event) => {
    defaultNodeBrushColor = event.target.value;

    // Apply the new color to every selected node
    diagram.selection.nodes.forEach(node => {
        node.brush = defaultNodeBrushColor;
    });
});

To make sure newly created nodes also use this color, handle the nodeCreated event:

// Apply the default style to nodes as they are created
diagram.nodeCreated.addEventListener((sender, args) => {
    args.node.brush = defaultNodeBrushColor;
    // …apply other default style properties here…
});

Pro tip: handling the nodeCreating event gives a live preview while the user is drawing the node, resulting in a smoother experience.

Customizing Link Appearance

By default, the routeLinks property is enabled, which makes links automatically create perpendicular segments to avoid crossing nodes.

We can also control the link’s head shape. In our app a checkbox determines whether links have a “Triangle” arrowhead or none. The headShape property is set to null to remove the arrowhead.

let defaultLinkHeadShape = 'Triangle';
const linkHeadCheckbox = document.getElementById('linkHeadCheckbox');

// Update the default head shape when the checkbox changes
linkHeadCheckbox.addEventListener('change', (event) => {
    defaultLinkHeadShape = event.target.checked ? 'Triangle' : null;

    // Apply the change to all selected links
    diagram.selection.links.forEach(link => {
        link.headShape = defaultLinkHeadShape;
    });
});

Using Anchor Patterns for Clean Connections

To enforce cleaner‑looking diagrams, we restrict where links can connect to a node by using an AnchorPattern. An anchor pattern is a set of AnchorPoint objects defined in relative coordinates (0‑100) on the node’s surface.

The pattern below allows connections only at the centre of each of the four sides:

// Define an anchor pattern that snaps to the middle of each side
const nodeAnchorPattern = new AnchorPattern([
    new AnchorPoint(50, 0,   true, true), // Center Top
    new AnchorPoint(100, 50, true, true), // Center Right
    new AnchorPoint(50, 100, true, true), // Center Bottom
    new AnchorPoint(0, 50,   true, true)  // Center Left
]);

// Later, when creating a node…
node.anchorPattern = nodeAnchorPattern;

With this pattern applied, links will snap cleanly to these connection points.

Creating the Initial Diagram

To give users a helpful starting point, we create a simple decision diagram when the page first loads. The diagram.factory object simplifies node and link creation.

// Create a start node using the factory
const startNode = diagram.factory.createShapeNode(95, 10, 30, 15);
startNode.text          = "Start";
startNode.shape         = 'Ellipse';
startNode.brush         = "#DB3955";
startNode.textColor     = "#f0f0f0";
startNode.anchorPattern = nodeAnchorPattern;

Nodes created with the factory are automatically added to the diagram’s items collection.

Video Tutorial

A video version of this tutorial is also available. Check it out here:

I truly hope this guide helps you kick‑start your journey with interactive JavaScript diagrams! If you have any questions, run into challenges, or just want to share what you’re building, please leave a comment below. I’d love to hear from you.

Conclusion

And that’s it! You’ve built a feature‑rich JavaScript diagramming application:

• Started from a basic template
• Added custom shapes and real‑time styling
• Implemented anchor points for clean connections
• Provided a predefined initial diagram

You can download the final version of this project here:
diagram-starter-2026.zip

Happy coding!

Further Resources

• MindFusion JavaScript Diagram Library
• JavaScript Diagram Samples on GitHub
• **Online Documentation