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。思维导图模式。情绪思维导图

各个形状通过曲线连接，并围绕图表的中心形状排列。

自定义形状

以下示例展示了如何在图表的思维导图模式中添加自定义模板，以创建网站地图：

PERT 模式下的 Diagram

PERT 模式用于可视化任务和项目的顺序及其相互之间的联系，同时也有助于识别关键路径并进行项目规划。

PERT 模式下的 Diagram 使用 DHTMLX Gantt 的数据结构，该结构可实现组件之间的轻松交互。加载 Gantt 数据集后，PERT 模式下的 Diagram 会根据任务和项目之间的连接自动排列它们。

PERT Diagram 与 DHTMLX Gantt 的集成

以下示例展示了如何将 PERT 模式下的 Diagram 与 Gantt 图表进行集成：

形状搜索

DHTMLX Diagram 为您提供了一套 API，可用于让使用 Diagram 的过程更加便捷。 例如，您可以实现形状搜索功能，帮助简化处理大型图表时的工作。

Diagram 缩放

您可以为图表应用缩放模板，通过放大或缩小来改变其外观。您还可以让用户获取所选形状的详细信息。

下一步

现在，您可以了解如何在应用程序中使用 DHTMLX Diagram Editor。请阅读 Diagram Editor 概述，以详细了解此工具。