在3.0 主要版本的DHTMLX JavaScript流程图功能上实现了突破，新版本引入了一种自动布局算法，可以在几秒钟内将随机放置的图表形状以整齐的顺序自动排列。其他新奇之处包括一个全新的配置属性，用于一次将默认设置应用于所有形状，创建自定义图表形状的方便方法，以及JavaScript图表和组织结构图编辑器的大量自定义选项。此外，在多重选择的帮助下，可以轻松地操纵多个形状。

图表自动布局算法

这个版本的亮点是一个自动布局算法，它将混乱的位置图形状转换成一个层次结构。

为了使其正常工作，需要在形状之间添加连接线。该算法有两种模式，它们在形状连接方式上有所不同。上面的例子演示了形状之间有对角线的“直接”模式和带有直角连接线的形状的“边缘”模式。

要启用图表形状的自动排列，您需要应用autoPlace方法和两个可选配置设置，以指定连接形状的模式（默认情况下为“直接”）和在一页上有多个独立图表时它们之间的距离（默认为200px）。或者，您可以通过autoplacement配置添加这些设置。在下面的代码片段中，我们在“边缘”模式下启用自动布局，图之间的距离为300px：

var diagram = new dhx.Diagram("diagram");
diagram.data.parse(data);
 
diagram.autoPlace({    
    mode: "edges",    
    graphPadding: 300
});

图表布局算法也可以在图表编辑器中使用，自动布局的设置可以通过autoplacement配置属性定义，如下例所示，这里我们有两个图：一个是正方形的，另一个是圆形的。自动布局算法将以“直接”模式排列两个图表，并在图表之间设置对角线连接器和100px距离：

var editor = new dhx.DiagramEditor(document.body, {
    autoplacement: {
        graphPadding: 100,
        mode: "direct"
    }
});

全新的分层布局算法加快了从用户界面创建美丽而复杂的图表的速度，最终用户不再需要花费时间和精力来整齐地放置每个形状。现在，他们只需要从右侧面板中选择所需的形状，将它们彼此连接起来，然后按“自动布局”按钮以获得有序的外观和感觉：

一个属性配置所有默认形状

DHTMLX diagramming library 3.0 引入了一个新的配置属性，当您使用大数据集创建复杂的图表时，仅此属性就可以为您节省大量的时间和精力。新的默认配置可以包含几乎所有不同类型形状的配置选项，从而大大减少了代码的大小。

让我们在下面的例子中仔细看看：

const defaults = {
    start: {
        fill: "#FE9998",
        stroke: "#FE9998",
        fontColor: "#FFF",
        lineHeight: 16
    },
    end: {
        fill: "#FE9998",
        stroke: "#FE9998",
        fontColor: "#FFF",
        lineHeight: 16
    },
    process: {
        fill: "#478D99",
        stroke: "#478D99",
        fontColor: "#FFF",
        lineHeight: 16
    },
    decision: {
        fill: "#F7D768",
        stroke: "#F7D768",
        fontColor: "#FFF",
        lineHeight: 16
    },
    document: {
        fill: "#478D99",
        stroke: "#478D99",
        fontColor: "#FFF",
        lineHeight: 16
    }
};

const diagram = new dhx.Diagram("diagram", {
    defaults: defaults
});
diagram.data.parse(activity);

在上图中，您可以看到一个描述业务活动流的活动图。“默认配置”包含此图表中使用的每个流程图形状的一组默认配置选项。例如，所有流程形状都用青色（#478D99）、白色字体和固定行高（16px）着色。即使我们用数百个新的活动来扩展数据集，用流程形状来说明，我们的代码仍然会像以前一样简洁。

建自定义形状的新简单方法

V3.0提供了一种新的API方法，可以轻松地创建自定义图表和组织结构图形状。新的addShape方法使开发人员能够为新添加的形状指定唯一的模板，该模板可以包含任何自定义元素，如图像、图标或其他自定义内容。或者，您可以在defaults属性的帮助下设置形状的默认配置。

下面您可以看到一个代码示例，该示例说明如何在网络图的addShape方法的帮助下创建自定义形状。这里，我们使用一个HTML模板，根据ES6+标准，来定义要在一个形状中包含哪些自定义元素：图像、文本和IP地址的数字串。我们指定defaults config来添加网络图形状的默认属性，如宽度、高度、图像路径、文本和IP地址。如果需要，可以在每个特定形状的配置中重写这些属性：

