Превращаем запутанный JSON в понятное интерактивное дерево с jsontr.ee

Недавно я разбирал ответ одного стороннего 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

Если вы не планируете писать веб-интерфейс, а хотите только разбирать логи и дампы данных, удобнее поставить плагин для редактора:

Откройте панель расширений в VS Code (Ctrl+Shift+X или Cmd+Shift+X).
Введите в поиске JSON Tree Visualizer.
Нажмите кнопку установки.
Откройте нужный JSON-файл и вызовите команду Visualize JSON as Tree через Command Palette.

После этого редактор откроет интерактивную схему прямо в соседней вкладке.

Практические сценарии

Где такая визуализация действительно экономит время:

Отладка сложных полезных нагрузок вебхуков и интеграций.
Создание внутренней документации к API для коллег или заказчиков.
Обучение начинающих разработчиков чтению древовидных структур данных.
Визуализация конфигурационных файлов с глубоким уровнем вложенности.

Скрипт не перегружен лишними абстракциями, поэтому его легко встроить во внутреннюю админку или панель мониторинга.

Итоги

Библиотека jsontr.ee делает ровно одну вещь: быстро и аккуратно превращает JSON в читаемую SVG-диаграмму.

Документация в репозитории пока лаконичная, но сам код понятен без долгих поисков ответов. Если вам регулярно приходится объяснять структуру данных коллегам или просто надоело листать простыни текста при отладке API, этот инструмент определенно стоит добавить в закладки. Исходники открыты под лицензией MIT на странице The-01-Company/jsontr.ee на GitHub.