无需登录 数据私有 本地保存

GraphQL Schema 关系图浏览器 - 类型图谱展示

58
0
0
0
GraphQL SDL 解析引擎

内置高性能 GraphQL Schema Definition Language 解析器,支持解析标准 SDL 语法中的全部类型定义关键字,包括 type、interface、union、enum、input、scalar 以及 directive。解析器能够正确处理嵌套字段引用、implements 继承链、联合成员类型和自定义标量等复杂场景,确保生成的关系图谱完整准确地反映 Schema 的真实结构。

智能关系图谱生成

根据解析结果自动构建类型关系图谱,节点表示 Schema 中的各个类型,连线表示字段引用、接口实现或联合成员关系。布局算法自动计算节点位置,避免重叠交叉,呈现清晰的层次结构。图谱会根据 Schema 的复杂度自动调整,确保即使包含数十个类型的大型 Schema 也能获得合理的视觉布局。

类型颜色编码系统

采用直观的配色方案对不同类型进行视觉区分:蓝色代表对象类型(Object Type),绿色代表接口(Interface),橙色代表联合类型(Union),紫色代表枚举类型(Enum),红色代表输入类型(Input Type),灰色代表标量类型(Scalar)。这种一致的色彩编码帮助开发者在浏览大型图谱时快速识别各类节点,显著降低视觉搜索的认知成本。

交互式图谱浏览

图谱支持丰富的交互操作:鼠标滚轮缩放、拖拽平移、点击节点查看详情。类型详情面板会展示选中类型的完整字段定义,包括字段名称、类型、是否可空以及描述信息。定位功能允许用户通过搜索或点击快速聚焦到图谱中的特定类型节点,无需手动滚动查找。

示例 Schema 加载

内置多个预设示例 Schema,涵盖常见的 API 设计模式,包括用户管理系统、电商产品目录和内容发布平台等场景。点击加载示例按钮即可快速生成示例图谱,帮助新用户快速了解工具的功能和使用方式,也便于开发者参考和借鉴常见的 Schema 设计模式。

一键清空与重新生成

提供便捷的清空功能,一键清除当前输入的 SDL 内容和已生成的图谱,方便开发者快速切换不同的 Schema 进行分析。编辑 SDL 后可立即重新生成图谱,无需刷新页面,支持快速迭代和验证 Schema 修改效果,提升开发调试效率。

响应式界面设计

采用响应式布局,自适应不同屏幕尺寸,在桌面电脑、平板和笔记本电脑上均能提供良好的使用体验。界面元素经过精心排版,SDL 输入区、操作按钮和图谱展示区域的布局协调合理,确保开发者在各种工作环境下都能高效地完成 Schema 分析工作。