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.
For the latest stable version:
npm install @mindfusion/diagramming
The constraints property lets you apply size and direction constraints to a node. It returns a NodeConstraints object with following properties:
- keepRatio: a bool value indicating whether the initial width/height ratio of a node should be preserved.
- maxHeight: the maximum node height allowed.
- maxWidth: the maximum node width allowed.
- minHeight: the minimum node height allowed.
- minWidth: the minimum node width allowed.
- moveDirection: a member of the DirectionConstraint enumeration. Set it to Horizontal or Vertical to let users move a node only in specified direction.These constraints are considered when a user modifies the node interactively. They are ignored if node placement is changed programmatically by using API methods and properties.
- 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.
- 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.eu/tools/shape-designer.html
- The shape editor is implemented as a reusable ShapeDesigner control, which can be integrated into your own applications.
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.
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.
- 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.
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.
- 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.
- 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.
linkPointed and nodePointed events replaced by linkHovered and nodeHovered.
- 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.
- 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.
- 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.
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.
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.
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.
(https://mindfusion.eu/tools/shape-designer.html)[https://mindfusion.eu/tools/shape-designer.html]
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.
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.
The end-user license agreement for JS Diagram is here.