MindFusion Releases Diagram Library for JavaScript, V4.0

MindFusion flowchart library

The diagram library used in a web application for creating flowcharts.

BPMN flowchart built with JsDiagram

A BPMN diagram built with the diagram library for JavaScript

Org chart in JavaScript

An org chart built with MindFusion diagramming for JavaScript

MindFusion has made a major release of its popular diagram library for JavaScript publicly available. The new version is compatible with the ES6 code standards.

A free unlimited trial version of the library can be downloaded from https://mindfusion.eu/javascript-diagram.html
Learn more about MindFusion at https://mindfusion.eu/company.html”

— MindFusion LLC

SOFIA, BULGARIA, November 11, 2021 /EINPresswire.com/ — Diagramming for JavaScript, V4.0 is released with the following new features and improvements:

ES6 modules, classes and properties
JsDiagram source code has been refactored following ES6 standards, including modules, classes, properties and native collections. ArrayList, Dictionary and Set classes from MindFusion.Collections namespace have been removed, and replaced by respective JavaScript native Array, Map and Set. Get/set functions have been replaced by getter/setter properties, which should help using the diagram API with binding expressions of various JS frameworks.

Diagram view
The Diagram control has been refactored into two classes. What remains of Diagram is now just a model class that defines diagram structure and implements serialization. The new DiagramView class deals with rendering and user interaction. You can show the same diagram in several views, each one rendering at different scroll positions and zoom levels.

TreeView nodes
The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the rootItems property. Items can be added and removed individually by using the addItem and removeItem methods, or in bulk by calling the fromObject method, which loads the tree view items from an array of objects.

Print pagination
The printPreview and print methods of DiagramView let you export the diagram as a list of smaller images in HTML page. Supported options include printArea (defaults to diagram's content bounds) and pageSize (defaults to DiagramView's viewport). Note that print methods use HTMLCanvasElement.toDataURL() internally, so any limitations it has will apply (such as canvas size and CORS).

Orthogonal layout
The OrthogonalLayout class implements an orthogonal graph layout algorithm. Each link is drawn as a chain of alternating horizontal and vertical segments. Nodes are placed in a way that facilitates few links bends and crossings. This algorithm was designed for planar graphs where the nodes have at most four incident links, and produces best results with such graphs as input. It can arrange any arbitrary graph as well, by adding some dummy nodes and links to planarize the graph and reduce its vertex degree, and removing them after the layout.

New events
nodeSelecting, linkSelecting, selectionChanged events allow handling of selection interactions.
dataLoaded is raised when the diagram data is loaded from JSON or XML.
mouseWheel is raised when the user rotates the mouse wheel while the cursor is positioned over the diagram surface.
treeItemTextEditing, treeItemTextEdited allow handling of inplace-edit operations in TreeViewNode.

The new release also includes a long list of API changes, rotation of FreeFormNode instances, improved align of images and many more.

The library is available for Vue, React and Angular. You can use npm to install it.

Diagramming for JavaScript on npm:

Diagramming for React on npm:

Diagramming for Angular on npm:

Diagramming for Vue on npm:

Technical support is available on MindFusion's forum, HelpDesk or per email. The licenses are royalty-free and include 12-month subscription for all upgrades that are released.

About MindFusion: For over two decades, MindFusion has successfully provided cutting-edge programming components that greatly increase developers productivity. Built with passion and commitment, the controls create value for customers from all types of industries and company sizes.

The company started in 2000 with a single ActiveX flowchart control and has since then expanded into offering components for more than 10 platforms – desktop, web and mobile. MindFusion components aim to provide software developers with easy-to-use solutions for complex and time-consuming features of their applications like scheduling, diagramming, reporting, charting and spreadsheets.

Ivanka Panayotova
+359 888951737
Visit us on social media:

A collection of tutorials about MindFusion JavaScript Diagram

Source: EIN Presswire