< Announcing a new DHTMLX component - JavaScript To Do List Diagram Auto Layout Algorithm and Custom Shapes in Live Editors in v3.0

Javascript Diagram Library

JavaScript diagram is a ready-to-use library for generating any diagrams you need in a few lines of code.
Visualize complex data in neat hierarchical structure with the help of automatic layout and live diagram editors.

Live Demo

JavaScript 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 of shapes
Live Diagram and Org chart editors for a quick diagram arrangement
Group work with shapes (select, copy, move, delete)
Cross-browser support (IE11+)
High performance with large datasets
Auto layout (auto-placement) modes of org chart and diagram shapes
Localization for Org chart and Diagram editors
Easy customization according to your needs

Create Any JS Diagram Shape with Simple Code

JavaScript Diagram Gallery

DHTMLX Diagram js library includes various nodes and connectors for building diagrams according to your goals. Here are some examples of the most popular diagram types that you can create with our component.

What You Can Do with DHTMLX JS Diagram Editor

Look at key features of our JavaScript diagram editor in five short videos

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

Why Choose DHTMLX JS / HTML5 Diagram?

DHTMLX Diagram is a JavaScript diagram library for adding beautiful and interactive diagrams to your web applications. Our diagramming library is created by software professionals who are successfully developing web tools for developers for ages.

High performance

Our JavaScript diagram framework will help you visualize data with any amount of nodes and connectors. The component is very lightweight and provides fast rendering and high performance. DHX Diagram js library works seamlessly in all modern web browsers: Google Chrome, Firefox, IE11+, Safari.

Ease of use

Due to the short learning curve, you can easily integrate this HTML5 diagram library in any web app. It's purely JavaScript with data loading in the JSON format and it can be flawlessly used with any server-side technologies. We also provide an export service to export your final org chart or diagram to PDF or PNG.

Flexible visualization

Our JavaScript diagram library enables creating both predefined and custom diagram types. You can use textual nodes, nodes with an image or mixed types of nodes in one diagram. All in all, there are more than 30 shapes for building any diagram type you need. Besides, you can add custom shapes with the help of HTML templates.

Convenient live editors

You can change the diagram appearance without coding in the edit mode. There're two types of editors available: for org charts and for other diagrams such as flowcharts, activity, block, tree diagrams, etc. Editors let you add, delete and customize all components on the fly. They also enable you to export diagrams in the JSON format.

JavaScript Diagram and Org Chart Editors

Creating diagrams and org charts takes just a couple of clicks in the editor mode. We've introduced two types of editors:
JavaScript diagram editor and org chart editor. Embed the editor in your app to let your users edit diagrams without coding in real time.

Rich JavaScript Diagram Editor
Create and edit flowcharts, activitiy diagrams, decision trees, block diagrams and other diagram types on the fly
Choose from a variety of diagram shapes and connectors to build the type of diagram you need
Style your JS diagram in a couple of clicks changing colors, sizes, text, and arrangement of shapes
Editor for Amazing Organization Charts
Build org charts with hierarchical structure to show who's on your team or how your company is organized
Change texts, colors, arrangement and sizes of org chart elements and apply your changes immediately
Add images to the cards of your team members to make your org chart look more vividly
Try for Free

DHTMLX Diagram Licensing

Commercial Enterprise Ultimate
License Terms
Commercial
Enterprise
Ultimate
Developers
Commercial
5
Enterprise
20
Ultimate
Projects
Commercial
1
Enterprise
5
Ultimate
SaaS
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Commercial
Enterprise
Ultimate
Support Plan
Commercial
Standard Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Commercial
Minor & major updates
Bug fixes
Enterprise
Minor & major updates
Bug fixes
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
Tickets
Commercial
10
Enterprise
30
Ultimate
Response Time
Commercial
72h
Enterprise
48h
Ultimate
24h
Personal Acccount Manager
Commercial
Enterprise
Ultimate
Functionality
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
Online export to PDF/PNG without watermark
Commercial
1 year
Enterprise
1 year
Ultimate
3 years
Free local PDF/PNG export module
Commercial
Enterprise
Ultimate
dhtmlx bundles
Want to get more and save money?

Support and Learning Resources for JS Diagrams

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 a system's structure 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 JS diagrams can we create using DHTMLX?

You can create org charts, flowcharts, network diagrams, UML diagrams, decision trees, and any other JS diagrams you require.

Can we design our own special shapes?

Yes, you are able to create your own custom diagram shapes of any kind using HTML templates.

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

You don't have to do it manually. DHTMLX Diagram library provides an auto-layout algorithm for organizing chaotically placed shapes into well-structured hierarchical diagrams at one click of a button.

Is it possible to print a diagram created with DHTMLX?

Yes, you can export your diagram to the PDF/PNG format and print it.

How can we load diagram data into the editor?

The DHTMLX JavaScript diagrams and diagram editor can exchange data in the JSON format.

Is the JavaScript diagramming module zoomable?

Yes, you can change the scale of your diagram programmatically. You can also create a convenient UI for zooming in and out in your web application.

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

Yes, you can add as many org chart shapes as you need. There are no limitations on the number of shapes.

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

Yes, you can embed the JavaScript diagram editor into your web application and configure it entirely to the needs of your end-users.

Other DHTMLX Products

diagram demo picture

Gantt

Full-featured JavaScript Gantt Chart

scheduler demo

Scheduler

Easily Configurable JavaScript Event Calendar

suite demo picture

Suite

Trendy JavaScript UI Components Library

spreadsheet demo picture

Spreadsheet

Convenient Excel-like JavaScript Spreadsheet

pivot demo picture

Pivot

High-Speed JavaScript Pivot Table

vault demo picture

Vault

Intuitive JavaScript File Uploader

richtext demo

Rich Text Editor

Customizable JavaScript Rich Text Editor

JavaScript Kanban

Kanban

Slick JavaScript Kanban Board

HTML To Do List

To Do List

Neat JavaScript To Do List

Send
a Question