這段時(shí)間除了在研發(fā)可視化+AI的產(chǎn)品，還開源了很多有價(jià)值的可視化搭建的開源項(xiàng)目，接下來(lái)我會(huì)和大家系統(tǒng)復(fù)盤一下最近幾年開源的可視化搭建項(xiàng)目，以便幫助大家更好的上手可視化低代碼項(xiàng)目的開發(fā)。

圖片

文末我建了一個(gè)可視化交流群，大家感興趣可以在群里交流體驗(yàn)。

1. rc-drag

圖片

在可視化搭建的過(guò)程中，組件的交互操作是實(shí)現(xiàn)豐富頁(yè)面效果的關(guān)鍵。rc-drag 便是一款專注于解決組件拖拽、縮放等交互問(wèn)題的開源項(xiàng)目，它基于 React 開發(fā)，為開發(fā)者提供了便捷的方式來(lái)實(shí)現(xiàn)組件的自由布局和靈活調(diào)整 。

rc-drag 的核心優(yōu)勢(shì)在于其簡(jiǎn)潔而強(qiáng)大的功能設(shè)計(jì)。它支持組件的自由拖拽，讓用戶可以輕松地將組件放置到頁(yè)面的任意位置，就像在桌面擺放圖標(biāo)一樣簡(jiǎn)單直觀。在多方位縮放方面，用戶能夠通過(guò)控制點(diǎn)對(duì)組件進(jìn)行靈活縮放，無(wú)論是放大以突出顯示重要內(nèi)容，還是縮小以合理布局頁(yè)面元素，都能輕松實(shí)現(xiàn)。

在可視化搭建平臺(tái)中，頁(yè)面元素的層級(jí)關(guān)系至關(guān)重要。rc-drag 允許開發(fā)者自由控制組件的層級(jí)，通過(guò)設(shè)置 zIndex 屬性，輕松實(shí)現(xiàn)組件的疊加和層的概念，解決了復(fù)雜頁(yè)面布局中層級(jí)管理的難題。

同時(shí)我們還可以借助AI，實(shí)現(xiàn)更加復(fù)雜的拖拽效果。

github地址：https://github.com/MrXujiang/rc-drag

2. V6.Dooring可視化大屏編輯器

圖片

在大數(shù)據(jù)時(shí)代，數(shù)據(jù)可視化大屏已成為企業(yè)展示關(guān)鍵數(shù)據(jù)、實(shí)時(shí)監(jiān)控業(yè)務(wù)指標(biāo)的重要工具。v6.dooring 作為一款專注于可視化大屏搭建的開源項(xiàng)目，憑借其強(qiáng)大的功能和易用的特性，成為眾多開發(fā)者和企業(yè)的首選。

v6.dooring 采用了前沿的 Web 技術(shù)棧，結(jié)合 Ant Design 等優(yōu)秀的 UI 組件庫(kù)，構(gòu)建了一個(gè)高效、靈活的可視化編輯引擎。其底層的可擴(kuò)展架構(gòu)，使得組件的拖拽、配置等操作流暢無(wú)阻，同時(shí)支持動(dòng)態(tài)數(shù)據(jù)綁定、動(dòng)畫效果以及響應(yīng)式布局，確保大屏在不同設(shè)備上都能完美呈現(xiàn)。

圖片

動(dòng)態(tài)渲染器負(fù)責(zé)根據(jù)用戶的操作和配置，實(shí)時(shí)渲染出可視化大屏。當(dāng)用戶調(diào)整組件的屬性、位置或數(shù)據(jù)時(shí)，動(dòng)態(tài)渲染器能夠迅速做出響應(yīng)，更新大屏的展示效果，實(shí)現(xiàn)即見即所得的編輯體驗(yàn)。

圖片

配置面板為用戶提供了對(duì)組件屬性進(jìn)行詳細(xì)設(shè)置的界面。通過(guò)配置面板，用戶可以修改組件的顏色、字體、大小、數(shù)據(jù)來(lái)源等屬性，輕松定制組件的外觀和功能 。

