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 version 4.8.3

• generateShortestRoute and findShortestRoute methods added to PathFinder.

• Table row anchorPattern fixes.

• Coordinates in vertical Ruler scale are now rotated in opposite direction to read from bottom to top, which is the accepted standard for rotated labels and consistent with MindFusion components for other platforms.

New in version 4.8

Paged containers

PagedContainerNode is a ContainerNode subclass that organizes its child nodes into a collection of pages represented by ContainerPage objects. This allows for the creation of more organized diagrams where nodes can be grouped into logical views within a single container. Only the nodes belonging to the currently active page, specified by currentPage property, are rendered and participate in user interactions. Navigation between pages is handled by scroll arrows in the caption bar, allowing users to cycle through the pages sequentially. For faster access, users can also double-click the container's caption to open an in-place combo box listing available page titles, enabling direct navigation to any page. The node's text value is automatically set to the title of newly activated ContainerPage.

Pattern router

New PatternRouter class routes links by applying patterns of segment and turn sequences and accepting them when resulting paths do not cross nodes. A path is accepted if its final segment ends in target point and is orthogonal to respective side of target node. If there are several possible paths, the router selects the shortest one. The minimumDistance property specifies minimum allowed distance of link segments from nodes. The preferredDistance property specifies distance of first or last link bend from associated node. PatternRouter includes several predefined patterns designed to create consistent-looking paths, and allows creation of custom patterns. Custom patterns can be defined as sequence of RouteStep objects specifying whether the path advances by relative or absolute distance, or changes direction:

var rightZigzag = new RoutePattern();
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.AdvanceRelative, 0.5));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.TurnRight));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.AdvanceRelative, 1));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.TurnLeft));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.AdvanceRelative, 0.5));
router.patterns.push(rightZigzag);

// this can be defined in shorter form using a pattern string
// var rightZigzag = new RoutePattern(
//     "ADR0.5 TRR ADR1 TRL ADR0.5");

Composite router

The CompositeRouter class lets you chain link routers (objects implementing the Router interface) so that a link passes through the sequence until it gets routed successfully. Diagram's default router is now set to a CompositeRouter instance containing a PatternRouter and Router sequence. This applies the several standard pattern paths when possible, and otherwise routes links usinga simple cost-minimizingrouter.

API changes

Default Diagram.linkRouter changed from Router to CompositeRouter instance.

New in version 4.7.1

Grid layout

The GridLayout algorithm arranges diagram nodes in a grid, keeping connected nodes close to each other. The algorithm strives to achieve a small number of link crossings. It is based on an iterative process whose initial steps shuffle the grid nodes randomly. That can lead to very different results each time the algorithm is run.

Miscellaneous

• startNode and endNode properties added to LayeredLayout. They let you specify which nodes to place on first and last layer, instead of relying on the algorithm selecting them automatically.
• The crossingCost property of GridRouter implements penalty cost for link crossings. It's applied only when routing multiple links at once, e.g. when running routeAllLinks.
• The bringIntoView method scrolls the diagram view to make the specified item visible.
• The allowLinksRepeat property of Diagram specified whether more than one links can connect the same origin and destination diagram nodes.
• controlUnloading and controlUnloaded events let you handle the control being unloaded from page DOM, or disposed by wrapper components for supported frameworks (e.g. by ngDestroy hook in angular).

New in version 4.7

ItemListView component

ItemListView supersedes NodeListView and lets you show both nodes and links in the list. Items can be added by calling addItem method, and removed by calling removeItem. defaultNodeSize property from NodeListView is called newInstanceSize in the new class. The autoConnectLinks and autoConnectDistance properties control whether links created via drag-and-drop should connect to nearby nodes in the target diagram. ItemListView also provides more properties for customizing the list layout, such as columns and labelPosition. For compatibility with legacy code, NodeListView won't be removed from the library, but it won't be getting any new improvements.

Palette component

The Palette control represents a tool palette that displays DiagramItem objects grouped into categories. It implements Accordion user interface that displays ItemListView components as its child panels, and category icon, title and collapse/expand button in pane headers. Each child ItemListView displays the items added to its corresponding category. Call the addCategory method to define a category and create its respective accordion pane. Call addItem to add an item to specified category. Palette provides same layout and appearance properties as the ItemListView class.

