Diagram Library for JavaScript and TypeScript

A diagram library that enables you to build any type of graph, flowchart, tree, org chart, diagram, process chart, database schema and much more. Includes a huge variety of prdefined node and link shapes, automatic layout algorithms, many import and export options.

Installing

For the latest stable version:

npm install @mindfusion/diagramming

New in JsDiagram 4.4.4

New mouse events

• nodePointed event has been replaced by a set of more specific events: nodePointerEnter and nodePointerLeave are raised when the mouse pointer respectively enters or leaves the boundaries of a node. nodeHovered fires if the pointer rests over a node for hoverDelay milliseconds.
• linkPointed event has been replaced by a set of more specific events: linkPointerEnter and linkPointerLeave are raised when the mouse pointer respectively enters or leaves the boundaries of a link. linkHovered fires if the pointer rests over a link for hoverDelay milliseconds.

Miscellaneous

• Enable the autoDeleteChildren property to automatically delete child nodes when a container is deleted.
• Fix for custom Shape definitions not setting the id property.
• Fix for selected property setter of DiagramItem not immediately reflecting assigned value due to async calls.

API changes

linkPointed and nodePointed events replaced by linkHovered and nodeHovered.

New in JsDiagram 4.4.2

TableNode Improvements

• getRow and getColumn methods now return strongly-typed TableRow and TableColumn objects.
• The anchorPattern property of TableRow and rowAnchorPattern property of TableNode let you specify the points where links connect to table rows.
• cellTextColor property lets you set default color of cell texts, without changing caption color.

TabbedDiagramView improvements

• Enable allowRenamePages to let usersedit the title of DiagramPage by clicking the active tab.
• The control raises pageAdding event when users click the plus icon to let you validate the operation, and pageAdded once the page is added.
• The control raises pageRemoving event when users close a tab to let you validate the operation, and pageRemoved once the page is removed.
• Fix for scroll range not updatingwhen changing tabs.

Miscellaneous

• Disable allowUnanchoredLinks to prevent users from drawing links to nodes without designated anchor points.
• Set inplaceEditAcceptOnEnter and inplaceEditCancelOnEsc properties to specify whether edit operations end when user presses respectively Enter and Esc keys.
• The showAnchors property can be set to Selected|Auto combination.
• Set horizontalDropAlignment and verticalDropAlignment properties to specify how nodes are positioned relatively to the drop point after drag operations from NodeListView.
• Set dragIndicatorOpacity property to specify the opacity of drag indicator displayed during drag-and-drop operations.

New in JsDiagram 4.4

Web components

The library registers each control class as a web component. 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.

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

var diagramView = DiagramView.find("diagramView");
var diagram = diagramView.diagram;

Animations

The library now includes several standard animation classes and methods. The animate method of DiagramItem can run 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.

Following animations can 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 run following animations:

• ScrollAnimation animates the scroll position of a view.
• ZoomAnimation animates the zoom factor of a view.

DiagramLink improvements

• 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.
• 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.

Reversed tree layouts

The reversedLinks property of TreeLayout, RadialTreeLayout and BorderedTreeLayout lets you arrange trees where links point from child to parent nodes, instead of the default parent to child direction.

React support

The DiagramView React component allows integrating the MindFusion.Diagramming API into React applications. It renders a Diagram instance assigned to "diagram" prop as its model. Most diagram properties can be set from JSX, and all diagram events can be handled through JSX syntax as well. For more information, see the Integration with React topic.

The DiagramView component for Rect on npm.

Vue.js support

The diagram-view Vue.js component allows integrating the MindFusion.Diagramming API into Vue.js applications. It renders a Diagram instance assigned to "diagram" prop as its model. Most diagram properties can be set from the vue template, and all diagram events can be handled through the v-on directive as well. For more information, see the Integration with Vue.js topic.

The DiagramView component for Vue on npm.

Angular support

The diagram-view Angular component allows integrating the MindFusion.Diagramming API into Angular applications. It renders a Diagram instance assigned to "diagram" property as its model. Most diagram properties can be set from the html template, and all diagram events can be handled through event binding syntax as well. For more information, see the Integration with Angular topic.

The DiagramView component for Angular on npm.

The diagram library is also included in MindFusion Pack for JavaScript.

Documentation

1. Detailed API Reference
2. Tutorials and Step-by-step Guides

Samples

A variety of online samples are uploaded at the MindFusion Js Diagram website. You can also visit the online demo for Js Diagram. You can download an archive with all samples and all files for the library from here.

Additional Information

Learn more about JS Diagram from the official product page. Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog.

Technical Support

• Forum
• E-mail
• Help desk

Licensing

The end-user license agreement for JS Diagram is here.