How to Visualize JSON as a Graph

JSON to Graph Visualizer turns a valid object or array into a structure you can scan. The text stays in the browser. No account. If the document might contain tokens or PII, do not paste it into a random site - browser-local is the safer default, and you should still redact values you do not need on screen.

When nesting is the question

You use a formatter to learn that the paste parses. You use a tree when you already suspect data.items[4]. You use a graph when you do not have a path yet.

Typical graph-shaped questions:

• Is included a sibling of data or nested under each resource?
• Does every order own a payments array, or is there one payments map keyed by id?
• How deep does metadata.custom go before it becomes a string?
• Are two arrays secretly the same shape?

If you can write the path in one breath, skip the graph. Open JSON Viewer. The graph is for orientation. The tree is for extraction. Pretty-print is for a snippet you will paste into a ticket.

Graph versus tree for the same object

Take a checkout payload: cart.lines[], each line with sku, qty, and discounts[]. A tree is faster once you care about line 2. A graph is faster when you are writing a mapper and need to see that discounts is per-line, not per-cart.

A JSON:API body is another split. The tree is how you read included[3].attributes. The graph is how you see that relationships.author.data is an identifier, not an embedded author, and that the real author lives in included.

Do not graph to “make it pretty.” The picture is a working diagram. If you need a screenshot for a design doc, crop it and strip values that look like emails or tokens.

An orders-and-payments payload

A webhook body arrives as one line. It parses. You still cannot tell whether payments hangs off each order or off the root.

Paste into JSON to Graph Visualizer. You should see a root node, an orders collection, and - this is the point - either many payments children under order nodes or one payments sibling. That single structural fact decides how you write the TypeScript type.

Then switch to the viewer to read orders[0].payments[0].method. You did not need the graph for that field. You needed it to know the field was there.

If the source was XML from a SOAP endpoint, convert with XML to JSON first. Graphs of raw XML strings are a waste. If the source was a CSV export, convert with CSV to JSON; a graph of a flat table is a row of leaves and usually the wrong tool. Use the tree or just read the array.

Sampling before you graph a dump

A 2 MB catalog with 8,000 SKUs will produce a hairball. That is honest. The visualizer is not a database. Sample:

• One object from an array (items[0] only).
• A redacted subset of keys (id, children, drop description and html).
• The error envelope without the 200 KB debug.trace.

If the tab slows down, the document is too wide, not the zoom too low. Split the JSON. Graph the slice.

Invalid input: fail on the formatter, not on a half-drawn graph. Concatenated documents and NDJSON need splitting. Binary or UTF-8 garbage needs a different workflow.

What the visualizer cannot show

It cannot prove two nodes are the same object in memory. JSON has no pointers. Repeated shapes look like repeated subtrees. If the API used ids as references, you will see the same "user_9" string in several places, not one shared node unless the tool explicitly dedupes - do not assume it does.

It cannot replace a schema. Draw the graph, then write the type. It cannot hide secrets that are still in the pasted string. Close the tab. It cannot visualize a 500 MB dump. Use a local script.

Related reading if you are thinking in trees as a data structure rather than as a JSON viewer: How to Visualize Tree Data Structures is a different job (algorithms, not API payloads).

Draw the nesting only if you do not know the path

Validate with JSON Formatter if needed. If you already know the path, skip to JSON Viewer. If nesting is the question, open JSON to Graph Visualizer. For tree tactics on the same kind of payload, read How to Explore Nested JSON. Everything sits under JSON tools.