dhtmlxDiagram 2.0 is here! Build different types of diagrams and charts. Read about the update

Javascript Diagram Library

Use DHTMLX diagram library to generate high-quality and easy configurable graphs and diagrams.

Visualize your data in a handy hierarchical structure.

Live Demo

Key features

New

Our js diagram will help you to visualize the data in hierarchical tree structure and allows you to create different types of diagrams: organization charts, flowcharts, block and network diagrams, hierarchical diagrams, trees, mind maps and so on.

New

dhtmlxDiagram allows you to export your chart/diagram to PDF or PNG using our online export service or installing it to your local server.

You can add, delete and customize your org charts on-the-fly using edit mode. The org chart provides simple and intuitive way to change the appearance of the component without coding.

The diagram component consists of nodes and connectors. You can use nodes of some particular type: just textual, with an image or any other custom HTML and SVG elements, or create your own.

Creation of a unique style for your org chart will be easy. The look and behaviour are fully customizable, so you can set up any appearance you need via CSS.

With our js diagram library, you can use zooming and scrolling features so your org chart will fit the screen or just have the size you need. Check the sample.

There is a vertical mode of data representation. It can be use to show wide organization structure in a compact way. Check the sample.

You can easily integrate this html5 diagram library in any web app. It supports the data loading in the JSON format, and can be used with any server-side back-end.

JavaScript Org Chart Editor

To be able to quickly change the content and the appearance of your javascript org charts, use our special diagram editor.
Main advantages:

It provides convenient and intuitive interface that is fully draggable and interactive
You can change texts, colors, images, arrangement and sizes of the org chart elements in a couple of clicks, and then apply your changes immediately
You can embed the editor in your app to let you users live edit the diagram by their own

What's New and Roadmap

What's New (the Version 2.0)
js diagram
1
Different types of diagrams: flowcharts, UML diagrams, activity, decision, tree, block diagrams and many others
2
Increase in performance for faster rendering and updated API to provide clearer structure
3
Export a diagram to PDF and PNG files
What's Next (the Version 2.1)
1
More types of diagrams, arrows and shapes
2
Diagram editor and ability to edit diagrams by the end users

Why dhtmlxDiagram?

dhtmlxDiagram is a JavaScript Diagramming library for adding beautiful and interactive organization charts to your web applications. The library is created by software professionals who are successfully developing web tools for developers for ages.

Cross-browser support

DHX Diagram library works seamlessly in all modern web browser: Google Chrome, Firefox, Internet Explorer, MS Edge, Safari.

High performance

The component is very lightweight that provides fast rendering and high performance with any amount of nodes and connectors.

Simple integration

Due to short learning curve you'll embed an org chart to your app in minutes. It's purely JavaScript library, so there also won't be any problems with back-end integration.

Pricing

Standard Edition Commercial license
$149
up to 5 developers
  • Use in one project
  • Standard ticket support
  • 1 month of updates (minor, major, bugfixes)
Standard Edition Enterprise license
$399
per company
  • Use in unlimited projects
  • Premium ticket support
  • 12 months of updates (minor, major, bugfixes)
  • Local Export to PDF/PNG (Docker image) Time-limited offer till April, 2018
dhtmlx bundles
Want to get more and save money?

Support & Learning Resources

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