DhtmlxDiagram 是一個隨時可用的庫，只需幾行代碼就能生成任何你需要的圖表。借助自動布局和實時圖編輯器，以整齊的層次結構可視化復雜數據。JavaScript dhtmlxDiagram可以向Web應用程序中添加漂亮的交互式圖表，圖表和圖形。借助這種輕巧而快速的組件，您的數據將以清晰直觀的方式表示

DHTMLX Diagram正版試用下載

什么是 Javascript 流程圖？

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

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

• 使用此圖表類型說明流程有助于公司成員更好地理解此流程及其包含的內容。
• 通過流程圖中詳細的工作流程表示，查找錯誤、缺點和弱點變得更加容易。
• 流程圖對于向同事或團隊成員解釋復雜的問題非常有效，因為它們會逐步顯示流程。
• 這些圖表也可以在頭腦風暴時使用，以可視化問題、解決問題的方法或應該改進的地方。

如您所見，js 流程圖有許多不同的用途。因此，它們被應用于廣泛的領域。我們將舉幾個例子。

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

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

流程圖被認為是項目經理的便捷工具，因為它們非常適合顯示項目的步驟。

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

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

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

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

我們的庫提供了30 多種不同類型的流程圖形狀，每種類型都用于特定目的。以下是最常用的形狀：

在許多情況下，流程圖以“開始”形狀開始，以“結束”形狀結束，這標志著流程的開始和結束點。

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

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

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

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

除了形狀之外，連接線對于構建流程圖也起著重要作用，因為它們顯示了流程圖元素如何相互關聯并確保您的圖表被正確閱讀。

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

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

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

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

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

如果這還不夠，可以創建自定義流程圖形狀并為它們定義模板。要將您自己的形狀添加到流程圖，您應該使用addShape方法。訪問此頁面以了解有關 DHTMLX 圖表的自定義功能的更多信息。

3. 通過 API 自由操作形狀以在需要時進行更改
我們的 js 流程圖在通過組件的 API 操作圖表項目時非常靈活。

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

此功能以兩種方式啟用：

• 使用自動放置屬性：

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. 使寬流程圖易于閱讀和分析
由于具有縮放和滾動功能，包含大量數據的寬流程圖不會再給您和您的最終用戶帶來麻煩。考慮到流程圖的大小，您可以在scale屬性的幫助下放大或縮小

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 圖表庫中包含的其他圖表類型的更多詳細信息。

如果您想立即嘗試 javascript 流程圖，只需下載我們的。

DHTMLX 享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是最完善的甘特圖圖表庫。

甘特圖控件交流群：764148812   

歡迎進群交流討論，獲取更多幫助請聯系