在實(shí)際應(yīng)用中，v6.dooring 的身影隨處可見。在企業(yè)的運(yùn)營(yíng)數(shù)據(jù)分析大屏中，它可以將企業(yè)的關(guān)鍵業(yè)務(wù)數(shù)據(jù)，如銷售額、利潤(rùn)、用戶增長(zhǎng)等，以直觀的圖表形式呈現(xiàn)出來(lái)，幫助企業(yè)管理者快速了解業(yè)務(wù)狀況，做出決策。在智慧城市的監(jiān)控中心，通過(guò) v6.dooring 搭建的大屏，可以實(shí)時(shí)展示交通流量、環(huán)境質(zhì)量、能源消耗等數(shù)據(jù)，為城市管理者提供決策依據(jù)，實(shí)現(xiàn)城市的智能化管理 。在零售行業(yè)，v6.dooring可以用于搭建銷售數(shù)據(jù)跟蹤大屏，幫助商家分析銷售趨勢(shì)、商品銷量等數(shù)據(jù)，優(yōu)化商品布局和營(yíng)銷策略 。

github地址：https://github.com/MrXujiang/v6.dooring.public

3. H5-Dooring頁(yè)面搭建平臺(tái)

圖片

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，H5 頁(yè)面作為一種重要的傳播和展示載體，廣泛應(yīng)用于各種場(chǎng)景，如活動(dòng)宣傳、產(chǎn)品推廣、信息展示等。h5-dooring 正是一款專門為 H5 頁(yè)面搭建而生的開源項(xiàng)目，它以其零門檻、高靈活性的特點(diǎn)，讓 H5 頁(yè)面制作變得輕松簡(jiǎn)單 。

圖片

h5-dooring 的易用性堪稱一絕。它采用了零代碼的設(shè)計(jì)理念，幾乎 0 使用門檻，用戶無(wú)需具備編程知識(shí)，只需通過(guò)簡(jiǎn)單的拖拽和配置操作，就能像搭建積木一樣，輕松創(chuàng)建出精美、互動(dòng)性強(qiáng)的 H5 頁(yè)面 。無(wú)論是專業(yè)的設(shè)計(jì)師、開發(fā)人員，還是沒有編程經(jīng)驗(yàn)的普通用戶，都能快速上手，將自己的創(chuàng)意轉(zhuǎn)化為實(shí)際的頁(yè)面。

