使用 jsontr.ee 将混乱的 JSON 转化为清晰的交互式树状图

最近我在解析一个第三方 API 响应，文件长达几百行，包含十几个嵌套数组和对象。IDE 的格式化功能和浏览器中常见的折叠查看器并没有太大帮助：要理解实体之间的关系，我不得不不断上下滚动，丢失上下文。在这样的时刻，你只想在一屏上看到整个数据图。

我在 GitHub 上发现了一个名为 jsontr.ee 的轻量级库，专门用于解决这个确切的问题。它可以将任何 JSON 对象生成为交互式 SVG 树。

这个库能做什么

该仓库 The-01-Company/jsontr.ee 包含一个轻量级的 JavaScript 脚本，没有重型依赖。它的主要目的是快速将数据层级渲染为带有节点和连接线的图表。

这个库有几个不错的特性：

• 自动节点定位。脚本会展开区块，使它们不会相互重叠。
• 完整嵌套支持。数组内的对象和复杂结构会获得可读的父级标签。
• 清晰的矢量 SVG 输出。图形在任何缩放级别下都能无损缩放。
• 通过参数或常规 CSS 灵活定制外观。

除了 JS 库本身，作者还将其打包为 Visual Studio Code 扩展，名为 JSON Tree Visualizer。因此，对于快速文件分析，你不一定需要将其集成到自己的项目中。

代码中快速开始

连接这个库很简单。无需复杂的构建配置——只需在页面上包含脚本文件即可。

<script src="path/to/jsontr.ee.js"></script>

然后我们在标记中声明一个容器：

<div id="json-tree"></div>

并将数据传递给 generateJSONTree 函数：

const jsonData = {
    name: "Lou Alcalá",
    projects: [
        {
            name: "JSONtr.ee",
            description: "JSON Formatter, Validator & Viewer Online",
            url: "https://jsontr.ee"
        },
        {
            name: "PixSpeed.com",
            description: "Image compressor",
            url: "https://pixspeed.com"
        }
    ]
};

const container = document.getElementById('json-tree');
container.innerHTML = generateJSONTree(jsonData);

该函数返回一个现成的 SVG 标记字符串，我们立即通过 innerHTML 将其插入。

样式定制

图表的外观很容易适应你界面的配色方案。有两种定制方法。

第一种选择是作为第二个参数传递配置对象：

const options = {
    arrowColor: "#475872",
    nodeBorderColor: "#475872",
    nodeBackgroundColor: "#f6f8fa",
    keyColor: "#b16b2a",
    valueColor: "#008000",
};

container.innerHTML = generateJSONTree(jsonData, options);

第二种方法是通过 CSS 设置样式。由于输出是标准 SVG，你可以对其元素应用常规选择器：

rect {
    fill: #ffffff !important;
    stroke: #1e293b !important;
    stroke-width: 2px !important;
}

当你需要实现暗色主题或通过类动态更改样式时，这种方法特别方便。

在 VS Code 中使用

如果你不打算构建 Web 界面，只是需要分析日志和数据转储，安装编辑器插件会更方便：

1. 在 VS Code 中打开扩展面板（Ctrl+Shift+X 或 Cmd+Shift+X）。
2. 在搜索中输入 JSON Tree Visualizer。
3. 点击安装按钮。
4. 打开所需的 JSON 文件，通过命令面板调用 Visualize JSON as Tree 命令。

之后，编辑器将在下一个标签页中打开交互式图表。

实际应用场景

这种可视化在以下场景特别节省时间：

• 调试复杂的 webhook 和集成 payloads。
• 为同事或客户创建内部 API 文档。
• 培训初级开发者阅读树形数据结构。
• 可视化具有深层嵌套级别的配置文件。

该脚本没有不必要的抽象负担，因此可以轻松嵌入内部管理面板或监控仪表板。

总结

jsontr.ee 库只做一件事：快速、清晰地，将 JSON 转换为可读的 SVG 图表。

仓库中的文档仍然比较简洁，但代码本身很清晰，不需要搜索答案。如果你经常需要向同事解释数据结构，或者只是厌倦了在调试 API 时滚动浏览大量文本，这个工具绝对值得收藏。源代码在 GitHub 上以 MIT 许可证开源，地址为 The-01-Company/jsontr.ee。