Amazing 亞馬遜開源力作
今天要推薦的是亞馬遜（Amazon）開源的流程圖制作工具庫：Diagram Maker。Diagram Marker 是一個支持全面定制化的開源流程圖框架，且支持目前所有的前端框架（React、Vue 等），它同時提供了聲明式的接口從而降低將 Diagram Marker 集成到其他工具中的代碼成本。在此之外，還提供了很多內(nèi)建的交互式功能。
以下是兩個 Demo 示例：
Diagram Marker 主要提供了如下 7 大核心能力：
支持任意前端框架無縫集成
Diagram Maker 支持任意的框架，比如 React、Vue 等，當然你也可以直接在純 Javascript 或者 Typescript 代碼中使用。
支持任意數(shù)據(jù)格式
Diagram Maker 使用通用的扁平數(shù)據(jù)存儲格式，會存儲節(jié)點和邊的唯一 ID，以及 ID 之間的 Map 映射關(guān)系。這樣就可以將任何的圖類型的數(shù)據(jù)轉(zhuǎn)化為 Diagram Maker 支持的數(shù)據(jù)格式。為了避免數(shù)據(jù)之間的轉(zhuǎn)換和存儲，Diagram Maker 還提供了數(shù)據(jù)的實時消費模塊，用戶可以定義自己的數(shù)據(jù)消費和生成方式，從而不用二次去存儲轉(zhuǎn)換后的數(shù)據(jù)。
全面定制化
Diagram Maker 支持用戶對外觀 UI 和主題的完全定制化，只需要對標準的 CSS 進行覆蓋即可。除此之外，流程圖的行為也可以自由定制，用戶可以通過在事件傳遞過程中增加 Hook 的方式，修改最終觸發(fā)的行為，或者抑制原生組件的某些行為從而定義自己的事件行為或者擴展新的事件。
聲明式接口
Diagram Maker 暴露了聲明式的接口，這樣用戶只需要提供對應(yīng)的連續(xù)的狀態(tài)數(shù)據(jù)就可以控制流程圖的狀態(tài)。對于流程圖中節(jié)點的渲染，Diagram Maker 支持用戶通過 HTML 的方式對節(jié)點進行全面的控制。而對于交互式的行為（比如拖拽），同樣支持對應(yīng)的聲明式屬性定義方式。
比如以下是兩個節(jié)點的流程圖，和對應(yīng)的數(shù)據(jù)聲明定義。
類型綁定
Diagram Maker 使用 Typescript 開發(fā)的，意味著如果你使用 Typescript 的話，你可以捕獲在類型檢查時的異常，避免對應(yīng)的錯誤透傳到生產(chǎn)環(huán)境的 Web 頂層頁面。
交互式功能
Diagram Maker 提供了很多的交互式功能，用戶并不需要再重新實現(xiàn)。包括如下：
內(nèi)建的節(jié)點拖拽
通過拖拽的方式創(chuàng)建邊
面板拖拽
上下文菜單
快捷鍵支持選擇所有、刪除等
多狀態(tài)支持（比如拖拽、選擇、只讀等狀態(tài)）
內(nèi)建的 API 接口，比如撤銷或者重做、展示符合某個條件的所有節(jié)點、高亮某個節(jié)點、布局等
可擴展性
Diagram maker 除了支持 UI 和行為的可定制化，同時支持插件的方式來擴展庫的核心能力。
為了支持如上所述的核心能力，Diagram maker 的頂層架構(gòu)如下，這有助于幫助我們更好的理解 Diagram maker 提供的核心能力。
更多項目詳情請查看如下鏈接。