Guides overview
These guides explain in detail how to create a diagram of any complexity using DHTMLX Diagram. The documentation is divided into task-oriented manuals that discuss the principles of building and configuring a diagram and the ways of editing its items. The guides include many aids to help you use DHTMLX Diagram: usage examples, illustrations, and animated images.
Diagram
This section details how to add DHTMLX Diagram to a page, describes Diagram configuration, and explains how to scroll a large diagram.
Diagram items
This section describes all default diagram items (shapes, lines, groups, swimlanes), shows how to add custom shapes, and teaches how to configure the items and set connections between them.
Diagram Editor
Learn how to initialize Diagram Editor, a tool that speeds up designing your diagram.
The guides give a broad overview of all parts of the editor interface and their settings, and present customization examples for the interface elements.
Common guides
Read the articles to learn the ways of loading data into the Diagram, serializing and saving data, importing Diagram data into the Editor and exporting Diagram data in various formats. Here you will also find examples of data templates for different diagram items.
The following articles help you create a fully customized diagram: operate the diagram and its items via the API and attach handlers to the necessary events.
Learn how to adapt the diagram to various languages and edit the text elements.
Integration guides
The articles give you examples of using Diagram with different client-side frameworks.
Touch support
You can create responsive web applications with DHTMLX Diagram thanks to built-in touch support. Check out how UI widgets work on touch devices in the Touch support guide.
TypeScript support
Browse the TypeScript Support guide with code snippets to learn more about built-in type definitions allowing you to write clean code faster.