DHTMLX Diagram庫是有各種類型的圖組成的，其中最廣泛使用的是JavaScript流程圖，它可以顯示任何類型的的工作流、過程或系統(tǒng)，您可以下載DHTMLX Diagram的評估版并親自試用。

在上文中（點擊這里回顧>>），我們?yōu)榇蠹医榻B了Javascript流程圖的應用場景、流程圖如何可視化數(shù)據(jù)等，本文將繼續(xù)講解為何要使用DHTMLX Diagram控件構建Javascript流程圖！

為什么選擇DHTMLX Diagram構建Javascript流程圖？

能夠操作流程圖對于工作流可視化很重要，豐富和靈活的API提供了可以實現(xiàn)目標的機會，用戶可以使用其設置 javascript/html5 流程圖。

1. 設置具有多個配置選項的流程圖元素

當您開始使用DHTMLX構建JavaScript流程圖時，會欣賞到許多有用的配置選項。此時，您可以指定形狀和線條的默認類型、形狀之間的邊距、帶有形狀圖標的工具欄、工具提示等。

如果您需要在DHTMLX庫中提供任何特定的流程圖形狀類型，只需將其設置為形狀對象內(nèi)的type屬性中的值。類似地，使用line對象中的type屬性指定單個連接器的線路類型。

 若要在為復雜流程圖準備數(shù)據(jù)時節(jié)省時間，可以使用defaults屬性一次為所有形狀和連接器線指定默認配置，這種方法還有助于提高代碼的可讀性。

2. 自定義和樣式每個流程圖元素來進行定制滿足需求

JavaScript圖表庫的另一個關鍵優(yōu)勢是增強了可定制性，用戶可以在其對象中對形狀和連接器行進行樣式設置，并重新定義相應的CSS類。因此根據(jù)項目的要求調(diào)整主要流程圖元素的外觀不會成為問題，形狀中的文本內(nèi)容可以通過內(nèi)聯(lián)編輯輕松更改。

如果這還不夠，還有可能創(chuàng)建自定義流程圖形狀并為它們定義模板。若要將自己的形狀添加到流程圖中，應使用addShape方法。

3. 通過API自由操作形狀，在需要時進行更改

當涉及到通過組件的API操作圖表項時，DHTMLX Diagram的js流程圖是高度靈活的。

例如，如果您想要建立一個大的流程圖，不需要安排整個結構在一個適當?shù)捻樞颍幸粋€特殊的自動布局算法可以幫您更快地完成這項工作。該算法將一組隨機連接的形狀轉換成一個美觀的層次結構，形狀的正交或徑向定位。在自動放置過程中，可以使用對角線(直接模式)或直角(邊緣模式)連接線連接形狀。

該功能通過兩種方式啟用：

• 使用autoplacement屬性：

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial"
});

• 使用autoPlace()方法：

const diagram = new dhx.Diagram(document.body, {
type: "default",
autoplacement: {
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial",
}
});

添加新形狀、刪除舊形狀，甚至通過使用相關的數(shù)據(jù)收集API從頭開始創(chuàng)建圖表，都是可能的。

使用add方法，您可以向流程圖中添加新形狀：

diagram.data.add({id:"3.2", text:"New Item", parent:"3"});

刪除一些不需要的形狀，甚至所有的形狀都可以用remove方法來完成：

diagram.data.remove(3.2);

diagram.data.removeAll();

如果您對已有的形狀感到滿意，但是它們的內(nèi)容需要改進，那么可以應用update方法將新數(shù)據(jù)放入形狀中。

diagram.data.update("1", {text:"Some new text"});

4. 制作易于閱讀和分析的寬流程圖

有了縮放和滾動功能，包含大量數(shù)據(jù)的寬流程圖不再給您和您的最終用戶帶來麻煩。考慮到流程圖的大小，您可以在scale屬性的幫助下放大或縮小：

var diagram = new dhx.Diagram (diagram"diagram_container", {type: "org", scale: 0.7});
diagram.data.parse(data);

另一種選擇是添加水平和/或垂直卷軸來查看流程圖。

為了便于最終用戶使用復雜的結構進行工作，您還可以使用swimlanes來補充流程圖，它有助于將整個可視化過程劃分為獨立的階段，就像本示例中所示。

這里還有一個有用的功能，就是能夠通過連接線上的標題來澄清流程圖中棘手的部分。

5. 導出流程圖為PNG和PDF

如果將流程圖導出為png或pdf，則可以輕松地保存、存儲和與他人共享過程可視化。

pdf或png導出方法不僅允許導出圖表，但也調(diào)整導出設置：

//export with config settings
diagram.export.png({
type:"jpeg"
fullPage: true
});

6. 提供無縫的前端和后端集成

真正重要的是，我們的javascript流程圖可以集成到使用任何客戶端和服務器端技術構建的任何web應用程序中，數(shù)據(jù)很容易以JSON格式加載到圖表中。我們提供的演示將讓您清楚地了解如何將DHTMLX Diagram集成到基于流行JavaScript框架(Angular, React, Vue.js)的應用程序中。使用DHTMLX Diagram，您的流程圖將在任何觸屏設備和所有現(xiàn)代瀏覽器上同樣出色地執(zhí)行。

7. 在DHTMLX Diagram編輯器中構建流程圖

作為通用編碼方法的另一種選擇，您還可以使用圖編輯器，它作為我們的圖表庫的輔助工具，具有三種操作模式(默認，組織圖，思維導圖)。通過將編輯器嵌入到您的應用程序中，將使最終用戶能夠以無代碼的方式使用30多個內(nèi)置形狀構建流程圖和其他類型的圖表。它有一個用戶友好的界面，支持拖放，由四個主要部分組成：

• 控制整個編輯過程的工具欄；
• 左面板選擇所需的形狀；
• 用于與形狀交互的網(wǎng)格區(qū)域；
• 用于更改圖表外觀的右面板。

 在功能方面，編輯器支持圖表組件的主要特性，如自動布局算法、自定義形狀、泳線、內(nèi)聯(lián)編輯等。為了方便地使用自定義形狀，您可以自定義編輯器的兩個面板。

除此之外，編輯器還提供了一些獨特的功能。例如，可以選擇多個形狀并同時執(zhí)行一些基本操作(拖動、復制、粘貼、刪除)，為形狀設置自定義工具欄，使用特殊的熱鍵組合加速類似形狀的樣式等。

除了自動布局算法之外，最終用戶還可以使用對齊線和多個對齊和分布選項在編輯器中準確地組織形狀。