JSON to diagram

Lay a payload out as a node-link tree you can pan, zoom, collapse and search.

About & FAQ ↓
JSON input⌘/Ctrl + Enter to render
Waiting for input.

Your key stays in this browser and is sent only to api.openai.com.

{ }

Your diagram will appear here

Reference
JSON to diagram

About the JSON diagram viewer

Reading a deeply nested payload as text is a poor use of a human. This tool lays JSON out as a node-link tree you can pan, zoom, collapse and search, so the shape of the data is visible at a glance. It is the fastest way to explain an API response to someone else — and with presentation mode it goes full screen for exactly that.

01

Interactive node graph

Pan, zoom and collapse branches to explore a payload by shape rather than by scrolling.

02

Search that reveals

Type a key or value and matching nodes highlight, with their parent branches opened for you.

03

PNG and SVG export

SVG stays sharp in slides and print; PNG is ready to paste into a ticket or a chat.

04

Made for presenting

Full-screen presentation mode with zoom, fit, pan and a laser pointer, one keystroke away.

How to use it

  1. Paste JSON, upload a file, or load the sample.
  2. Click Render, then collapse or expand branches to explore. Search highlights matches and opens the branches that contain them.
  3. Export the diagram as PNG or SVG, or press Present to show it full screen.

Questions

Can I use this to present JSON in a meeting?

Yes — that is what presentation mode is for. Press Present (or Shift+P) and the diagram takes the whole screen, with a presenter toolbar for zoom, fit, panning and a laser pointer.

What do the export formats give me?

SVG is vector, so it stays sharp in slides and print at any size. PNG is a raster image at screen resolution, handy for chat and tickets.

Is there a size limit for the diagram?

Very large documents produce very large trees. A few thousand nodes render comfortably; beyond that, collapse branches first or narrow the payload with the JSONPath tester.