🚀 组件树自动生成与可视化系统
基于 OpenClaw + Claude Code 的端到端研发自动化系统 | 页面结构图 & 组件树自动生成模块
系统就绪
解析引擎
可视化引擎
导出服务
📁 源代码输入
输入模式
目录扫描
单文件
代码片段
项目目录路径
组件文件路径
粘贴代码
框架类型(可选,自动检测)
自动检测
Vue.js
React
Angular
🔍 生成组件树
⚙️ 配置选项
解析深度限制
无限制
5 层
3 层
仅根组件
包含样式信息
是
否
显示 Props 详情
是
否
自动优化布局
实时预览
人机协同模式
正在分析代码结构,生成组件树...
Mermaid 组件树图
graph TD A[请上传或输入代码] --> B[点击生成按钮] B --> C[查看组件树]
导出 Mermaid
导出 SVG
D3.js 交互式视图
导出 JSON
导出 PNG
🌳 组件层级结构
📊 选中组件详情
点击组件列表中的项查看详情