这段时间除了在研发可视化+AI的产品，还开源了很多有价值的可视化搭建的开源项目，接下来我会和大家系统复盘一下最近几年开源的可视化搭建项目，以便帮助大家更好的上手可视化低代码项目的开发。
图片
文末我建了一个可视化交流群，大家感兴趣可以在群里交流体验。
1. rc-drag
图片
在可视化搭建的过程中，组件的交互操作是实现丰富页面效果的关键。rc-drag 便是一款专注于解决组件拖拽、缩放等交互问题的开源项目，它基于 React 开发，为开发者提供了便捷的方式来实现组件的自由布局和灵活调整 。
rc-drag 的核心优势在于其简洁而强大的功能设计。它支持组件的自由拖拽，让用户可以轻松地将组件放置到页面的任意位置，就像在桌面摆放图标一样简单直观。在多方位缩放方面，用户能够通过控制点对组件进行灵活缩放，无论是放大以突出显示重要内容，还是缩小以合理布局页面元素，都能轻松实现。
在可视化搭建平台中，页面元素的层级关系至关重要。rc-drag 允许开发者自由控制组件的层级，通过设置 zIndex 属性，轻松实现组件的叠加和层的概念，解决了复杂页面布局中层级管理的难题。
同时我们还可以借助AI，实现更加复杂的拖拽效果。
github地址：https://github.com/MrXujiang/rc-drag
2. V6.Dooring可视化大屏编辑器
图片
在大数据时代，数据可视化大屏已成为企业展示关键数据、实时监控业务指标的重要工具。v6.dooring 作为一款专注于可视化大屏搭建的开源项目，凭借其强大的功能和易用的特性，成为众多开发者和企业的首选。
v6.dooring 采用了前沿的 Web 技术栈，结合 Ant Design 等优秀的 UI 组件库，构建了一个高效、灵活的可视化编辑引擎。其底层的可扩展架构，使得组件的拖拽、配置等操作流畅无阻，同时支持动态数据绑定、动画效果以及响应式布局，确保大屏在不同设备上都能完美呈现。
图片
动态渲染器负责根据用户的操作和配置，实时渲染出可视化大屏。当用户调整组件的属性、位置或数据时，动态渲染器能够迅速做出响应，更新大屏的展示效果，实现即见即所得的编辑体验。
图片
配置面板为用户提供了对组件属性进行详细设置的界面。通过配置面板，用户可以修改组件的颜色、字体、大小、数据来源等属性，轻松定制组件的外观和功能 。
在实际应用中，v6.dooring 的身影随处可见。在企业的运营数据分析大屏中，它可以将企业的关键业务数据，如销售额、利润、用户增长等，以直观的图表形式呈现出来，帮助企业管理者快速了解业务状况，做出决策。在智慧城市的监控中心，通过 v6.dooring 搭建的大屏，可以实时展示交通流量、环境质量、能源消耗等数据，为城市管理者提供决策依据，实现城市的智能化管理 。在零售行业，v6.dooring可以用于搭建销售数据跟踪大屏，帮助商家分析销售趋势、商品销量等数据，优化商品布局和营销策略 。
github地址：https://github.com/MrXujiang/v6.dooring.public
3. H5-Dooring页面搭建平台
图片
在移动互联网时代，H5 页面作为一种重要的传播和展示载体，广泛应用于各种场景，如活动宣传、产品推广、信息展示等。h5-dooring 正是一款专门为 H5 页面搭建而生的开源项目，它以其零门槛、高灵活性的特点，让 H5 页面制作变得轻松简单 。
图片
h5-dooring 的易用性堪称一绝。它采用了零代码的设计理念，几乎 0 使用门槛，用户无需具备编程知识，只需通过简单的拖拽和配置操作，就能像搭建积木一样，轻松创建出精美、互动性强的 H5 页面 。无论是专业的设计师、开发人员，还是没有编程经验的普通用户，都能快速上手，将自己的创意转化为实际的页面。
在布局模式上，h5-dooring 提供了网格布局和自由布局两种方式。网格布局能够帮助用户快速构建出整齐、规范的页面结构，适合展示大量信息或需要保持页面一致性的场景；自由布局则给予用户充分的创作自由，用户可以随心所欲地摆放组件，实现个性化的设计，满足各种创意需求。
图片
h5-dooring 拥有丰富的模板库和组件库。模板库中包含了各种类型的 H5 页面模板，如企业微官网模板，其简洁大气的设计风格，能够展示企业的形象和业务；营销宣传页模板，通过精美的视觉效果和吸引人的文案，激发用户的兴趣；活动邀请函模板，为用户提供了举办活动时邀请嘉宾的便捷方式 。这些模板经过精心设计，用户可以直接使用，也可以根据自己的需求进行修改和定制，大大节省了制作时间。
github地址：https://github.com/MrXujiang/h5-Dooring
4. flowmix/flow，一款开箱即用的可视化工作流引擎
图片
flowmix/flow 致力于提供一套开箱即用的流程可视化搭建底座，能够支撑各种复杂工作流场景的设计 。它汲取了市面上主流工作流引擎的设计经验，并对性能做了极致的优化，目前其搭建性能和所见即所得的 UI 更新流畅度都非常出色。
在功能方面，flowmix/flow 不断推陈出新。它支持节点动画配置，整套设计架构支持多种类型的属性编辑，包括样式、数据、动画等。用户可以轻松给节点配置不同的动画效果，并设置动画的时长、次数等，为工作流增添了动态和交互性。
参考线吸附功能也是其一大亮点，流程设计器的每个节点都支持参考线吸附，让用户在设计工作流时能够更精准地定位和布局节点，提高设计的准确性和美观度 。后续还会不断优化设计辅助功能，进一步提升拖拽体验。
github地址：https://github.com/MrXujiang/flowmix-flow
5. pc-Dooring，PC端页面编辑器
在网页开发领域，PC 页面的搭建往往需要投入大量的时间和精力，从页面布局的设计、组件的选择与配置，到代码的编写与调试，每一个环节都需要开发者具备专业的技能和丰富的经验。pc-Dooring 的出现，为这一过程带来了极大的便利，它让网页制作变得像搭积木一样简单，即使是没有编程基础的用户，也能轻松上手 。
pc-Dooring 提供了一个直观、易用的可视化编辑器，用户可以通过简单的拖拽操作，将各种组件添加到页面中，并对其进行自由布局和属性设置 。它支持多种组件类型，包括基础组件，如文本框、按钮、图片等，是构成页面的基本元素，能够满足页面中各种基本信息展示和交互操作的需求；可视化组件，如柱状图、折线图、地图等，可用于展示数据和信息，帮助用户直观地理解数据之间的关系和趋势；媒体组件，像视频、音频等，丰富了页面的内容形式，提升了用户的浏览体验 。这些组件的丰富性和多样性，使得用户能够根据自己的需求，快速搭建出功能齐全、界面美观的 PC 页面 。
github地址：https://github.com/MrXujiang/pc-Dooring
6. next-admin，集成各种可视化工作流的后台管理模版
图片
Next-Admin 中后台系统是一款基于 nextjs实现的中后台管理系统，并且是一款前后端同构项目， 我们可以直接在项目中使用 nodejs 写后端业务。
同时为了更深入的在实际业务中使用，我开始着手做这块的开源，并希望这个项目集成更多行业内优质的解决方案，让想学习nextjs或者对可视化搭建感兴趣的朋友有个可以参考的项目。
目前已支持如下功能：
- 流程编排模块
- 支持系统外链页面
- 集成在线电子表格
- 支持可视化搭建模块（拖拽，参考线，吸附，多选功能等）
- 支持瀑布流列表
- 支持在线MD文档编辑器
- 支持数据大屏报表
- AI问答模块
- 支持基础的JWT 登录鉴权
