< Get early access to DHTMLX Flutter Gantt - a brand-new Gantt chart library written in Flutter DHTMLX Diagram with Swimlanes, Groups, and Angular, React, Vue.js Demos in v4.0

JavaScript Diagram Library

DHTMLX Diagram library is a powerful component for generating any JavaScript diagrams you need
in a few lines of code. Automatic layout and live editors will help you visualize complex data in a neat hierarchical structure.

Live Demo

DHTMLX Diagram Library Features

Automatic diagram placement with smart algorithm
Fully customizable left panel.
Any number of sections with any shapes you want, any size for preview
Fully customizable right panel.
Manage sections and settings for live editing
Live Diagram and Org chart editors for a quick diagram arrangement
Group work with multiple objects (select, copy, move, delete)
Cross-browser support (IE11+)
High performance with large datasets

JS Diagram Examples

Here is a collection of samples representing the most popular JavaScript diagrams that you can create with DHTMLX

DHTMLX Diagram demos on GitHub:

Simple Code to Create Any JavaScript Diagram Shape

What You Can Do with Our JavaScript Diagrams

Look at key features of the DHTMLX JavaScript diagram library in five short videos

Apply automatic diagram layout
Add any custom shapes you need
Export/import diagrams in JSON
Search for particular elements
Preview your diagram while zooming

What You Get with DHTMLX JavaScript Diagram Library

DHTMLX Diagram library can add beautiful and interactive graphics
to your web application. It is created by software professionals who are successfully building web development tools for ages.

High performance

You can visualize data with any amount of nodes and connectors. The library is very lightweight and provides fast rendering and high performance. It works seamlessly in all modern web browsers: Google Chrome, Firefox, IE11+, Safari.

Ease of use

Due to a short learning curve, you can easily integrate DHTMLX in any web app. The diagram framework is purely JavaScript with data loading in the JSON format. It can be flawlessly used with any server-side technologies. We also provide an export service supporting PDF and PNG formats.

Flexible visualization

Using our diagram library JavaScript developers can easily visualize data with the help of predefined or custom elements. You can combine textual nodes, nodes with an image, or mixed types of nodes in one diagram. All in all, there are more than 30 built-in figures available. You can easily add custom ones with the help of straightforward HTML templates.

Convenient live editors

You can change the appearance of all elements without coding in the edit mode. There are three types of editors available: for org charts, mind maps, and other JavaScript diagrams such as flowcharts, activity, block, tree diagrams, etc. After you have finished the design process, you can export the result in JSON format.

How to Use JavaScript Diagram Editors

As a part of the library, diagram editors allow you to create any drawing
in a couple of clicks. You can easily embed an editor in your app to provide users with a full-featured diagram maker.

Smart Diagram Editor
Create flowcharts, decision trees, UML diagrams, etc. on the fly
Choose from a variety of built-in figures or add your own custom ones
Style elements by changing their size, color, and text decoration
Save effort using the built-in auto-layout algorithm to put your diagram in order
Editor for Amazing Organization Charts
Build org charts with a hierarchical layout to show who's on your team
Apply styling options immediately, undo the undesired steps, or reset your chart any time
Add images to the cards of your team members to make your chart look more vivid
Try for Free

DHTMLX Diagram Licensing

Commercial Enterprise Ultimate
License Terms
Perpetual distribution rights
Support Plan
Standard Support
Premium Support
Ultimate Support
Time Period
1 year
1 year
1 year
Minor & major updates
Bug fixes
Minor & major updates
Bug fixes
Minor & major updates
Bug fixes
Emergency bug fixes
Response Time
Personal Acccount Manager
Online export to PDF/PNG without watermark
1 year
1 year
3 years
Free local PDF/PNG export module
dhtmlx bundles
Want to get more and save money?

Support and Learning Resources for JS Diagram Library

What Customers Say

Most Popular on Our Blog

JS UML Class Diagram

How to Create a JavaScript UML Class Diagram with DHTMLX

UML class diagram plays a key role in representing any system visually. Create your own UML class diagrams following our step-by-step guide.
DHTMLX Diagram 3.0

DHTMLX Diagram 3.0: Auto-Layout Algorithm and Much More

The major release 3.0 delivered a breakthrough in the functionality of DHTMLX JavaScript diagramming library. Learn more in the release notes on our blog.
JS Flowchart Diagram

Why Use Javascript Flowchart for Process Visualization

One of the most widely used diagram types is a javascript flowchart, which shows any kind of workflow, process or system. Learn how to create this diagram type with DHTMLX.

Frequently Asked Questions

What types of JavaScript diagrams can we create using DHTMLX?

You can create any possible diagram you would like with DHTMLX. We provide a set of ready-made figures for building org charts, flowcharts, mind maps, block diagrams, decision trees, activity diagrams, etc. Besides, you can easily develop network diagrams, UML class diagrams, entity-relationship diagrams, as well as any other type you need with the help of simple HTML templates.

Can we design our own special diagram shapes?

Yes, you can. You can design any imaginable shape you would like. It is possible due to our plain HTML templates, which enable developers to add any figure to the DHTMLX JavaScript diagram library. Thus, you can create network diagrams, sitemaps, Venn diagrams, hospital org charts, and whatnot.

Is there a layout algorithm for arranging diagram shapes automatically or should we do it manually?

DHTMLX Diagram library provides an auto-layout algorithm, so you don't have to arrange nodes and connectors by hand. You only need to pick the necessary shapes from the left panel and drag-and-drop them to the editing area. Then the algorithm will organize any number of chaotically placed nodes into a hierarchical layout at one click of a button.

Is it possible to print a diagram created with DHTMLX?

Yes, our JS diagram library supports PDF and PNG formats. You can either export a diagram online or with the help of a local export module, which you can install on your PC. Thus, you can easily export your diagram and then print it.

How can we load diagram data into the editor?

The process of loading data into the editor is simple. The editor as well as our Diagram JS library reads data in the JSON format. You have two options. You can either load data from an external file using the load method or a local data source using the parse method.

Is the JavaScript diagramming module zoomable?

Yes, you can change the scale of your HTML5 diagram programmatically. You can also create a convenient UI for zooming in and out in your web application. Moreover, you have an opportunity to specify how elements will look like when a user zooms in and out. It is possible via HTML templates. Thus, you can modify the appearance of your diagram for every zoom level.

Can I add more than a thousand shapes into an org chart?

Certainly, the DHTMLX Diagram library enables JavaScript developers to add as many org chart cards as they need. There are no limitations on their number. Branches can be collapsed and expanded in one click. Besides, you can add a search field to quickly find the needed part of your chart or a slider for zooming to navigate a large organization chart without effort.

Is it possible to integrate a diagram editor into our application to let users build their own graphs?

Sure, you can embed a JavaScript diagram editor into your web app and configure it entirely to the needs of your end-users. For instance, you can set up your own sections in the left panel and equip them with the required figures. You can also specify the necessary editing and styling options in the right panel and fine-tune the editor's toolbar.

Other DHTMLX Products

diagram demo picture


Full-featured JavaScript Gantt Chart

scheduler demo


Easily Configurable JavaScript Event Calendar

suite demo picture


Trendy JavaScript UI Components Library

spreadsheet demo picture


Convenient Excel-like JavaScript Spreadsheet

pivot demo picture


High-Speed JavaScript Pivot Table

vault demo picture


Intuitive JavaScript File Uploader

richtext demo

Rich Text Editor

Customizable JavaScript Rich Text Editor

JavaScript Kanban


Slick JavaScript Kanban Board

HTML To Do List

To Do List

Neat JavaScript To Do List

a Question