UD5工具箱
访问 GraphQL Schema 关系图浏览器页面，您将看到一个简洁的界面。左侧是 SDL 输入区域，上方是操作按钮栏，右侧是图谱展示区域和类型详情面板。页面加载完成后即可开始使用，无需等待额外的资源下载或初始化过程。整个工具是纯前端实现，不依赖任何后端服务。
在 SDL 输入文本框中粘贴您的 GraphQL Schema 定义。您可以从项目中的 .graphql 文件复制内容，或者使用 get-graphql-schema 等工具从后端服务端点下载 Schema 后粘贴。SDL 内容应包含完整的类型定义，例如 type、interface、union、enum、input 和 scalar 等。确保 SDL 语法正确，工具会在生成图谱时自动检测并解析所有类型及其关联关系。如果您暂时没有现成的 Schema，也可以点击加载示例按钮体验预设的示例数据。
完成 SDL 输入后，点击操作栏中的生成图谱按钮。工具将立即解析 SDL 内容，提取所有类型定义和它们之间的关系，然后自动计算布局并生成交互式关系图谱。生成过程通常在数秒内完成，取决于 Schema 的复杂程度。图谱中的节点会以不同颜色区分不同类型的定义，连线则表示类型间的引用和继承关系。如果 SDL 语法存在错误，工具会给出相应的提示信息帮助您修正。
图谱生成后，您可以使用鼠标滚轮进行缩放，按住鼠标左键拖拽来平移视图，以便在大型图谱中自由导航。点击任意类型节点，右侧的详情面板将展示该类型的完整信息，包括类型名称、类型类别（对象、接口、联合等）、所有字段定义及其类型。您还可以使用定位功能快速跳转到特定类型，直接在搜索框中输入类型名称即可定位到对应节点。对于大型 Schema，建议先缩小查看整体结构，再放大聚焦感兴趣的区域。
如果您需要分析其他 Schema，点击清空按钮清除当前内容，然后粘贴新的 SDL 并重新点击生成图谱。这个流程支持快速迭代，特别适合在 API 设计阶段对比不同方案的数据模型。每次重新生成都会覆盖之前的图谱，确保工作区域整洁有序。您可以反复修改 SDL 并重新生成，直到获得满意的图谱视图。
在获得满意的图谱视图后，您可以使用系统截图工具将图谱保存为图片。调整缩放比例和视图位置，确保需要展示的区域完整呈现后再截图。这些截图可以直接用于技术文档、团队会议演示或代码评审报告中，帮助团队成员快速理解 API 数据结构。建议保存多个不同缩放级别的截图，分别用于全局概览和局部细节展示。