< 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

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
Perpetual
Free local PDF/PNG export module
Commercial
Enterprise
Ultimate
dhtmlx bundles
Want to get more and save money?

Support & Learning Resources for JS Diagrams

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

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.
Send
a Question

Take our survey

1/5 What type of JS diagrams do you need for your project?

2/5 Do you need swimlanes for your project?

3/5Examples of which JS diagrams would you like to see here?

4/5Are you looking for a commercial JS diagram library or an open-source one?

5/5What other JavaScript Diagram library have you tried or would like to try?

Thank you for taking our survey!
Your answers will help us prepare more relevant content and enhanced UX on our website.

Personal data processing

We do not identify website users when they fill in this survey. Your answers are completely anonymous. We gather your answers as a JSON string, which doesn’t contain anything that could be used for your identification in any way, and send them to our corporate email address for further processing for research purposes only. Your anonymous answers will help us prepare a more relevant website content and enhance UX. If you have any questions concerning the survey, please contact us at contact@dhtmlx.com.
Learn more about our Privacy Policy

Personal data processing