基础解析No AILocal previewExportSEO tool

JSON Schema 可视化

把 JSON Schema 转成可读结构树，在发布 API 文档、生成表单或修改契约前检查必填字段、枚举、数组和组合结构。

示例

JSON Schema 输入

Schema 树就绪

你的 Schema 树会显示在这里。

下一步可以继续

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

Zod Schema 可视化

Zod Schema 可视化：把 Zod object schema 转成校验结构图，适合表单、接口和配置校验文档。

打开

TypeScript Interface 可视化

TypeScript Interface 可视化：把 TypeScript interface/type 转成字段结构图，适合 SDK 和 API 类型文档。

打开

JSON Schema 表单预览

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

打开

使用方法

1粘贴 JSON Schema 对象，或加载 payload contract 示例。
2检查必填字段、可选字段、数组 item 类型、enum 和组合结构。
3发布 API 文档前确认 descriptions 和 examples 是否足够。
4确认图和应用实际 validator 行为一致后再导出或复制。

常见场景

API 契约 reviewPayload 文档Schema 调试AI schema 校验破坏性变更 review

常见问题

最应该 review 哪些 schema 特性？

required、nullable、数组 item、enum、additionalProperties、oneOf/anyOf 通常最容易造成集成误解。

它能校验数据吗？

这个页面重点是可视化和 review，最终校验仍应使用应用里的 validator 或专门 JSON Schema validator。

如何让 schema 图更易读？

超大 schema 按资源拆分，description 保持短句，深层匿名对象能命名就命名。

它适合做破坏性变更 review 吗？

适合。可以用来发现新增 required 字段、enum 变化、嵌套数组变化、nullable 行为变化，以及 oneOf/anyOf 分支对客户端的影响。

AI 或代码工具生成的 schema 需要可视化吗？

建议需要。生成的 schema 可能凭空增加 metadata、漏掉 required 字段，或简化组合规则，必须和应用实际 validator 对比。

JSON Schema Visualizer 会把 properties、required、array、enum、oneOf、anyOf 和嵌套对象结构转成可 review 的 schema 图。

当 API payload 太深、表格难读，或者 AI 生成 schema 需要提交前检查时，这个工具很有用。

适合 review 破坏性变更、解释请求体、比较 schema 片段，以及准备符合校验规则的文档示例。

Demo：API 文档发布前 review 请求 schema

Schema 图最有价值的地方，是让必填字段、数组对象和组合结构一眼可见。

必填字段应该和可选 metadata 明确区分。
enum 通常会变成 UI 状态或 SDK 常量，需要清楚展示。
oneOf 和 anyOf 需要文档解释，不应只靠图里的分支。

{
  "type": "object",
  "required": ["email", "plan"],
  "properties": {
    "email": {"type": "string", "format": "email"},
    "plan": {"type": "string", "enum": ["free", "pro"]},
    "metadata": {"type": "object", "additionalProperties": true}
  }
}

这个小 schema 已经包含必填字段、枚举状态和开放 metadata。

Schema Review：在客户端出错前发现破坏性变更

JSON Schema 图特别适合 API 演进评审。它能把 required 字段、enum 变化、嵌套数组、nullable 字段和 oneOf 分支展示得更清楚。

新增 required 字段通常是破坏性变更，除非所有客户端已发送。
enum 新增值要和下游校验规则一起 review。
oneOf/anyOf 过深时，应把重点分支整理成 review notes。

{
  "type": "object",
  "required": ["id", "status"],
  "properties": {
    "status": {"enum": ["draft", "paid", "cancelled"]}
  }
}

文档模式：Schema 树要和示例 payload 配套

Schema 树能解释结构，但开发者仍然需要示例值。建议用可视化树展示必填字段和分支，再在旁边放一个小的请求或响应示例。

结构交给树状图，真实取值交给示例 payload。
把会映射到 UI 状态或 SDK 常量的 enum 单独说明。
oneOf/anyOf 过密时，用正文解释每个分支的适用场景。

{
  "email": "user@example.com",
  "plan": "pro",
  "metadata": {"source": "checkout"}
}

示例 payload 能让 Schema 可视化对 SDK 用户和 API 调用方更有用。