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

DHTMLX Diagram 最新版下載

Javascript 流程圖有何用途？

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

寬流程圖

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

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

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

流程圖經常用于編程來描述復雜的序列和主題，例如用戶在網站上的路徑、代碼結構或軟件架構。

業務建模還受益于 js 工作流圖，用于說明業務流程、構建策略、可視化基礎設施和其他目標。

流程圖被認為是項目經理的得力工具，因為它們非常適合展示項目的各個步驟。

流程圖在企業資源規劃領域也很流行，用于展示人力、財務、制造或任何其他資源的流動。

此外，它們還經常應用于科學方法和研究。

流程圖如何幫助可視化數據？

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

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

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

開始和結束形狀

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

工藝和準備形狀

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

或形狀

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

子程序形狀

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

文檔和數據庫形狀

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

流程圖連接器

為什么要使用 DHTMLX Diagram 構建 Javascript 流程圖?

能夠操作流程圖對于工作流可視化來說非常重要。豐富而靈活的 API 讓您有機會使用我們的 javascript/html5 工作流圖實現您設定的任何目標。

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

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

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

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

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

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

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

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

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

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

• 使用自動放置屬性：

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

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

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

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

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

diagram.data.remove(3.2);

diagram.data.removeAll();

如果您對現有的形狀感到滿意，但其內容需要改進，則可以應用更新方法將新數據放入形狀中。

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

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

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

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

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

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

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

5. 將流程圖導出為 PNG 和 PDF

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

方法不僅允許按原樣導出圖表，還可以調整導出設置：

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

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

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

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

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

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

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

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

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

結論

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

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