1. Products
  2.   Diagram
  3.   JavaScript
  4.   JointJS
 
  

JavaScript API to Create & Manage different Kinds of Diagrams

Open Source JavaScript Library to Generate and Manage Basic as well as Interactive Diagrams, Charts, Interactive Elements and Links Handling via JS API.

What is JointJS Library?

JointJS is a robust JavaScript tool for creating diagrams. It assists software developers in making applications for handling various types of diagrams. This tool allows you to create basic and interactive diagrams using JavaScript commands. JointJS is open source and uses the Mozilla Public License 2.0. It’s user-friendly, offering support for key features like working with interactive elements and link management. working with basic elements such as rect, circle, ellipse, text, image and path, diagram element connectivity via links, hierarchical diagrams support, serialization and deserialization support, using customizable links with labels and arrowheads, interactive elements and links support, MVC architecture and many more.

Software developers can create apps for common web browsers like Google Chrome, Firefox, Safari, Opera, IE 11, MSEdge, and others using the open source JointJS library. The library is up-to-date and comes with built-in elements for popular diagrams like ERD, Org chart, FSA, UML, PN, DEVS, and more, making it easy for you to incorporate them into your projects.

Previous Next

Getting Started with JointJS

The recommended way to install JointJS library is using NPM. Please use the following command for a smooth installation

Install JointJS via NPM

 npm install

Create and Manage Diagram via JavaScript API

The open source JointJS library allows software developers to create multiple types of diagrams with ease inside their own JavaScript apps. The library has included support for built-in shapes which can be used to draw custom diagrams with ease. You can draw sequence diagrams, ER diagrams, UML Class diagrams, and UML statechart diagrams. You can also easily design logic circuits, organizational charts, Finite state machines, puzzles, chess, and much more. Here is a simple example that shows how developers can write the JavaScript code to create a diagram using JointJS library.

How to Create a Diagram using JavaScript Library?

// Initialize the JointJS graph and paper
const graph = new joint.dia.Graph();

const paper = new joint.dia.Paper({
    el: document.getElementById("diagram"),
    model: graph,
    width: 800,
    height: 600,
    gridSize: 10,
    drawGrid: true,
    background: {
        color: "#ffffff",
    },
});

// Define a custom shape for a rectangle
const Rectangle = joint.dia.Element.define("custom.Rectangle", {
    attrs: {
        body: {
            fill: "#4CAF50",
            stroke: "#2E7D32",
            strokeWidth: 2,
            rx: 5, // Rounded corners
            ry: 5,
        },
        label: {
            text: "Rectangle",
            fill: "#ffffff",
            fontSize: 14,
            refX: 0.5, // Center the text horizontally
            refY: 0.5, // Center the text vertically
            textAnchor: "middle",
            yAlignment: "middle",
        },
    },
}, {
    markup: [
        {
            tagName: "rect",
            selector: "body",
        },
        {
            tagName: "text",
            selector: "label",
        },
    ],
});

// Create and add a rectangle to the graph
const rectangle = new Rectangle();
rectangle.position(100, 100);
rectangle.resize(120, 60);
rectangle.attr("label/text", "Start");
graph.addCell(rectangle);

// Define a custom shape for a circle
const Circle = joint.dia.Element.define("custom.Circle", {
    attrs: {
        body: {
            fill: "#2196F3",
            stroke: "#1565C0",
            strokeWidth: 2,
            r: 30, // Radius
        },
        label: {
            text: "Circle",
            fill: "#ffffff",
            fontSize: 14,
            refX: 30, // Center the text horizontally
            refY: 30, // Center the text vertically
            textAnchor: "middle",
            yAlignment: "middle",
        },
    },
}, {
    markup: [
        {
            tagName: "circle",
            selector: "body",
        },
        {
            tagName: "text",
            selector: "label",
        },
    ],
});

// Create and add a circle to the graph
const circle = new Circle();
circle.position(300, 100);
circle.attr("label/text", "Process");
graph.addCell(circle);

// Define a custom shape for an arrow
const Arrow = joint.dia.Link.define("custom.Arrow", {
    attrs: {
        line: {
            stroke: "#333333",
            strokeWidth: 2,
            targetMarker: {
                type: "path",
                d: "M 10 -5 0 0 10 5 Z", // Arrowhead
            },
        },
    },
});

// Create and add an arrow between the rectangle and circle
const arrow = new Arrow({
    source: { id: rectangle.id },
    target: { id: circle.id },
});
graph.addCell(arrow);

Custom Element Support

The open source JointJS library has included built-in elements that can be used to create diagrams inside JavaScript apps. There are several default shapes available such as rectangles, text, circles, ellipses, images, paths, etc. These can be used to draw a drawing. You can also create new elements from the scratch.

Create and Manage Charts via JavaScript

The JointJS library has provided complete support for generating as well as managing charts using JavaScript code. The library has included support for several types of charts such as Line, Bar, Area, Combo charts, Pie & Donut charts, and Knobs. The library also provides several functions related to chart manipulation such as resizing, rotating, connecting to other elements, and so on.

 English