還在找流程圖控件？不如試試最新版本的GoJS

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中建立流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS 2.1

新的動畫功能

GoJS 2.1包含許多新功能，可爲圖表的不一樣組件製做動畫。

• 新的默認GoJS動畫「逐漸消失」，而不是對Node位置進行動畫處理。添加了AnimationManager.initialAnimationStyle以控制此行爲。這是一個例子：
  （頂部）新的初始動畫，「圖」位置向上動畫，「圖不透明度」從0到1動畫。
  （中部）一個自定義的「放大」動畫，動畫化了圖比例，在新的狀態圖示例中進行了演示，
  （底部）將AnimationManager.initialAnimationStyle設置爲AnimationManager.AnimateLocations以執行GoJS 2.0和之前的動畫樣式。該數據可視化示例使用此選項。
  
• 添加了"InitialAnimationStarting" DiagramEvent以更輕鬆地自定義初始動畫。有關詳細信息，請參見
• AnimationManager.initialAnimationStyle。
• 新類：AnimationTrigger。這些內容描述瞭如何在GraphObject更改值時自動爲其設置動畫。
• 新課程：動畫。此類容許您以聲明方式設置自定義動畫，並提供不肯定動畫的選項。
• 新的AnimationManager選項，包括定義自定義動畫效果以與AnimationManager.defineAnimationEffect
• 新的動畫示例和經修改以使用新的動畫功能的示例：
• 自定義動畫 - 新示例：演示許多Node建立/刪除動畫，連接動畫等。
• 樹負載動畫 - 新示例：模型加載時的遞歸動畫。
• 流程圖 -僅在組件面板中，禁用初始動畫，而使用自定義淡入動畫。
• 狀態圖 -禁用初始動畫，而使用自定義縮放淡入動畫。
• 數據可視化 -節點如今使用AnimationTrigger移動。
• 小貓監視器 -小貓如今使用AnimationTrigger移動。
• 處理流程 -連接的strokeDashArray的不肯定動畫。
• 車間監視器 -連接顏色更改如今使用AnimationTrigger。
  改進了對數據同步的支持

GoJS 2.1包含一些新方法，可簡化GoJS圖表在維護本身數據的應用程序（尤爲是React應用程序）中的集成。

• 新方法：Model.toIncrementalData。與現有方法Model.toIncrementalJson類似，此方法輸出一個IncrementalData對象，該對象包含在Transaction中發生的更改。它可用於使外部數據與GoJS模型保持同步。
• 新方法：Model.mergeNodeDataArray和GraphLinksModel.mergeLinkDataArray。這些方法用於將外部數據更改合併到GoJS模型中。
• 新方法：Model.cloneDeep。此方法可用於製做對象的深層副本，這對於確保GoJS不會與外部狀態共享引用頗有用。還能夠在Model.toIncrementalData中使用它，以確保IncrementalData的修改對象列表不包含對模型數據對象的引用。
  2.1.1的更改
• 修復了更新裝飾品當有小號綁定從s Model.modelData 和該共享對象已經經過調用改性Model.set的問題。
• 清理舊模時替換Diagram.model時提升了性能，這種狀況不多會在調試模式下致使有關Node.isTreeLeaf的模糊警告。
• 修復了使用序列化EnumValues加載模型的問題。
• 並發動畫的性能改進。
• 修復了動畫狀態的一致性。這包括修改什麼時候AnimationStarting和InitialAnimationStarting被調用，以及修復什麼時候中止默認動畫並當即啓動另外一個動畫（例如在動畫中間加載新模型時）的問題。
• 修復了帶有序列化EnumValues的Model.fromJson加載模型的問題。
• 改進了在圖之間拖動時顯示非默認光標的功能。
• 修復了在拖動Group元素時對Diagram.handlesDragDropForTopLevelParts的操做的問題。
• 修復了在某些瀏覽器中Diagram.scrollHorizontalLineChange和Diagram.scrollVerticalLineChange不會影響滾動大小的錯誤的問題。
• 修復了一個錯誤，該錯誤使某些避免節點連接沒法在嵌套組中正確路由。
  2.1.0的更改：
• 將DoubleTreeLayout添加到了extensions和extensionsTS目錄。Double Tree和Double Tree JSON示例如今都使用此 方法。將「 ChangingSelection」和「 ChangedSelection」 DiagramEvent的順序更新爲命令和工具的事務以外。例外包括在拖動複製或插入連接時在「拖動」和「連接」操做期間調用「 ChangingSelection」。在事務完成以後發生「 ChangedSelection」時，全部更改都將完成而且能夠在偵聽器中使用。
• 如今，默認狀況下，CommandHandler.zoomToFit會設置動畫。
• 改進了ContextMenuTool.defaultTouchContextMenu的「粘貼」命令，以使用ContextMenuTool.mouseDownPoint 而不是Diagram.lastInput的InputEvent.documentPoint。
• 添加了新屬性Diagram.opacity。這對於淡入/淡出動畫或禁用圖表的視覺指示可能頗有用。
• 添加了新方法Diagram.findLinkForKey，它將查找與模型的連接數據對象的惟一鍵對應的連接。僅當在GraphLinksModel.linkKeyProperty設置爲非空字符串的狀況下使用GraphLinksModel時，才返回連接。
• 若是JSON中包含的模型屬性（例如，nodeKeyProperty）與現有模型不匹配，則Model.applyIncrementalJson如今會引起錯誤。此檢查僅包括Model.toIncrementalJson輸出中包含的屬性。
• 添加了新方法，Picture.reload（在服務器上的文件已更改的狀況下從新加載Picture源）和Picture.redraw（在從新繪製圖片時），若是源由HTML Canvas或HTML視頻元素。
• 添加了新樣本：SVG數據URL-使用Base64 hrefs而不是Picture.source URL導出SVG