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 i diagram-library
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.
<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;
- 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.
- ScrollAnimation animates the scroll position of a view.
- ZoomAnimation animates the zoom factor of a view.
- 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.
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.
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 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 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.
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.
The end-user license agreement for JS Diagram is here.