Create Engaging Diagrams with Animation

MindFusion.Diagramming for JavaScript version 4.4 enables developers to create more informative diagrams by animating diagram items, nodes, and views.

MindFusion.Diagramming for JavaScript allows you create flow diagrams using predefined node shapes. You can use links to join nodes together and users can create, resize, select, move and modify nodes and links as needed. All diagram elements can be accessed programmatically and methods are available to changing the appearance of all elements.

The version 4.4 release has been extended to include support for animations. Diagram items support the animation of fill color, stroke color and opacity. Diagram nodes can now include bounce, shake, pulse and path animations. The diagram view itself now offers animated zooming and scrolling.

MindFusion.Diagramming for JavaScript 4.4

Released: Oct 26, 2023 Updates in 4.4

Features

• Web components - The library registers each control class as a web component.
  • You can now use the following tags to create corresponding components:
    • - Creates a DiagramView instance.
    • - Creates a Ruler instance.
    • - Creates a ZoomControl instance.
    • - Creates an Overview instance.
    • - 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.
• Animations - The library now includes several standard animation classes and methods.
  • The animate method of DiagramItem can now run the following animations:
    • FillColorAnimation - Animates the fill color of nodes or link arrowheads.
    • StrokeColorAnimation - Animates the color of node borders or link segments.
    • OpacityAnimation - Animates items' opacity for fade-in and fade-out effects.
  • The following animations can now be applied to DiagramNodes:
    • BounceAnimation - Animates vertical position of nodes.
    • ShakeAnimation - Animates horizontal position of nodes.
    • PulseAnimation - Animates node's local scale factor.
    • PathAnimation - Moves nodes along specified path.
  • The animate method of DiagramView can now run the following animations:
    • ScrollAnimation - Animates the scroll position of a view.
    • ZoomAnimation - Animates the zoom factor of a view.
• DiagramLink improvements
  • You can now set the intermediateShape property to display arrowheads at the middle of each link segment. This could help users follow longer link paths. Intermediate arrowheads can be customized further by setting intermediateBrush and intermediateShapeSize.
  • You can now set the allowSplitLinks property of Diagram to let users insert new link segments by dragging any point of a selected link's segment. In this mode, users can also merge link segments by making them close to collinear, or by moving adjustment handles close to each other, as set via mergeThreshold.