ItemLabel image

New image and imageLocation properties added to ItemLabel let you display icons along a link's geometry, or add more images to a ShapeNode. If a label contains both text and image, their relative position is specified by imageAlign property (by default the image is placed on left side of text), and distance by contentPadding. The image is rendered using bitmap's intrinsic size, unless you override it by setting imageSize property. You can treat label images as clickable icons by handling linkClicked or nodeClicked events and checking label argument passed to their handlers.

Miscellaneous

• locked property added to ItemLabel. It lets you prevent users from editing label's text, and moving it when behavior is set to MoveLabels.
• label argument now provided with item click and double click events.
• Improved repaint speed of Overview component.

New in JsDiagram 4.6

Spatial index

Set the enableSpatialIndex property of Diagram to create an index of item positions for faster hit-testing and viewport clipping queries. This should greatly improve user interaction and rendering speed for diagrams containing tens of thousands or more items.

diagram.nodeCreated.addEventListener(
    (sender, args) =>
    {
        if (sender.defaultShape.id == "Rectangle")
            args.node.anchorPattern = pattern1;
        else
            args.node.anchorPattern = pattern2;
    });

Miscellaneous

• The foldedSize property of ContainerNode specifies the container's size when it is folded.
• clipText property added to ShapeNode.
• actionUndone and actionRedone events raised by undo manager for eithertop-level commands or children of CompositeCommand.
• Fixed multiple resize when selection contains rotated nodes.
• Fixed rotation when rotation handle is at a custom position (set from hitTestAdjustmentHandle event handler).
• strokeThickness is now scaled by zoomFactor.

Miscellaneous

• TabbedDiagramView now keeps separate zoom level and scroll position per tab.
• shapeLibraryLoaded event raised when library XML file is loaded and its shape definitions are available for use.
• fixed undo / redo of text in-place edit operations.
• fix for item hover events of DiagramDocument not raised by TabbedDiagramView.

New in JsDiagram 4.5

Shape design enhancements

• The anchorPattern property of Shape lets you associate anchor points with shape definitions. That pattern is shared between all nodes of same shape, but can be overridden by setting node's own anchorPattern.
• Individual segments of a shape's geometry can be styled independently bysetting stroke and fill attributes of ShapeElement and ShapeDecoration objects.
• We have replaced the Windows -only shape designer tool with an online shape editor at https://mindfusion.dev/tools/shape-designer.html
• The shape editor is implemented as a reusable ShapeDesigner control, which can be integrated into your own applications.

New event system

Event emitter objects are now exposed as properties of Diagram and DiagramView and you can register handlers by calling their addEventListener method:

diagram.nodeCreated.addEventListener(
    (sender, args) =>
    {
        if (sender.defaultShape.id == "Rectangle")
            args.node.anchorPattern = pattern1;
        else
            args.node.anchorPattern = pattern2;
    });

Legacy event handling syntax will remain supported for compatibility with old code.

Collapse and expand table rows

Table rows can be assigned to distinct sections of the table. Each section can be collapsed or expanded, hiding or showing all rows in the section except the header one. To define a section, set the header property of a row. A section consists of all rows after a header row and spans to the next header. Each header row displays [±]a button that allows expanding or collapsing the section interactively. Clicking that button raises the tableSectionCollapsed and tableSectionExpanded events. Sections can be collapsed or expanded programmatically by setting the expanded property of their header rows.

Miscellaneous

• dividerStroke properties added to ContainerNode, TableNode and TreeViewNode classes. It lets you customize the appearance of the divider line drawn between a node's caption bar and content area.
• removed an eval call used for creating custom components from CompositeNode Json templates, allowing for stricter Content Security Policy rules. Now custom components must be registered by calling registerComponent method to allow instantiating them from a template.
• linkRouted event raised when links are modified by automatic routing.

API changes

To allow for stricter Content Security Policy rules, the library no longer loads CSS scripts automatically. If you use components from the Diagramming.Controls package, you must now explicitly link the common-ui.css file from the distribution's themes folder.

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

Online ShapeDesigner Tool

https://mindfusion.dev/tools/shape-designer.html

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 X or our company blog.

Technical Support

• Forum
• E-mail
• Help desk

Licensing

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