<
DHTMLX Diagram 6.0: Overhauled Diagram Editor with Superior Configuration and Customization Opportunities
JavaScript

JavaScript Diagram Library

DHTMLX Diagram library allows building any JavaScript diagrams in a few lines of code. It makes it easier to visualize complex data in a neat hierarchical structure via automatic layout and live editors.

JS Diagram Examples

DHTMLX Diagram is a proper choice for visualizing multiple data sets with minimum time and effort.

Improve User Experience with Our JavaScript Diagrams

📊 Automatic diagram placement.
Arrange shapes neatly with a single click via 2 smart algorithms.
🧩 Fully customizable left panel.
Add any number of sections with any shapes you want, set any size for preview.
🎨 Fully customizable right panel.
Manage sections and settings for live editing.
⚙ Manipulate multiple items.
Select several items, drag, align, distribute, or simply delete them.
Custom shapes. You can create any new shape using HTML.
📐 Snap lines. Select and drag shapes in the grid with greater precision.

DHTMLX Diagram Library Features

Live Diagram, Org chart, and Mindmap editors for a quick diagram arrangement
Group work with multiple objects (select, copy, move, delete)
Aligning and distributing multiple items at once
Intuitive drag-n-drop behavior
Cross-browser support
High performance with large datasets
2 auto layout (auto-placement) modes: Orthogonal and Radial
Localization for Org chart and Diagram editors
Easy customization according to your needs
Creating swimlanes and groups
Configurable tooltips for toolbar icons
Inline editing
Keyboard navigation

JS Diagram Types

Org Chart
Demonstrates hierarchicy or any other pecking order.
Flowchart
Communicates process steps and algorithms.
Mindmap
Logically outlines concepts and reflects ideas.
Tree
Illustrates possible paths and breaks down structures.
Network
Depicts and analyzes network structures.
UML
Documents system requirements and design.
Swimlane
Divides content into horizontal and vertical bands.

How to Use JavaScript Diagram Editors

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 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
Editor for making clear mindmaps
Create mindmaps to visualize various ideas and concepts
Add any desirable number of child shapes. You can drag a child item from one parent shape to another
Style a shape by modifying options in the right panel or copy a shape's style and apply it to the chosen items using keyboard shortcuts
Add custom shapes and set custom properties to style them via the right panel

Why Choose DHTMLX JavaScript Diagram?

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.
High performance
You can visualize data with any amount of nodes and connectors. The library is lightweight and provides fast rendering and high performance. It works seamlessly in all modern web browsers, including Chrome, Firefox, and Safari.
Ease of use
Due to a short learning curve, you can easily integrate DHTMLX into 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 technology.
Export to PDF and PNG
With DHTMLX Diagram, you can export your diagrams to PDF or PNG online by default. Besides, we provide an export service supporting PDF and PNG formats you can get and install on your server.
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.
Start with a free trial
Download the DHTMLX Diagram trial version and start building flexible data visualization tools free of charge for 30 days. You’re also free to get help from the official technical support team.

DHTMLX Diagram Licensing

Diagram
💎 Save on bundles
Individual Commercial Enterprise Ultimate
License Terms
Individual
Commercial
Enterprise
Ultimate
Developers
Individual
1
Commercial
5
Enterprise
20
Ultimate
Projects
Individual
1
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Individual
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Individual
Commercial
Enterprise
Ultimate
Support Plan
Individual
Standard Support
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Individual
1 year
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Individual
Major, minor, and maintenance updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Individual
10
Commercial
30
Enterprise
50
Ultimate
Response Time
Individual
72h
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal Account Manager
Individual
Commercial
Enterprise
Ultimate
Functionality
Individual
Professional
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
Online export to PDF/PNG without watermark
Individual
Free for 1 year
Commercial
Free for 1 year
Enterprise
Free for 1 year
Ultimate
Free for 3 years
Free local PDF/PNG export module
Individual
Commercial
Enterprise
Ultimate
Documentation
Use documentation
The Diagram documentation provides API references and step-by-step guides you can use to easily initialize and customize your diagrams as well as integrate the library with React, Angular, and Vue.js frameworks.
Samples
Work with code snippets
You can try to build diagrams online, experiment with the JavaScript and HTML code, and share your custom snippets with your team or DHTMLX support using our code samples.
Free trial
Download Diagram free trial
We suggest you evaluate the DHTMLX Diagram functionality and download a free 30-day trial version. It comes with the latest updates and official technical support. No credit card is required.
Official tech support
Check technical support
Being a trial user or an owner of a proprietary license, you can always rely on DHTMLX technical or licensing assistance. On this page, we’ve described the ways of obtaining support.
Community forum
Browse DHTMLX forum
You're free to learn from other DHTMLX users and access knowledge shared by fellow developers experienced with the JS diagram library. We also monitor topics and answer common questions.
Blog
Keep up with updates
The DHTMLX blog is a comprehensive resource where you can find out all the latest Diagram releases with detailed feature descriptions, helpful tips, technical tutorials, and other company updates and offerings.

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.

Take your data visualization to the next level with DHTMLX Diagram
Download the DHTMLX trial version and evaluate it free of charge for 30 days benefiting from the official technical support of our team.
NO credit card required
Send
a Question