Amazing 亞馬遜也有開源力作？
大家好，我是你們的huber。
今天要推薦的是亞馬遜（Amazon）開源的流程圖制作工具庫(kù)：Diagram Maker。Diagram Marker 是一個(gè)支持全面定制化的開源流程圖框架，且支持目前所有的前端框架（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)系。這樣就可以將任何的圖類型的數(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ù)聲明定義。
類型綁定
Diagram Maker 使用 Typescript 開發(fā)的，意味著如果你使用 Typescript 的話，你可以捕獲在類型檢查時(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 接口，比如撤銷或者重做、展示符合某個(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)查看如下鏈接。
傳送門
開源項(xiàng)目地址：https://github.com/awslabs/diagram-maker
如果你也有好的開源項(xiàng)目，歡迎推薦！
微信號(hào)聯(lián)系：westbrook12000（ps：加好友請(qǐng)備注“開源”）
回復(fù)?【小程序】獲取15套小程序源碼【學(xué)習(xí)+實(shí)戰(zhàn)+賺錢】 回復(fù)?【關(guān)閉】學(xué)關(guān)閉微信朋友圈廣告 回復(fù)?【實(shí)戰(zhàn)】獲取20套實(shí)戰(zhàn)源碼 回復(fù)?【福利】獲取最新微信支付有獎(jiǎng)勵(lì) 回復(fù)?【被刪】學(xué)查看你哪個(gè)好友刪除了你巧 回復(fù)?【訪客】學(xué)微信查看朋友圈訪客記錄 回復(fù)?【python】學(xué)微獲取全套0基礎(chǔ)Python知識(shí)手冊(cè) 那個(gè)驚動(dòng)Github CEO的下載神器，強(qiáng)勢(shì)回歸了！
又來(lái)一個(gè)神器，可以查看微信朋友圈訪客記錄！
