node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org ยป

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.2.1

  • Export to SVG
    • The SvgExporter class creates a Scalable Vector Graphics (SVG) drawing from the content of a Diagram. The exportElement method returns a DOM element that can be directly added to the page. The exportString method returns an SVG string that can be saved in local storage or submitted to server.
function onExportSvg()
{
    var diagram = $find("diagram");
    var exporter = new MindFusion.Diagramming.SvgExporter();
    var svgElement = exporter.exportElement(diagram);
    document.body.appendChild(svgElement);
    svgElement.style.position = 'fixed';
    svgElement.style.zIndex = 100;
}

  • AMD module
    • The diagramming.js script can be loaded as an AMD module now. If it detects an AMD loader during startup, it will list common.js as its dependency, so it is enough to require only diagramming.js as application's direct dependency:
MindFusionImpl = "StandAlone";

requirejs(["MindFusion.Diagramming"],
    function(MindFusion)
    {
        // create a Diagram component that wraps the "diagram" canvas
        var Diagram = MindFusion.Diagramming.Diagram;
        var element = document.getElementById("diagram");
        var diagram = Diagram.create(element);
        var node = diagram.factory.createShapeNode(10, 10, 40, 30);
        node.setText("Hello, world!");
    }
);
  • Miscellaneous
    • Arc definitions in custom shapes now follow correct SVG syntax (A rx ry x-axis-rotation large-arc-flag sweep-flag x y) instead of specifying bounding box and angles.
    • ShapeNode's Stroke attribute is now also applied to shape decoration elements.
    • Underlined fonts can be applied to the text of links.
    • RowCount and ColumnCount properties now exposed by TableNode.

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.