Guides overview

The guidance information explores in detail how to create a diagram of any complexity using DHTMLX Diagram. The documentation is segmented into task-oriented manuals which discuss the principles of building and configuring a diagram, the ways of editing its items. The guides embody a lot of tools to assist in actual use of DHTMLX Diagram: examples of usage, illustrations, animated images.

Diagram

The section details the process of adding DHTMLX Diagram on a page, describes the features of Diagram configuration, explains the way of scrolling a large diagram.

• How to start with Diagram
• Diagram configuration
• Scrolling Diagram

Diagram items

The section includes descriptions for all default diagram items (shapes, lines, groups, swimlanes), the way of adding custom shapes, and teaches how to configure the items and set connections between them.

• Default shapes
• Custom shape
• Lines
• Groups
• Swimlanes

Diagram Editor

Learn how to initialize Diagram Editor - a great tool which significantly accelerates the process of designing your diagram.

• How to start with Diagram Editor

The guides give you a broad overview of all parts of the interface of the editor and their settings, present examples of customization of the interface elements you may have at your disposal.

• Toolbar
• Left panel
• Grid area
• Right panel

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.

• Loading and storing data
• Exporting Diagram

With the following articles you will be able to create a fully customized diagram and breath life into it: operate the diagram and its items via the API, attach handlers to the necessary events.

• Manipulating items
• Customizing items
• Event handling

Learn how to adapt the diagram to various languages and easily edit the text elements.

• Localization
• Inline Editing

Integration guides

The articles give you examples of usage a Diagram with different client-side frameworks.

• Integration with Angular
• Integration with React
• Integration with Vue.js

Touch support

You can easily create responsive web applications using DHTMLX Diagram due 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.

• Using Diagram with TypeScript