JSON Graph Viewer

Visualize JSON as a graph

The graph viewer redraws a JSON document as a node-link diagram. Every object and array becomes a box on the canvas, the primitive values it holds are listed inside that box, and every nested value is connected to its parent by a line labelled with the key that links them. What was a column of indented text becomes a picture you can take in at a glance.

That change of format matters most when you are trying to understand a document rather than read it. Indentation communicates depth one line at a time; a graph shows depth, breadth, and repetition all at once. A response with three levels of nesting and a fan of twenty similar records looks obviously like that on a canvas, and looks like four hundred lines of text in an editor.

How to make a graph from JSON

Getting a graph from JSON takes one paste. Drop the document into the Source tab — or open a .json file from your machine, or fetch one straight from an endpoint with Load from URL — and switch to the Graph tab. The diagram is built as you type, entirely in your browser, so there is nothing to upload, no account to make, and no size limit beyond your own device.

From there the picture is yours to arrange. Switch between a left-to-right layout, which suits deep documents, and a top-to-bottom one, which suits wide arrays of similar records. Drag to pan, scroll to zoom, and use Fit to view to frame everything again after exploring. Clicking a node selects it and shows its JSONPath at the bottom of the canvas, ready to copy into a JSONPath query or your own code.

Large documents open a few branches deep rather than shrinking the whole graph to a speck: as much of the structure as fits at a readable size is drawn, and the rest waits behind a +N badge on the row it belongs to. Click a + to open that branch, − to fold one away again, or Expand all to draw every node at once and zoom around it yourself.

What is a JSON visualizer?

A JSON visualizer renders JSON as a picture instead of as text — usually a graph, tree, or diagram — so that the structure of the data becomes a visual property rather than something you have to reconstruct in your head while scrolling. The values are the same; only the encoding changes.

Visualizing is most useful at the moment you meet an unfamiliar payload. Given an undocumented API response, a graph answers the first questions immediately: how deep does this go, which keys hold collections, are the records in this array uniform, and where does the part I actually need live? Those are all shape questions, and shape is exactly what raw JSON hides.

How the diagram is built

The layout follows a small set of rules, chosen so the picture matches how developers already talk about JSON:

• Objects and arrays become nodes; the primitive keys inside them are listed as rows in that node.
• A key whose value is an object or array gets a summary row — {3 keys} or [12 items] — plus an edge out to its own node.
• An array of objects fans out into one node per item, and every edge carries the array's key, so a list of records reads as one relationship rather than as 0, 1, 2.
• An array of plain values stays a single compact node of indexed rows instead of exploding into dozens of one-line boxes.
• Nodes are placed by a tidy-tree algorithm, so sibling branches never overlap and every parent sits centred on its children.

Graph view vs. tree view

Both views show hierarchy, but they answer different questions. A JSON tree viewer is a vertical outline: compact, scrollable, and the better choice when you want to read values in document order or hunt for one specific key. It stays readable no matter how many entries a document has, because it only ever grows downwards.

The graph spreads the same hierarchy across two dimensions. That costs space, and a very large document becomes something you pan around rather than scroll. In exchange you get a shape you can recognise and point at — which is why the graph is the view to reach for when you are explaining a payload to someone else, and the tree is the one to reach for when you are working through it yourself. For a straightforward read of any document, the JSON viewer covers the common case.

JSON graph vs. JSON chart — which one do you need?

“Chart my JSON” can mean two completely different pictures, and it is worth knowing which one you are after before picking a tool. One is a chart of the document’s structure: boxes for objects and arrays, lines for the keys that connect them. That is what this page draws, and it is the right answer when the question is how a payload is shaped, how deep it nests, or which key holds the records you need.

The other is a chart of the values themselves: a bar chart of revenue by month, a line chart of latency over time, a pie chart of traffic by source. JSON is a data format rather than a charting format, so nothing can plot it directly — the values have to become rows and columns first. Convert the records with the JSON to CSV converter or JSON to Excel converter, then chart them in a spreadsheet, a BI tool, or whichever charting library your project already uses.

A quick way to tell them apart: if you would answer the question by pointing at a shape, you want the structure graph on this page. If you would answer it with a number that goes up or down, you want the values in a spreadsheet. The two work well together — diagram the payload here to find the array that matters, then export just that array to CSV for plotting.

Export a JSON diagram for docs and tickets

A diagram is worth far more when it can leave the browser. Download the graph as SVG for a vector file that stays sharp at any size — the right choice for documentation sites, internal wikis, and anything that may be printed or zoomed. Download it as PNG when you need to paste directly into a ticket, a pull request, a README, or a slide.

Both exports are rendered on your device and inherit whichever theme you have selected, so a diagram dropped into a dark-themed wiki matches the page around it. Because nothing is uploaded, you can safely diagram a production payload or a customer record and share only the picture you chose to export.

Working with large documents

A big document opens partly folded, and deliberately so. Drawn in full, a few hundred nodes only fit on screen at around 8% zoom — a scatter of grey blocks that looks far more like a broken tool than a zoomed-out one. So the graph opens as many branches as it can draw at a size you can actually read, measured against the canvas it has to fill, and tells you how many nodes it is holding back.

Any row that links to a child node has a fold control. Collapsing a branch replaces it with a +N badge counting the nodes hidden beneath it, which lets you reduce a sprawling document to the parts under discussion without editing the JSON itself. Collapse all folds everything to the top level, Expand all draws every node at once, and in between you can open one branch at a time.

The canvas renders up to 1,500 nodes, which comfortably covers ordinary API responses and configuration files. Beyond that it draws the first 1,500 and tells you how many were left out, so an enormous document opens instantly instead of freezing the tab. For files in that range, the JSON file viewer and the tree viewer handle scale better, and the grid viewer is the clearer choice for wide, uniform records.