Visualise JSON as a graph
Draw a JSON document as an interactive node-link diagram: objects and arrays become hubs, values become leaves, and the key that reached each child labels its edge — with four layouts, zoom and pan, subgraph focus and PNG export.
What a graph shows that a tree does not
A tree is the right tool for reading a document you already understand. A graph is for the moment before that — when you have inherited a payload from a system nobody documented and the question is what shape it is. Relationships, repetition and the one branch that is far deeper than the rest are all visible at a glance in a diagram and invisible in an indented list.
How it is drawn
- Force-directed layout using a Barnes-Hut quadtree, which is O(n log n) rather than the O(n²) of naive repulsion — the difference between a graph that settles and one that hangs
- Tree, radial and circular layouts for when the structure is genuinely hierarchical
- Rendered to canvas, not SVG: a thousand DOM nodes re-laying out on every pan is not a 60fps proposition
- Layout runs in a Web Worker above 250 nodes, with a rough pass shown immediately and refined in place
- Node size scales with how much each container holds, so the heavy parts of the document are visible before you read a label
Working with it
- Filter
- Type to keep only nodes whose label, type or value matches — and their parents, so the survivors stay connected rather than floating.
- Focus a subgraph
- Right-click a node and focus on it to hide everything except that node, everything below it, and its immediate parent.
- Inspect
- Click a node for its path, type, value and every connection, in and out. Copy the path, or send it to the query builder.
- Export
- Download the current view as a PNG, with the background filled in so it is usable outside a dark editor.
Questions
How do I visualise a JSON file as a graph?
Open the file in fileviewer.dev and switch to the Graph view. Objects and arrays become hub nodes, values become leaves, and each edge is labelled with the key or index that reached it. Scroll to zoom, drag to pan, click a node to inspect it.
Does it handle circular references?
Yes. A reference back to an object already on the current path is a genuine cycle and is drawn as a dashed edge to a marker node. An object referenced twice in different branches is duplication rather than a cycle, and is drawn as two ordinary nodes — the distinction most tools get wrong.
Can I export the graph as an image?
Yes, as a PNG at the current zoom and position, with the theme background filled in so the image is legible on its own.
Does it also work for YAML and XML?
Yes. Any format the app parses into a structure can be graphed. XML attributes are shown with an @ prefix so they are distinguishable from child elements.