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 JavaScript diagrams.

Visualize your data in a handy hierarchical structure.

Live Demo

Key features

New

Our JavaScript diagram framework will help you to visualize the data in hierarchical tree structure and allow 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.

For org charts there's a simple and intuitive way to change their appearance without coding in the edit mode. There you can add, delete and customize org chart components on-the-fly.

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 diagram will be easy. The look and behaviour are fully customizable, so you can set up any appearance you need via CSS.

With our JavaScript diagram library, you can use zooming and scrolling features so your diagram 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

Diagram Gallery

dhtmlxDiagram 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 dhtmlxDiagram component.

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 Diagram library for adding beautiful and interactive diagrams to your web applications. The diagram library is created by software professionals who are successfully developing web tools for developers for ages.

Cross-browser support

DHX Diagram js 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 a diagram to your app in minutes. It's a 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

Send
a Question