DHTMLX Diagram 庫包含各種類型的圖表。最廣泛使用的一種是 JavaScript 流程圖，它顯示任何類型的工作流、流程或系統(tǒng)。通過自動布局和實時編輯器，它可以更容易地將復(fù)雜數(shù)據(jù)可視化到一個整潔的層次結(jié)構(gòu)中。

DHTMLX Diagram 最新版下載

Javascript 流程圖有何用途？

可以將 JavaScript 流程圖（也稱為 JavaScript 工作流程圖、流程流或簡稱流程圖）集成到應(yīng)用程序中，以可視化公司的活動。它可以反映整個業(yè)務(wù)流程、某些部門的工作流程或單個操作的步驟。圖表的范圍完全取決于最終用戶的需求。

寬流程圖

讓我們看一下構(gòu)建流程圖可能有用的一些情況：

• 用這種圖表類型說明流程有助于公司成員更好地理解該流程及其組成部分。
• 通過流程圖中詳細(xì)的工作流程表示，可以更輕松地查找錯誤、缺點和弱點。
• 流程圖可以非常有效地向同事或團(tuán)隊成員解釋復(fù)雜問題，因為它們可以逐步展示流程。
• 這些圖表還可用于集思廣益，以直觀地展示問題、解決問題的方法或需要改進(jìn)的地方。

可以看出，js 流程圖有很多不同的用途。因此，它們被廣泛應(yīng)用于各個領(lǐng)域。我們將舉幾個例子。

流程圖經(jīng)常用于編程來描述復(fù)雜的序列和主題，例如用戶在網(wǎng)站上的路徑、代碼結(jié)構(gòu)或軟件架構(gòu)。

業(yè)務(wù)建模還受益于 js 工作流圖，用于說明業(yè)務(wù)流程、構(gòu)建策略、可視化基礎(chǔ)設(shè)施和其他目標(biāo)。

流程圖被認(rèn)為是項目經(jīng)理的得力工具，因為它們非常適合展示項目的各個步驟。

流程圖在企業(yè)資源規(guī)劃領(lǐng)域也很流行，用于展示人力、財務(wù)、制造或任何其他資源的流動。

此外，它們還經(jīng)常應(yīng)用于科學(xué)方法和研究。

流程圖如何幫助可視化數(shù)據(jù)？

由于流程圖具有多種圖形元素，因此可以以多種方式使用流程圖來可視化數(shù)據(jù)。您可以以獨特的方式組合流程圖元素來說明您需要的內(nèi)容。

DHTMLX Diagram庫提供了 30 多種不同類型的流程圖形狀，每種類型都有特定的用途。以下是最常用的形狀：

在許多情況下，流程圖以“開始”形狀開始并以“結(jié)束”形狀結(jié)束，標(biāo)記流程的起點和終點。

開始和結(jié)束形狀

“流程”形狀繪制在流程圖中間，作為流程的某些步驟，例如，作為用戶在網(wǎng)站上要采取的行動。同時，流程步驟基于“準(zhǔn)備”形狀，描述流程流動的條件（例如，用戶未登錄）。

工藝和準(zhǔn)備形狀

“或”形狀允許添加前面步驟的幾種可能的結(jié)果。

或形狀

您還可以使用“子程序”形狀，這是鏈接到另一個流程圖中現(xiàn)有流程的預(yù)定義流程形狀。

子程序形狀

其他常見形狀包括“數(shù)據(jù)庫”和“文檔”形狀。它們的名稱不言而喻。

文檔和數(shù)據(jù)庫形狀

除了形狀之外，連接器在構(gòu)建流程圖中也發(fā)揮著重要作用，因為它們顯示了流程圖元素之間的關(guān)系，并確保您的圖表被正確讀取。

流程圖連接器

為什么要使用 DHTMLX Diagram 構(gòu)建 Javascript 流程圖?

 能夠操作流程圖對于工作流可視化來說非常重要。豐富而靈活的 API 讓您有機(jī)會使用我們的 javascript/html5 工作流圖實現(xiàn)您設(shè)定的任何目標(biāo)。

1. 使用多個配置選項設(shè)置流程圖元素

當(dāng)您開始使用 DHTMLX 構(gòu)建 JavaScript 流程圖時，您一定會喜歡大量有用的配置選項。在這里，您可以指定形狀和線條的默認(rèn)類型、形狀之間的邊距、帶有形狀圖標(biāo)的工具欄、工具提示等等。