在布局模式上，h5-dooring 提供了網(wǎng)格布局和自由布局兩種方式。網(wǎng)格布局能夠幫助用戶快速構(gòu)建出整齊、規(guī)范的頁(yè)面結(jié)構(gòu)，適合展示大量信息或需要保持頁(yè)面一致性的場(chǎng)景；自由布局則給予用戶充分的創(chuàng)作自由，用戶可以隨心所欲地?cái)[放組件，實(shí)現(xiàn)個(gè)性化的設(shè)計(jì)，滿足各種創(chuàng)意需求。

圖片

h5-dooring 擁有豐富的模板庫(kù)和組件庫(kù)。模板庫(kù)中包含了各種類型的 H5 頁(yè)面模板，如企業(yè)微官網(wǎng)模板，其簡(jiǎn)潔大氣的設(shè)計(jì)風(fēng)格，能夠展示企業(yè)的形象和業(yè)務(wù)；營(yíng)銷宣傳頁(yè)模板，通過(guò)精美的視覺效果和吸引人的文案，激發(fā)用戶的興趣；活動(dòng)邀請(qǐng)函模板，為用戶提供了舉辦活動(dòng)時(shí)邀請(qǐng)嘉賓的便捷方式 。這些模板經(jīng)過(guò)精心設(shè)計(jì)，用戶可以直接使用，也可以根據(jù)自己的需求進(jìn)行修改和定制，大大節(jié)省了制作時(shí)間。

github地址：https://github.com/MrXujiang/h5-Dooring

4. flowmix/flow，一款開箱即用的可視化工作流引擎

圖片

flowmix/flow 致力于提供一套開箱即用的流程可視化搭建底座，能夠支撐各種復(fù)雜工作流場(chǎng)景的設(shè)計(jì) 。它汲取了市面上主流工作流引擎的設(shè)計(jì)經(jīng)驗(yàn)，并對(duì)性能做了極致的優(yōu)化，目前其搭建性能和所見即所得的 UI 更新流暢度都非常出色。

在功能方面，flowmix/flow 不斷推陳出新。它支持節(jié)點(diǎn)動(dòng)畫配置，整套設(shè)計(jì)架構(gòu)支持多種類型的屬性編輯，包括樣式、數(shù)據(jù)、動(dòng)畫等。用戶可以輕松給節(jié)點(diǎn)配置不同的動(dòng)畫效果，并設(shè)置動(dòng)畫的時(shí)長(zhǎng)、次數(shù)等，為工作流增添了動(dòng)態(tài)和交互性。

參考線吸附功能也是其一大亮點(diǎn)，流程設(shè)計(jì)器的每個(gè)節(jié)點(diǎn)都支持參考線吸附，讓用戶在設(shè)計(jì)工作流時(shí)能夠更精準(zhǔn)地定位和布局節(jié)點(diǎn)，提高設(shè)計(jì)的準(zhǔn)確性和美觀度 。后續(xù)還會(huì)不斷優(yōu)化設(shè)計(jì)輔助功能，進(jìn)一步提升拖拽體驗(yàn)。

github地址：https://github.com/MrXujiang/flowmix-flow

5. pc-Dooring，PC端頁(yè)面編輯器

在網(wǎng)頁(yè)開發(fā)領(lǐng)域，PC 頁(yè)面的搭建往往需要投入大量的時(shí)間和精力，從頁(yè)面布局的設(shè)計(jì)、組件的選擇與配置，到代碼的編寫與調(diào)試，每一個(gè)環(huán)節(jié)都需要開發(fā)者具備專業(yè)的技能和豐富的經(jīng)驗(yàn)。pc-Dooring 的出現(xiàn)，為這一過(guò)程帶來(lái)了極大的便利，它讓網(wǎng)頁(yè)制作變得像搭積木一樣簡(jiǎn)單，即使是沒有編程基礎(chǔ)的用戶，也能輕松上手 。

pc-Dooring 提供了一個(gè)直觀、易用的可視化編輯器，用戶可以通過(guò)簡(jiǎn)單的拖拽操作，將各種組件添加到頁(yè)面中，并對(duì)其進(jìn)行自由布局和屬性設(shè)置 。它支持多種組件類型，包括基礎(chǔ)組件，如文本框、按鈕、圖片等，是構(gòu)成頁(yè)面的基本元素，能夠滿足頁(yè)面中各種基本信息展示和交互操作的需求；可視化組件，如柱狀圖、折線圖、地圖等，可用于展示數(shù)據(jù)和信息，幫助用戶直觀地理解數(shù)據(jù)之間的關(guān)系和趨勢(shì)；媒體組件，像視頻、音頻等，豐富了頁(yè)面的內(nèi)容形式，提升了用戶的瀏覽體驗(yàn) 。這些組件的豐富性和多樣性，使得用戶能夠根據(jù)自己的需求，快速搭建出功能齊全、界面美觀的 PC 頁(yè)面 。

github地址：https://github.com/MrXujiang/pc-Dooring

6. next-admin，集成各種可視化工作流的后臺(tái)管理模版

圖片

Next-Admin 中后臺(tái)系統(tǒng)是一款基于 nextjs實(shí)現(xiàn)的中后臺(tái)管理系統(tǒng)，并且是一款前后端同構(gòu)項(xiàng)目， 我們可以直接在項(xiàng)目中使用 nodejs 寫后端業(yè)務(wù)。

同時(shí)為了更深入的在實(shí)際業(yè)務(wù)中使用，我開始著手做這塊的開源，并希望這個(gè)項(xiàng)目集成更多行業(yè)內(nèi)優(yōu)質(zhì)的解決方案，讓想學(xué)習(xí)nextjs或者對(duì)可視化搭建感興趣的朋友有個(gè)可以參考的項(xiàng)目。

目前已支持如下功能：

• 流程編排模塊
• 支持系統(tǒng)外鏈頁(yè)面
• 集成在線電子表格
• 支持可視化搭建模塊（拖拽，參考線，吸附，多選功能等）
• 支持瀑布流列表
• 支持在線MD文檔編輯器
• 支持?jǐn)?shù)據(jù)大屏報(bào)表
• AI問(wèn)答模塊
• 支持基礎(chǔ)的JWT 登錄鑒權(quán)

github地址：https://github.com/MrXujiang/next-admin