功能特性

拖拽生成、可视化编辑 —— 一套覆盖原型、图形与协作的完整能力

编辑器体验

以专业设计工具的交互标准构建的画布编辑体验

🖱️

拖拽 / 缩放 / 旋转

组件拖入画布,四边与四角手柄自由缩放,外侧圆弧手柄旋转。移动量化 1px 级跟手。

📐

对齐与辅助线

拖拽中自动吸附参考线,显示与相邻组件的对齐提示与间距标注,排版对齐零心算。

🔲

框选批操作

相交 / 包围两种框选模式,拖拽过程实时高亮命中组件,松手批量选中,一次移动 / 复制 / 删除。

快捷键与撤销

复制粘贴、删除、分组、对齐、层级调整等常用操作全快捷键支持;撤销 / 重做多级历史。

🧱

分组

多组件打包成分组容器,整体移动缩放;分组前后渲染结果完全一致,可随时解组。

🎨

浅色 / 深色主题

浅色、深色、跟随系统三种主题一键切换,界面配色实时生效,编辑器与面板同步换肤。

yoyoo 编辑器画布拖拽组件与属性面板截图

组件能力

内置 30+ 常用组件,覆盖文本、表单、图形与数据展示

📝

文本与按钮

双击直接编辑内容,字号 / 颜色 / 加粗 / 斜体 / 下划线 / 行高字距可调,高度自动包裹。

⌨️

表单组件

单行 / 多行输入、下拉选择、单选多选,选项即配即用,默认选中项一键标记。

📊

数据图表

柱状 / 折线 / 面积 / 饼 / 雷达五种图表,多系列混合展示,数据表格直接填写。

🔷

流程图形状

13 种流程节点:判断菱形、起止胶囊、输入输出平行四边形、六边形、数据库圆柱、文档、人员等,双击加标签。

🖼️

图片与图标

图片支持铺满 / 等比 / 拉伸三种填充模式,内置 iconfont 图标库即拖即用。

📋

表格

二维数据直填,行高列宽占比、单元格合并、按单元格独立配色样式。

连线 —— 流程图 / 架构图 / 思维导图

组件四边锚点拖出连线,连接即跟随组件移动缩放

🔗

两种线型

贝塞尔曲线与直角折线一键切换;直角折线全局避障:自动绕开画布上所有组件,箭头永不穿内容。

🧲

锚点吸附

按住锚点拖出虚线,悬停目标锚点自动高亮吸附;轻点已连接锚点可断开该点全部连线。

🔄

零同步成本

组件拖动 / 缩放、画布缩放滚动时连线实时跟随,多对多自由连接,无需任何手动同步。

🎯

线样式可配

线条颜色 9 色预设、粗细 1-5px 可调,样式跟随项目保存;点击线段选中,Delete 精准删除。

yoyoo 连线绘制思维导图与流程图自动避障效果截图

AI 生成

对话式生成页面,画布上的结果随时手动接管

💬

AI 助手

登录后在 AI 助手用自然语言描述需求:创建页面、添加组件、修改属性、删除元素,助手直接操作画布。

🧩

生成后可继续编辑

AI 生成的是标准页面数据,落在画布上与手动拖拽完全一致 —— 继续拖拽、调属性、连线,随时接管。

📦

开放 JSON 数据格式

页面由纯 JSON 描述(组件树 + 属性 + 连线),提供完整数据结构文档,任何外部 AI 工具都能生成页面导入。

yoyoo AI 助手对话式生成页面截图

实时协作

多人同屏编辑,权限清晰,数据可控

👥

成员与权限

项目邀请成员,所有者 / 编辑 / 只读三种角色;只读成员可看不可改,权限在服务端强制校验。

实时同步

多人同屏编辑只同步变化的属性,互不覆盖;非当前页静默更新。

🔓

游客无缝升级

免登录直接进编辑器,本地数据完整可用;登录后本地页面一键导入协作项目,成果不丢。

🖥️

服务自部署

协作服务(HTTP + WebSocket + SQLite)开源可自行部署,项目数据保存在你自己的服务器上。

yoyoo 项目工作台与多页面管理截图

产出与数据

设计成果与数据都掌握在你自己手里

🖼️

图片导出

当前页或整个项目导出 PNG / JPEG,或打包 ZIP 下载;连线、图表、圆角阴影完整保留,2x 清晰度多屏一致。

💾

本地持久化

页面数据自动保存在浏览器本地,刷新不丢失;结构化的 JSON 数据可导出迁移、交给 AI 生成。

📑

多页面管理

一个项目多个页面,各自独立尺寸与背景;页面列表随时切换、复制、删除,数据互不干扰。

模板与素材资源

组件沉淀成模板、图片统一入库,跨项目复用不重复劳动

🗂️

基础模板

画布选中组件(可框选多选),右键一键保存为普通模板,自动生成预览图;拖出即组件副本,跨项目反复使用,云端存储、登录后自动同步。

🧩

引用模板

项目内共享的母版:组件保存为引用模板后,项目任意页面拖出同一实例,编辑母版保存一次、所有引用同步更新;附加多状态切换,实现 Tabs / 轮播等动态效果。

🖼️

媒体资源库

上传图片自动压缩(>20KB 视觉无损优化),云端统一存储与配额管理;列表缩略图秒开、浏览器强缓存,拖入画布即用,删除即回收空间。

打开编辑器体验 →