高级预览Live previewExportDeveloper tool

GraphQL Schema 可视化

把 GraphQL SDL 转成类型关系图，让 API 团队在发布变更前检查字段、输入、枚举、nullability 和嵌套关系。

示例

GraphQL schema

预览结果就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

SQL 转 ER 图

从 CREATE TABLE SQL 生成 ER 图，检查表、主键、外键和关系。

打开

JSON Schema 可视化

查看 JSON Schema 属性、类型、必填字段、枚举、数组 item 和 oneOf/anyOf 结构。

打开

JSON Schema 表单预览

把 JSON Schema 的属性、必填项、枚举和格式转换成表单预览。

打开

使用方法

1粘贴聚焦的 GraphQL SDL schema 或加载示例。
2检查 object type、input type、interface、enum、字段 nullability 和嵌套关系。
3先看 Query 和 Mutation 入口，再展开相关领域类型。
4发布前检查删除字段、enum 变化、参数变化和 nullable 到 non-null 的变更。
5导出图用于 API 文档、schema review notes 或 SDK onboarding。

常见场景

GraphQL API 文档Schema 破坏性变更 review客户端 onboarding嵌套查询解释AI 生成 schema 校验

常见问题

这个工具用来做什么？

可视化 GraphQL type、input、interface、字段和关系。

需要账号吗？

不需要，工具页可以直接在浏览器里使用。

哪些 GraphQL 变更对客户端风险最高？

删除字段、删除 enum 值、类型改名、参数变更，以及 nullable 到 non-null 的变化都可能破坏客户端。

大型 GraphQL schema 怎么看才清楚？

从一个 Query 或 Mutation 场景开始，只包含解释该流程所需的 object、input、enum 和 interface。

GraphQL Schema 可视化面向开发者文档、AI 生成图表校验和工程配置可视化场景。

它可以帮助你把文本源、配置或 AI 输出转换成更容易检查和导出的结果。

Demo：可视化 GraphQL 类型和字段

GraphQL schema 在 type、input、enum 和关系可见时更容易讨论。预览能帮助 API 团队在发布前审查 schema 形状。

区分 Query、Mutation 和领域对象。
查找返回宽泛 JSON scalar 但没有说明的字段。
检查 input type 是否和 object type 过度耦合。

type Query { order(id: ID!): Order }
type Order { id: ID!, items: [OrderItem!]!, status: OrderStatus! }
enum OrderStatus { DRAFT PAID CANCELLED }

Schema review：捕获 GraphQL 破坏性变更

GraphQL schema 仍然 valid，不代表客户端安全。视觉 review 可以暴露字段删除、nullability 变化和 enum 假设。

nullable 到 non-null 的变化可能影响客户端。
谨慎 review enum 删除和字段改名。
用关系图解释嵌套查询成本。

Before: user.name: String
After: user.name: String!
Risk: clients that handle null differently

文档模式：从 Query 和 Mutation 开始

GraphQL 图从用户实际调用的 operation 入口开始最容易读。再展开解释 response shape 或 input contract 所需的相关类型。

先展示 Query 和 Mutation 入口。
分页类型靠近使用它的列表字段。
昂贵嵌套关系应在图旁边用文档说明。

type Query {
  order(id: ID!): Order
}
type Mutation {
  createOrder(input: CreateOrderInput!): Order!
}