@mindfusion/diagramming
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.2 • Public • Published

    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 i diagram-library
    

    MindFusion Diagramming Library for JavaScript

    JS Diagram 4.1

    Multi-touch support

    The control now handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items:

    • If multiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
    • If multiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
    • If multiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
    • If multiTouchModify property is disabled, each touch started from a node draws a diagram link.

    Latter modes can be used for collaborative whiteboarding / classroom scenarios.

    Built-in multi-touch can be disabled altogether by setting enableMultiTouch to false, e.g. if you need to handle touch events yourself or through a third-party gesture library. If disabled, the control will revert to its mouse event handling code from previous versions. It will also no longer be able to capture mouse input during drag operations (to detect mouse pointer leaving the view), which is handled through DOM Pointers API.

    Miscellaneous
    • The createDiagramLink method can now be used to connect to TableNode rows or TreeViewNode items.
    • cancelDrag method added to DiagramView.
    • The control now captures mouse input during drag operations and will not lose current drag state if mouse pointer leaves the view.
    • Fixed exceptions when linkCrossing is set to Arcs.
    • Fix for containers clipping their child nodes when children are being dragged.

    Electron compatibility

    Serialization and clipboard operations should now work under Electron.js. In previous versions they would throw exceptions due to restricted use of eval.

    Miscellaneous

    • Mouse pointer position is now provided as argument to nodeCreated and linkCreated events.
    • Visibility property added to CompositeNode components lets you keep invisible components in the template.
    • General performance improvements. Collapse / expand icon is now drawn correctly for CompositeNode when Expandable is enabled.
    • Json deserialization no longer creates undo records.

    API changes

    For compatibility with MindFusion diagramming API for other platforms, StrokeThickness is now specified in diagram's MeasureUnit instead of pixels. You can set CompatConfig.pixelThickness= true in order to revert to using pixel values.

    JS Diagram 3.5

    • Control nodes, which display custom HTML content, specified via their Template property.
    • Composite nodes can now contain buttons, which can show images and text.
    • Content of CompositeNodes is now clipped by default if Shape in the template is marked with isOutline attribute. To disable that, set ClipToOutline to false.
    • Improvements in expandable nodes.

    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

    Licensing

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

    Install

    npm i @mindfusion/diagramming

    DownloadsWeekly Downloads

    12

    Version

    4.1.2

    License

    SEE LICENSE IN LICENSE.txt

    Unpacked Size

    4.64 MB

    Total Files

    10

    Last publish

    Collaborators

    • mindfusion