Обзор DHTMLX Diagram
DHTMLX Diagram — это клиентский компонент для построения диаграмм, который позволяет наглядно отображать связи между объектами, понятиями или живыми существами: в виде схемы, диаграммы, организационной структуры, интеллект-карты и т. д. Diagram упрощает представление запутанной и громоздкой информации в простой и доступной форме.
Diagram в режиме по умолчанию
DHTMLX Diagram позволяет создавать различные диаграммы с помощью предустановленного набора фигур и соединительных линий, а также экспериментировать с их внешним видом.
Вы можете выбирать фигуры нужных типов, соединять их подходящими линиями и создавать диаграмму любого типа, отображающую последовательность операций, составляющих определённый процесс, например, такую:
| Модель планирования данных | Вертикальное дерево решений | Широкая блок-схема |
|---|---|---|
 |  |  |
| Дерево решений | Диаграмма деятельности |
|---|---|
 |  |
Пользовательские фигуры
Вы можете создавать собственные шаблоны фигур и использовать их для оформления любой нужной диаграммы. Например, можно создавать такие известные пользовательские диаграммы, как:
| Диаграмма жизненного цикла | Шаблон диаграммы Венна | Шаблон UML-диаграммы классов |
|---|---|---|
 |  |  |
| Шаблон сетевой диаграммы | Уровни и локации игры |
|---|---|
 |  |
Группы
Вы можете строить простые или более сложные схемы, группируя фигуры различными способами с помощью такого элемента Diagram, как группа. Можно создавать как одноуровневые, так и вложенные группы, а также настраивать их внешний вид и поведение. Подробности — в статье Группы.
| Diagram Editor. Режим по умолчанию. Архитектура виртуального частного облака |
|---|
 |
Дорожки
Дорожки в библиотеке DHTMLX Diagram позволяют представить любой процесс (бизнес-процесс, производственный, сервисный или любой другой) или его отдельные этап ы от начала до конца. Подробности — в статье Дорожки.
| Diagram. Режим по умолчанию. Шаблон дорожки |
|---|
 |
Заголовки линий
Заголовки линий доступны в режиме по умолчанию Diagram. Вы можете добавить текст двойным щелчком по линии. Двойной щелчок также используется для редактирования текста. Подробности — в статье Заголовки линий.
Diagram в режиме организационной диаграммы
Также существует режим организационной диаграммы Diagram, который представ ляет собой набор фигур, соединённых линиями в иерархическом порядке.
Вспомогательные и партнёрские фигуры
Родительская фигура любого уровня может иметь вспомогательные или партнёрские элементы. Вспомогательные и партнёрские фигуры не могут быть родительскими элементами. Вспомогательные и партнёрские элементы можно добавить в редакторе или подготовив набор данных.
В иерархическом порядке вспомогательные элементы отображаются между родительской и дочерними фигурами.
| Diagram editor. Режим организационной диаграммы. Базовая инициализация |
|---|
 |
Соединение между родительской фигурой и её партнёрскими элементами всегда горизонтальное. Кроме того, соединения между родительской фигурой и всеми её дочерними элементами становятся горизонтальными при добавлении партнёрского элемента для родителя, даже если ранее соединения были вертикальными.
Партнёрские фигуры очень полезны для построения генеалогического древа.
Связанный пример: Diagram editor. Режим организационной диаграммы. Генеалогическое древо
Ниже приведены примеры того, как выглядят соединения родительских фигур с одним, двумя, тремя и четырьмя партнёрами.
| Один партнёр | Два партнёра |
|---|---|
 |  |
| Три партнёра | Четыре партнёра |
|---|---|
 |  |
Пользовательские фигуры
Пример добавления пользовательских фигур для создания диаграммы, представляющей иерархическую организационную структуру медицинского учреждения:
| Diagram Editor. Режим организационной диаграммы. Шаблон диаграммы медицинской иерархии |
|---|
 |
Diagram в режиме интеллект-карты
Режим интеллект-карты используется для представления основной темы или идеи, окружённой ветвями подтем.
| Diagram. Режим интеллект-карты. Интеллект-карта эмоций |
|---|
 |
Фигуры соединены изогнутыми линиями и расположены вокруг центральной фигуры диаграммы.
Пользовательские фигуры
Пример добавления пользовательского шаблона в режим интеллект-карты диаграммы для создания карты сайта:
Diagram в режиме PERT
Режим PERT используется для визуализации последовательностей задач и проектов, а также связей между ними. Он также полезен для определения критического пути и планирования проекта.
Diagram в режиме PERT использует структуру данных DHTMLX Gantt, что обеспечивает простое взаимодействие между компонентами. При загрузке набора данных Gantt диаграмма в режиме PERT автоматически упорядочивает задачи и проекты на основе связей между ними.
Интеграция Diagram в режиме PERT и DHTMLX Gantt
Ниже приведён пример интеграции диаграммы в режиме PERT и диаграммы Ганта:
Поиск фигур
DHTMLX Diagram предоставляет набор API, который можно применять для более удобной работы с Diagram. Например, вы можете реализовать функцию поиска фигур, которая упрощает работу с большими диаграммами.
Масштаб Diagram
Вы можете применить шаблон масштабирования к диаграмме, чтобы изменять её внешний вид, увеличивая или уменьшая масштаб. Также можно предоставить пользователю возможность получать подробную информацию о выбранной фигуре.
Что дальше
Теперь вы можете узнать больше об использовании DHTMLX Diagram Editor в своём приложении. Прочитайте статью Обзор Diagram Editor, чтобы узнать больше об этом инструменте.