JSON Graph Visualizer

Visualize JSON structure as connected nodes

Reading raw JSON tells you the values; a diagram tells you the shape. This tool lets you visualize JSON data as a graph in which each object and array becomes a box that lists its simple values and is linked by lines to the objects and arrays nested inside it. Nesting that is hard to follow in indented text becomes obvious when you can see which branch hangs off which parent.

It is useful when explaining an API response to someone who does not read JSON every day, when designing a data model, or when you just want to understand an unfamiliar payload before writing code against it.

Example

For this input:

{"id":7,"tags":["api","v2"],"owner":{"name":"Ana"},"empty":[]}

the status bar reads Valid JSON · 2 objects, 2 arrays, depth 2 and the Graph tab draws four boxes with this content:

$ {4}              tags [2]
  id  7              0  "api"
                     1  "v2"

                   owner {1}
                     name  "Ana"

                   empty [0]

In the real diagram each box has a rounded border, and curved lines connect the root box on the left to the three boxes in the next column. The line above the diagram reads 4 nodes · click a node to select its path.

Reading the diagram

• Boxes stand for objects and arrays. The top box is labeled $, a nested box carries the key it is stored under, and an object or array inside an array is labeled with its index, such as [0].
• Badges show size: {4} marks an object with four keys and [2] marks an array with two elements. An empty container such as empty [0] has no rows.
• Rows inside a box list its simple values, each with its key or array index. A box shows up to eight rows; a "+N more" line counts what was left out.
• Colors identify types: key names in purple, strings in green, numbers in blue, booleans in amber and null in gray.
• Columns. Every nesting level starts a new column to the right, so the diagram reads from the root on the left to the deepest values on the right.
• Selecting. Clicking a box highlights it and shows its path, such as $.owner, in the Path bar, where Copy path and Copy value copy the path or the whole branch.

Limits on very large documents

A diagram with thousands of boxes is neither fast nor readable, so drawing stops after 150 boxes and the line above the diagram says that it was capped. A box whose children were left out counts them in its "+N more" line. For big files, narrow the data first: extract the part you care about with the JSONPath tester, for example $.orders[0] to diagram a single record, then visualize that.

The same size warning applies to wide arrays. A list of 500 similar records would need 500 similar boxes; one or two representative items usually explain the structure better.

Saving and sharing the diagram

The diagram itself is not exported as a file. Copy and Download above the editor always take the JSON text, whichever tab is open; Download saves it as a .json file. To keep a picture of the graph, take a screenshot of the Graph tab. When you want to hand over a link rather than a file, Save & Share stores the input and gives you a URL that opens the same JSON here, where the diagram is drawn again.

Graph or tree?

The Tree tab on this page switches to the compact collapsible tree used by the JSON tree viewer. The tree fits more data on screen and renders branches lazily, so it copes better with large files. The graph uses more space per node but shows parent-child relationships more clearly, which suits presentations, screenshots and first-time exploration. If what you need is the path to a specific value, the JSON navigator explains how to find and copy it.

Privacy

The diagram is generated in your browser from the JSON you provide and is not sent to a server. Save & Share is the only feature that passes content through our server.