如果您需要我們庫中提供的任何特定流程圖形狀類型，只需將其設(shè)置為形狀對象內(nèi)的type屬性中的值即可。同樣，單個連接器的線型是使用 line 對象中的 type 屬性指定的。為了節(jié)省 準(zhǔn)備復(fù)雜流程圖數(shù)據(jù)的時間，您可以使用 defaults屬性一次性指定所有形狀和連接器線的默認(rèn)配置。這種方法還有助于提高代碼的可讀性。

2. 自定義和設(shè)置每個流程圖元素的樣式，以滿足您的需求

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

如果這還不夠，還可以創(chuàng)建自定義流程圖形狀并為其定義模板。要將自己的形狀添加到流程圖中，您應(yīng)該使用addShape方法。

3. 通過 API 自由操作形狀以在需要時進(jìn)行更改

當(dāng)通過組件的 API 操作圖表項時，我們的 js 流程圖具有高度的靈活性。

例如，如果您想構(gòu)建一個大型流程圖，您無需費心按正確順序排列整個結(jié)構(gòu)。有一種特殊的自動布局算法可以更快地為您完成這項工作。該算法將隨機(jī)鏈接的形狀數(shù)組轉(zhuǎn)換為具有正交或徑向定位形狀的美觀的層次結(jié)構(gòu)。在自動放置過程中，形狀可以用對角線（直接模式）或直角（邊緣模式）連接線連接。

此功能可以通過兩種方式啟用：

• 使用自動放置屬性：

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",
    }
});

您還可以使用相關(guān)的數(shù)據(jù)收集API 添加新形狀、刪除舊形狀，甚至從頭開始繪制圖表。add

方法可讓您向流程圖添加新形狀：

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

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

diagram.data.remove(3.2);

diagram.data.removeAll();

如果您對現(xiàn)有的形狀感到滿意，但其內(nèi)容需要改進(jìn)，則可以應(yīng)用更新方法將新數(shù)據(jù)放入形狀中。

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

4. 讓寬流程圖更易于閱讀和分析

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

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

另一個選項是添加水平和/或垂直滾動以查看流程圖。

為了方便最終用戶處理復(fù)雜的結(jié)構(gòu)，您還可以在流程圖中補(bǔ)充泳道，以幫助將整個可視化流程劃分為單獨的階段，如本示例所示。

此處的另一個有用功能是能夠通過連接線上的標(biāo)題闡明流程圖中棘手的部分。

5. 將流程圖導(dǎo)出為 PNG 和 PDF

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

方法不僅允許按原樣導(dǎo)出圖表，還可以調(diào)整導(dǎo)出設(shè)置：

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

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

真正重要的是，我們的 javascript 流程圖可以集成到使用任何客戶端和服務(wù)器端技術(shù)構(gòu)建的任何 Web 應(yīng)用程序中。數(shù)據(jù)可以以 JSON 格式輕松加載到您的圖表中。我們提供的演示將讓您清楚地了解如何將 DHTMLX Diagram 集成到基于流行 JavaScript 框架（Angular、React、Vue.js）的應(yīng)用程序中。使用 DHTMLX Diagram，您的流程圖在任何觸摸設(shè)備和所有現(xiàn)代瀏覽器上都將表現(xiàn)同樣出色。

7. 在 DHTMLX 圖表編輯器中構(gòu)建流程圖

作為常見編碼方法的替代方法，您還可以使用圖表編輯器。它作為我們圖表庫的輔助工具，具有三種操作模式（默認(rèn)、組織結(jié)構(gòu)圖、思維導(dǎo)圖）。通過將編輯器嵌入到您的應(yīng)用程序中，您將允許最終用戶使用 30 多種內(nèi)置形狀以無代碼的方式構(gòu)建流程圖和其他類型的圖表。它具有用戶友好的界面，支持拖放，由四個主要部分組成：

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

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

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

除了自動布局算法之外，最終用戶還可以使用捕捉線和多種對齊和分布選項在編輯器中準(zhǔn)確地組織形狀。我們的圖表編輯器的這些和其他特性在文檔中得到了全面介紹。

結(jié)論

使用 DHTMLX Diagram，您可以通過 JavaScript 流程圖獲得各種功能，以可視化任何復(fù)雜程度的流程。這種類型的圖表可以以一致的結(jié)構(gòu)反映任何相互關(guān)聯(lián)的事實。您可以用它來說明您需要的任何內(nèi)容，并獲得非常具有描述性和直觀的可視化效果。

希望這篇文章能夠幫助您了解流程圖的特點并使用 DHTMLX 創(chuàng)建自己的 JavaScript 流程圖，歡迎下載DHTMLX Diagram試用體驗~