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:

Diagram

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 or create your own types of shapes, 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:

The following list of guides will help you to learn more about dhtmlxDiagram:

Diagram Editor

dhtmlxDiagram goes with an editor that lets 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.

You can read more information about Diagram Editor.

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.

The following list of guides will help you to learn more about Org Chart:

Org Chart Editor

The Org Chart Editor is a part of the dhtmlxDiagram library that allows building an org chart quickly: you need to select a shape and add a new child for it. Also you can:

  • set precise positioning for shapes;
  • define their width and height;
  • edit the content of a shape;
  • set a suitable color of a shape header.

You can read more information about Org Chart Editor.

Mixed diagram

In addition to creating Diagram or Org Chart with usual types of shapes, dhtmlxDiagram provides a great possibility to combine Diagram with Org Chart into a single diagram. Therefore, building a diagram with mixed types can be implemented in two ways:

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