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