node package manager

diagram-library

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

New Features in JS Diagram 3.1

  • Composite nodes The CompositeNode class implements nodes whose appearance can be defined via composition of components and layout containers. The content of a composite node can be created by building a tree of components programmatically, or by loading a JSON template. This initial release includes layout containers such as StackPanel and GridPanel. Objects from the MindFusion.Drawing namespace now double as CompositeNode components (Image, Text, Path, Rect). Future versions will add interactive components like buttons and text editors. Extended overview is available here.

  • Animated layout arrangeAnimated methods added to Diagram and ContainerNode classes display movement of items from their original locations to new locations assigned by the layout object. This can be used to create an explode effect by starting new layout from overlapping nodes on same position, or an insertion effect by adding a new node to an existing layout.

  • Overview improvements

    • ScaleMode enumeration and properties added to Overview control implement several scaling modes. The FitAll element corresponds to the original behavior where the Overview always fits diagram's contents. FixedScale mode applies the scale specified via overview's ScaleFactor property. CombinedScales mode multiples overview's ScaleFactor by diagram's current ZoomFactor.
    • If AllowZoom is enabled, users can zoom the diagram by resizing the overview's viewport tracking rectangle.
    • MinVisibleFontSize specifies a threshold value that hides text if scaled font sizes become smaller.
  • Miscellaneous

    • ImagePadding property of ShapeNode and Cell lets you set padding space between elements' borders and their Image.
    • resizetoFitText method of TableNode resizes the columns and rows of tables to fit cells' texts.
    • The new GridRouter class implements link routing using A* algorithm with customizable criteria costs exposed by its LengthCost, NodeVicinityCost and TurnCost properties.
    • All sample projects now available in TypeScript.

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.