JSON可视化

工具介绍

在线 JSON 可视化工具，将 JSON 结构转换为可交互的节点关系图（类似 JSON Crack），左侧编辑原始代码，右侧实时展示对象与数组卡片及嵌套连线，便于快速理解复杂层级、排查字段归属。支持拖拽平移、滚轮缩放、适应画布、定位根节点；可按字段一键展开/折叠子树，切换向右、向下、向左、向上四种布局方向；提供节点搜索高亮、白/黑主题切换、导出 PNG 图片，以及打开本地文件与复制。所有数据仅在浏览器本地处理，无需上传服务器，更安全、更可靠。

功能说明

• 代码编辑：左侧 Ace 编辑器编辑原始 JSON，支持一键格式化；语法高亮与解析错误定位，编辑后右侧图实时更新
• 节点图：对象与数组渲染为卡片节点，字段 key 高亮显示；嵌套关系以曲线连线表示，连线与加减号对齐到对应字段
• 展开折叠：对象/数组字段旁提供 +/− 按钮，点击即可展开或折叠该字段下的子树，不影响当前画布位置
• 交互浏览：拖拽平移、滚轮缩放、适应画布、定位根节点；可切换向右 / 向下 / 向左 / 向上布局
• 搜索与主题：按关键字搜索节点并高亮当前匹配项；支持白色、黑色主题（含左侧编辑器）
• 导入导出：打开本地 JSON、复制文本，以及将当前节点图导出为 PNG 图片

注意事项

• 节点数过多（默认上限 800）时将提示无法完整渲染，建议先裁剪数据或折叠深层节点
• 大型数组会为每个元素生成节点，全部展开后图会迅速变大，可按字段折叠后再浏览
• 本工具侧重结构浏览与关系梳理，需要精细改树或保留大数精度时，请使用「JSON编辑器」