JSONKit
JSON to Diagram
JSON Input
⋯

Paste JSON to see the tree diagram

Scroll to zoom · Drag to pan · Download as SVG

JSON to Diagram

Paste any JSON object and instantly see it as a hierarchical tree diagram. Leaf nodes show their values; object and array nodes show their key count. Switch to the Mermaid tab to get Mermaid flowchart syntax you can embed in GitHub markdown, Notion, GitLab, or render at mermaid.live.

Where to Use Mermaid Output

GitHub Markdown

Wrap in ```mermaid code fences — renders natively in .md files and PRs

Notion

Use the Mermaid block — paste the output and Notion renders it

GitLab

GitLab markdown supports mermaid blocks natively

Mermaid.live

Paste at mermaid.live for a full interactive preview and PNG export

Where a Diagram Beats Raw JSON

  • ▸API documentation — Drop a Mermaid diagram of a response shape straight into a README or internal wiki page instead of a wall of formatted JSON.
  • ▸Pull request descriptions — Show reviewers exactly how a payload's structure changed with a diagram GitHub renders natively from a mermaid code fence.
  • ▸Design discussions — Visualize a proposed data model in a meeting or Notion doc before anyone writes a schema or database table.
  • ▸Onboarding docs — Give new team members a picture of a core object's shape instead of expecting them to reverse-engineer it from code.

Reading the Generated Mermaid Syntax

The output uses Mermaid's flowchart syntax with an LR (left-to-right) direction — flowchart LR followed by node definitions and -->arrows connecting a parent key to each child. Object and array nodes are labeled with their key or index and a count of their children; leaf nodes show the literal value. Because it's plain text, you can hand-edit the generated syntax — rename a node label, change the direction to TD (top-down) for a taller diagram, or merge it with other Mermaid diagrams in the same document.

Frequently Asked Questions

The SVG tree is a ready-to-view diagram you can copy as an image. The Mermaid output is text-based flowchart syntax — you paste it into a platform that renders Mermaid (GitHub, GitLab, Notion, mermaid.live) rather than using the image directly.

Yes — wrap the copied output in a ```mermaid code fence inside a Markdown file, issue, or pull request, and GitHub renders it as a diagram automatically, no extra setup required.

There's no hard-coded limit, but very large or deeply nested JSON produces a correspondingly large diagram that can become hard to read — for huge documents, consider diagramming a representative sub-section instead of the whole thing.

The SVG is a snapshot of your JSON's structure, not an editable canvas. To change the diagram, edit the underlying JSON and it regenerates automatically — or paste the Mermaid syntax into an editor that supports Mermaid for further tweaking.

No. The diagram is generated entirely in your browser — your data never leaves your device.

Yes — the generated syntax starts with flowchart LR; change LR to TD (top-down) or TB in any Mermaid editor to get a vertical layout instead, which can be easier to read for wide, shallow JSON.

They serve different moments. JSON to Diagram produces a static, exportable image or Mermaid syntax for documentation and sharing. JSON Explorer is for live, interactive exploration — panning, zooming, and expanding nodes while you're actively investigating a payload.

Related Tools

JSON Explorer

Explore JSON visually as an interactive node graph

jq Playground

Query and transform JSON with the full jq language

JSON Formatter

Beautify and format JSON with indentation

Embeddable JSON Viewer

Embed an interactive JSON tree on any site with one iframe

JSONPath Tester

Test JSONPath expressions and see all matches — or build one with no syntax

JSON Flatten / Unflatten

Flatten nested JSON to dot-notation or unflatten back