Generate SVG-based Flowcharts From JSON Data – jsontr.ee

JSON data can be complex and challenging to understand at a glance.

Enter jsontr.ee, a lightweight and easy-to-use JavaScript JSON visualization library that transforms raw JSON into clear, SVG-based tree diagrams (flowcharts).

It’s perfect for debugging JSON data, visualizing API responses, and managing hierarchical structures.

Features:

• Supports both arrays and nested objects with intuitive node positioning.
• Uses SVG for rendering, allowing for interactive and customizable styles.

How to use it:

1. Download the package and load the main script ‘jsontr.ee.js’ in your HTML document.

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

2. Create an empty div container in which the flowchart will be rendered.

<div id="example"></div>

3. Render the JSON data you provide into a flowchart.

const container = document.getElementById('example');
container.innerHTML = generateJSONTree(jsonData);

How it works:

The jsontr.ee library works by recursively traversing the JSON object and creating SVG elements to represent each node and the connections between them. The generateJSONTree function initiates this process. It starts by setting up basic layout configurations such as padding, line height, font size, and font family. It then initializes arrays to store SVG content and edges, sets a unique node ID counter, and defines maximum X and Y coordinates for the SVG. The occupiedPositions array tracks where nodes are placed to prevent overlapping.

The function measureTextWidth calculates the pixel width of text based on font settings. This is used to determine the size of the node boxes. The calculateNodeSize function determines the dimensions and text lines for a node. For arrays, it displays “Array” and the number of items. For objects, it lists key-value pairs. For other data types, it displays their string representation.

adjustPosition checks for overlaps with existing nodes and adjusts the new node’s position if necessary to maintain clarity. It keeps a buffer space around each node. The buildTree function is the core recursive function. It calculates the node size and adjusts its position to avoid overlaps. It then generates the node content using flexbox for alignment and creates an SVG group element containing a rectangle for the node background and a foreignObject to allow HTML content within the SVG.

If the node has a parent, a path element is created to connect them. The function then recursively calls itself for each child in the object or array, adjusting positioning to create the tree structure. Finally, the generateJSONTree function creates the SVG container with a marker for the arrowheads used in the connecting lines and appends all generated SVG content.