dhtmlxDiagram Overview

dhtmlxDiagram is a client-side chart component that allows you to display relations between some objects, concepts or living beings in a visual form: as a scheme, chart, organizational chart, etc. The diagram makes it easier to present tangled and bulky information in a simple and accessible way.

You can choose between several options:

Variety of Diagram types

dhtmlxDiagram component provides the possibility to make various diagrams using a predefined set of shapes and connectors, and experiment with their look and feel via the "native" and custom CSS classes.

You can choose shapes of desired types, link them by suitable connectors and build any type of a diagram that will show the sequence of some operations making up a particular process, like this:

Organizational Chart

There is also a predefined diagram type for rendering an organizational chart - Org Chart. This type of a diagram contains a set of shapes connected by lines in a hierarchical order.

Each shape has a text and a colored header line. Shapes located on the same level have headers of identical color. Optionally, you can add an image into a shape.


dhtmlxDiagram goes with an editor that let you build your own diagram: you need just to choose desired shapes and set connectors between them. Besides you can:

  • set precise positioning for shapes;
  • define their width and height;
  • specify the angle of rotation for a shape, if necessary;
  • define the content and look of a shape: set a suitable shape color, define outline settings, insert a text inside and adjust its look and feel;
  • modify the appearance of connectors.

Learn more about the editor:

What's Next

Now you can start building your own diagram step-by-step by following the How to Start tutorial.

You can also skip the basics and head for detailed guides and instructions:

Back to top