Meet dhtmlxDiagram 2.1 with Diagram Editor for All Diagram Types! Check 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.

Org Chart
Flowchart
Vertical Decision Tree
Block Diagram
Live Demo

Key features

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.

dhtmlxDiagram allows you to export your chart/diagram to PDF or PNG using our online export service or getting your own export module.

New

There's a simple and intuitive way to change 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.

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 or object properties.

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 Diagram and Org Chart Editors

Creating diagrams and org charts may take you just a few moments in the editor mode. We've introduced two types of editors: diagram and org chart editors. Embed the editor in your app to let your users live edit the diagram on their own.

Rich Editor For Various Diagram Types
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 diagram in a couple of clicks changing colours, 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 vivid

What's New and Roadmap

What's New (the Version 2.1)
js diagram
1
Diagram editor for such diagram types: as flowcharts, decision trees, block diagrams etc.
2
New object properties for customizing diagram shapes and connectors
3
Big Documentation Update
What's Next (the Version 2.2)
1
New diagram types: network diagrams, topic maps, mind maps, concept maps and others
2
New types of connectors and new options for editing diagrams by end users in the editor

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.

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.

dhtmlxDiagram Licensing

Commercial Enterprise
All functionality
Commercial
Enterprise
License Terms
Developers
Commercial
5
Enterprise
Projects
Commercial
1
Enterprise
SaaS
Commercial
Enterprise
Perpetual distribution
Commercial
Enterprise
Support and Updates
Updates
Commercial
1 update (the next one)
Enterprise
1 year of all updates
Support
Commercial
1 month or 5 tickets within 1 year
Enterprise
Unlimited for one year
Add-ons
Local export to PDF/PNG (Docker Image)
Commercial
Local export to PDF/PNG (Docker Image)
Enterprise
Local export to PDF/PNG (Docker Image)
Total: $399
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