大家好，我是你們的huber。
今天要推薦的是亞馬遜（Amazon）開源的流程圖製作工具庫：Diagram Maker。Diagram Marker 是一個支持全面定製化的開源流程圖框架，且支持目前所有的前端框架（React、Vue 等），它同時提供了聲明式的接口從而降低將Diagram Marker 集成到其他工具中的代碼成本。在此之外，還提供了很多內建的交互式功能。
以下是兩個 Demo 示例：
Diagram Marker
Diagram Marker 主要提供了如下 7 大核心能力：
支持任意前端框架無縫集成
Diagram Maker 支持任意的框架，比如 React、Vue 等，當然你也可以直接在純 Javascript 或者 Typescript 代碼中使用。
支持任意數據格式
Diagram Maker 使用通用的扁平數據存儲格式，會存儲節點和邊的唯一 ID，以及 ID 之間的 Map 映射關係。這樣就可以將任何的圖類型的數據轉化為 Diagram Maker 支持的數據格式。為了避免數據之間的轉換和存儲，Diagram Maker 還提供了數據的實時消費模塊，用戶可以定義自己的數據消費和生成方式，從而不用二次去存儲轉換後的數據。
全面定製化
Diagram Maker 支持用戶對外觀 UI 和主題的完全定製化，只需要對標準的 CSS 進行覆蓋即可。除此之外，流程圖的行為也可以自由定製，用戶可以通過在事件傳遞過程中增加 Hook 的方式，修改最終觸發的行為，或者抑制原生組件的某些行為從而定義自己的事件行為或者擴展新的事件。
聲明式接口
Diagram Maker 暴露了聲明式的接口，這樣用戶只需要提供對應的連續的狀態數據就可以控制流程圖的狀態。對於流程圖中節點的渲染，Diagram Maker 支持用戶通過 HTML 的方式對節點進行全面的控制。而對於交互式的行為（比如拖拽），同樣支持對應的聲明式屬性定義方式。
比如以下是兩個節點的流程圖，和對應的數據聲明定義。
類型綁定
Diagram Maker 使用 Typescript 開發的，意味著如果你使用 Typescript 的話，你可以捕獲在類型檢查時的異常，避免對應的錯誤透傳到生產環境的 Web 頂層頁面。
交互式功能
Diagram Maker 提供了很多的交互式功能，用戶並不需要再重新實現。包括如下：
內建的節點拖拽
通過拖拽的方式創建邊
面板拖拽
上下文菜單
快捷鍵支持選擇所有、刪除等
多狀態支持（比如拖拽、選擇、只讀等狀態）
內建的 API 接口，比如撤銷或者重做、展示符合某個條件的所有節點、高亮某個節點、布局等
可擴展性
Diagram maker 除了支持 UI 和行為的可定製化，同時支持插件的方式來擴展庫的核心能力。
為了支持如上所述的核心能力，Diagram maker 的頂層架構如下，這有助於幫助我們更好的理解 Diagram maker 提供的核心能力。
更多項目詳情請查看如下連結。
傳送門
開源項目地址：https://github.com/awslabs/diagram-maker
來源：GitHub精選
版權申明：內容來源網絡，版權歸原創者所有。除非無法確認，我們都會標明作者及出處，如有侵權煩請告知，我們會立即刪除並表示歉意。謝謝!
感謝閱讀