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