diagram.addShape("networkCard", {
    template: config => (
    <section class='network_template'>;
        <img src='${config.img}’ alt='${config.text}’'></img>
        <span>${config.text}</span>
        <span>${config.ip}</span>
    </section>
    ),
    defaults: {
        width: 160,
        height: 160,
        img: "../common/img/network_image/desktop.svg",
        text: "Network Card",
        ip: "138.68.41.78",
    }
});

因此，您可以创建一个光滑的网络图，如下图所示：

将活动图表添加到自定义形状中

addShape方法还可用于将自定义形状快速添加到实时图表和组织结构图编辑器中。您只需在编辑器配置对象中设置addShape方法，并使用默认设置应用所需的模板（如果需要）。锦上添花，所有自定义形状将自动呈现在编辑器的左面板作为形状预览。

v3.0中提供的定制选项允许您微调图表和组织结构图编辑器的外观。您可以根据您的需要定制编辑器的左右面板。

自定义左侧面板

新的shapeSections配置属性使您能够将所有形状分类到多个组中，并在关系图编辑器左侧面板的相应部分中显示它们。此外，还可以控制在那里预览形状的方式。

在下面的示例中，我们添加了四个带有自定义、粘滞、组织结构图和流程图形状预览的部分。此外，我们使用scalePreview配置选项来定义形状预览的大小：

const editor = new dhx.DiagramEditor(document.body, {
    shapeSections: {
        "custom shapes": ["networkCard", "medCard"],
        "sticky shapes": ["blue", "orange"],
        "org chart shapes": ["card", "img-card"],
        "flowchart shapes": [true],
    },
    scalePreview: 0.65,
});

或者，也可以使用“默认值”属性的“预览”属性添加图像，而不是自动渲染的形状预览，以用于预览特定形状。可以指定宽度和高度参数来定义图像预览的大小。此外，还可以使用gapPreview属性更改形状预览之间的距离，并使用shapeBarWidth配置属性指定左面板的宽度。

自定义右侧面板

图表编辑器的右侧面板将根据形状的数据集，自动呈现边栏选项，用于编辑具有标准属性（如标题、文本、填充、笔划等）的自定义形状，如上面的示例所示。

但是，在处理复杂的自定义形状时，您可能需要为编辑器配备专用工具，以便在图表和组织结构图编辑器中修改各种自定义元素。为此，我们引入了addShape方法的properties属性，该属性允许更改右侧面板中供最终用户编辑的边栏选项。

自定义组织结构图形状包含医生姓名和职位的多个文本元素、电话号码和电子邮件地址字段以及照片。由于右侧面板中有一系列编辑工具，因此可以从UI编辑每个元素。正如您在代码示例中看到的，properties属性包括用于定义形状的位置和大小、医生姓名、职务、电话号码和电子邮件地址的选项，以及要加载到所选形状中的照片。编辑选项在侧栏中的显示顺序与在“属性”属性中指定的顺序完全相同：

editor.diagram.addShape("template", {
    template: template,
    defaults: {
        name: "Name and First name",
        post: "Position held",
        phone: "(405) 000-00-00",
        mail: "some@mail.com",
        photo: "../common/big_img/big-avatar-1.jpg",

        height: 115, width: 330
    },
    properties: [
        { type: "position" },
        { type: "size" },
        { type: "text", label: "name", property: "name" },
        { type: "text", label: "post", property: "post" },
        { type: "text", label: "phone", property: "phone" },
        { type: "text", label: "email", property: "mail" },
        { type: "img", label: "photo",  property: "photo" }
    ]
});

此外，现在可以通过controls属性定义要在编辑器中使用的控件。例如，您可以启用导入和导出控件、设置移动形状步骤的网格步进选项、自动布局控件和编辑模式按钮，并禁用撤消和重做、应用和重置更改按钮：

var editor = new dhx.DiagramEditor(document.body, {
    controls: {
        import: true,
        export: true,
        gridStep: true,
        autoLayout: true,
        editMode: true,
        historyManager: false
        apply: false,
        reset: false
    },
});

多选形状

编辑工作中的另一个重要增强是能够同时操纵多个形状和连接件。V3.0提供了用于拖动、复制、粘贴和删除形状的多选择功能。要选择多个形状，可以在按住鼠标左键的同时将鼠标悬停在这些形状上，也可以在按住Shift键的同时左键单击每个形状。

搜索和放大图表的新用例

根据用户的要求，我们准备了两个新的示例，涵盖了使用JavaScript图表的最流行的情况。其中一个需要的例子是实现搜索功能，以便在大量图表和组织结构图中导航：

另一个示例演示了组织结构图形状如何在放大和缩小时根据比例改变其外观：