DiagramPreview
基础解析JSON树状图校验

JSON to Diagram

粘贴 JSON，并把嵌套对象和数组查看成结构化树状图。

示例
JSON 树就绪
你的 JSON 树会显示在这里。

下一步可以继续

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

SQL 转 ER 图

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

打开
JSON Schema 可视化

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

打开
JSON Schema 表单预览

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

打开

使用方法

  1. 1粘贴有效 JSON。
  2. 2从 root 到叶子节点阅读生成树。
  3. 3根据预览错误修复语法。

常见场景

API 响应检查配置复核AI 输出校验

相关工具

SQL 转 ER 图

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

JSON Schema 可视化

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

JSON Schema 表单预览

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

常见问题

JSON parser 会校验语法吗？

会，无效 JSON 会显示清晰错误，不会导致页面崩溃。

JSON to Diagram 会把嵌套 JSON 转成可读树，方便开发者检查 API 响应、配置文件、生成数据和 AI 输出。

工具把原始 JSON 和视觉结构并排展示，方便发现深层 key、数组形状和异常值。

适合 API 契约复核、payload 调试和向团队解释数据结构。

Demo：把 API payload 看成树

当 API 响应嵌套很深时，JSON 树比原始文本更容易读。预览能帮助发现数组、可选字段和命名不一致。

  • 大 payload 每次只展开一个分支。
  • 检查看起来像数字的 ID 是字符串还是数字。
  • 写 JSONPath 或 jq 前先用树确认结构。
{
  "order": {
    "id": "ord_123",
    "items": [{"sku": "A1", "qty": 2}],
    "status": "paid"
  }
}

Review：在原始 JSON 中发现结构漂移

JSON 预览常常最先暴露前后端假设不一致：字段改名、null、空数组、混合对象形态。

  • 同时比较成功和错误响应样例。
  • 标记只在某角色、语言或 feature flag 下出现的字段。
  • 不要从单个样例推断 required 字段。
success.data.items[0].price
error.error.code
user.profile.locale

JSON to Diagram 检查清单

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时，可以使用 JSON to Diagram。把 JSON 可视化成可读的对象与数组树。

导出前建议检查标签是否可读、关系是否和源码一致、示例是否包含敏感信息，以及修改输入后预览是否仍然成立。

限制与排查

如果预览失败，先把输入缩小到最小完整示例，确认格式语法，再逐段加回内容。很多失败来自不完整文件、缩进错误、缺少图表头，或复制了依赖隐藏上下文的片段。

请把预览结果当作 review 界面，而不是生产事实来源。生成的图表、转换文件、看板和规则示例在进入正式文档或运维流程前仍需要人工确认。

可测试的示例输入

  • API 响应: {"user":{"id":"u_123","name":"Ada"},"projects":[{"name":"Docs","status":"active"},{"name":"Diagrams","status":"draft"}]}
  • Package: {"scripts":{"dev":"next dev","build":"next build"},"dependencies":{"next":"15","react":"19"}}
  • 配置: {"theme":"light","export":{"svg":true,"png":true},"locales":["en","zh-CN","ja"]}

工具完成度

基础解析

基础解析

这个工具偏向快速结构检查，适合预览、排查和定位问题；关键输出进入生产前仍需要人工复核。

分级不是质量打分，而是告诉用户当前工具更适合稳定导出、深度调试、快速解析，还是 AI 辅助生成。