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

圖片

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

1. rc-drag

圖片

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

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

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

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

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

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

圖片

在大數(shù)據(jù)時代，數(shù)據(jù)可視化大屏已成為企業(yè)展示關(guān)鍵數(shù)據(jù)、實(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 組件庫，構(gòu)建了一個高效、靈活的可視化編輯引擎。其底層的可擴(kuò)展架構(gòu)，使得組件的拖拽、配置等操作流暢無阻，同時支持動態(tài)數(shù)據(jù)綁定、動畫效果以及響應(yīng)式布局，確保大屏在不同設(shè)備上都能完美呈現(xiàn)。

圖片

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

圖片

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

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

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

3. H5-Dooring頁面搭建平臺

圖片

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

圖片

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

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

圖片

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

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

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

圖片

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

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

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

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

5. pc-Dooring，PC端頁面編輯器

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

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

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

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

圖片

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

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

目前已支持如下功能：

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

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