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

Free JavaScript Library to Create Dynamic Visio-Like Diagramss

Open Source JavaScript Visio Diagramming Library to Create and Display 2D Vector Graphics and Visio-Like Diagrams. It supports Flowcharts, Organizational Charts, Network Diagrams, and more.

What is Draw2D Library?

In the rapidly changing world of web development, the ability to create dynamic, interactive, and visually appealing diagrams is a game-changer. Whether you're building a workflow editor, a network diagramming tool, or a simple flowchart application, you need a powerful and flexible library to bring your vision to life. Enter Draw2D, an open source JavaScript library that empowers software developers to create Visio-like drawings and diagrams with ease. Draw2D is a modern, HTML5 and JavaScript library designed for creating dynamic, Visio-like diagrams, workflows, and visual languages directly in the browser. Released under the MIT license, it offers developers an extensible and interactive canvas framework.

Draw2D comes packed with a wide array of features that make it a top choice for developers. It supports variety of built-in shapes, connecting shapes with each other, undo and redo commands, zoom in and out, pan around the canvas, snap-to-grid, and many more. It provides a rich set of tools and components to build complex diagrams, such as flowcharts, organizational charts, network diagrams, and more. With its object-oriented API, you can easily create custom shapes, connectors, and ports, and manage user interactions like dragging, dropping, and resizing. It balances simplicity with power, offering advanced features like connectors, grid snapping, and SVG extensibility, backed by strong documentation and live demos.

Previous Next

Getting Started with Draw2D

The suggested way to install Draw2D stable release is using NPM. Please use the following command for a smooth installation.

Install Draw2D via NPM

npm install
DIR=/examples yarn dev
// for new version
npm version patch
npm publish

You can download the compiled shared library from GiHhub repository.

Rich Set of Shapes Support

The open source Draw2D library provides a variety of built-in shapes, including rectangles, circles, ellipses, cubes and many more. Software developers can also create custom shapes by extending the draw2d.shape.basic.Rectangle class or other shape classes. The following example demonstrates, how developers can creating a simple rectangle inside JavaScript applications.

How to Create a Custom SVG Shape via JavaScript Library?

class MyCustomShape extends draw2d.SVGFigure {
  constructor() {
    super();
    this.svg = '';
  }
}
const shape = new MyCustomShape();
canvas.add(shape, 50, 50);

Powerful Connection System with Ports

One of Draw2D's standout features is its built-in system for creating connectable shapes. Shapes can have Ports (input and output anchors), and users (or your code) can draw Connections (lines with optional arrows) between these ports. The library handles the routing, dragging, and reconnection logic automatically. The following example demonstrates the creation of connectable shapes via JavaScript library.

How to Create Connectable Shapes inside JavaScript API?

// Create two rectangles
var start = new draw2d.shape.basic.Rectangle({x:50, y:50, width:80, height:40});
var end = new draw2d.shape.basic.Rectangle({x:250, y:50, width:80, height:40});

// Add a "hybrid" port to each shape (can be both input and output)
start.createPort("hybrid");
end.createPort("hybrid");

// Add them to the canvas
canvas.add(start);
canvas.add(end);

// Create a connection with an arrow at the target end
var connection = new draw2d.Connection();
connection.setSource(start.getPort(0)); // Connect to the first port of 'start'
connection.setTarget(end.getPort(0));   // Connect to the first port of 'end'
canvas.add(connection); // Add the connection to the canvas

Serialization and Persistence (JSON)

A crucial feature for any diagramming application is the ability to save and load the canvas state. Draw2D makes this straightforward by allowing you to export the entire canvas, including all shapes and their connections, to a JSON object. This JSON can be saved to a database and later used to reconstruct the diagram perfectly. Here is a simple example that shows how to save and load a canvas via JavaScript library.

How to Save and Load a Canvas via JavaScript Library?

// Serialize the canvas to a JSON object
var jsonData = canvas.toJSON();

// You can now save this JSON string, e.g., using localStorage or an API call
localStorage.setItem("myDiagram", JSON.stringify(jsonData));

// To load the canvas from the saved JSON
var savedJson = JSON.parse(localStorage.getItem("myDiagram"));
canvas.fromJSON(savedJson);

Undo/Redo, Zoom and Pan Support

The open source Draw2D library includes a built-in command stack that provides undo and redo functionality out of the box. This is a crucial feature for any editor, as it allows users to easily correct mistakes. To enable undo and redo, you need to use the draw2d.command.CommandStack class. The canvas has a built-in command stack that you can access. For large diagrams, the ability to zoom in and out and pan around the canvas is essential. Draw2D provides simple methods for controlling the zoom level and position of the canvas.