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

圖片

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

1. rc-drag

圖片

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

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

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

同時我們還可以借助AI，實現更加復雜的拖拽效果。

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

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

圖片

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

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

圖片

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

圖片

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

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

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

3. H5-Dooring頁面搭建平臺

圖片

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

圖片

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

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

圖片

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

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

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

圖片

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

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

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

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

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

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

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

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

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

圖片

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

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

目前已支持如下功能：

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

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