1. Start with representative JSON
The example contains a service, owner, endpoints, response items, and a cursor. Replace it with an object or array from your own API. The original text stays in the input; generating the map does not rewrite it.
JSON to diagram — SVG and Mermaid
Turn a nested JSON payload into connected field cards. Keep values hidden, inspect the structure, and export SVG or Mermaid for your documentation.
Generate diagram
Runs locally, without uploads or saved inputs. Up to 100,000 characters per input, 10,000 values, and 40 nesting levels. Ctrl+Enter or Command+Enter runs the tool. How your data is handled.
From payload to documentation
Make an API response easier to explain
Paste a small, representative response rather than a production dump. A useful diagram makes the shape readable: where the customer object lives, which field holds the list of orders, and where pagination belongs.
2. Check structure and visibility
Choose left-to-right or top-to-bottom layout. Leave Show values off when the document's shape is enough. Select 100% and scroll inside the preview to read individual cards, then use Fit to see the whole map.
3. Take the result into a review
Download SVG for a design document or copy Mermaid into a supported Markdown renderer. Check the truncation message and inspect exported labels. For interfaces generated from the same samples, use JSON to TypeScript.
Questions and limits
Before you use the result
What does the diagram represent?
It is a map of the JSON document you paste. Objects and arrays become connected cards; fields show types or compact values. It describes observed structure, not a database relationship model or a validated API schema.
Can I keep values out of the exported diagram?
Yes. Show values is off by default. Cards and Mermaid output show types instead of scalar values. Property names and structure remain visible, so review the diagram before sharing it. This is not an anonymizer.
Will a large document be shown completely?
The web diagram is limited to 60 cards, 8 displayed nesting levels, and 12 fields per card. A message identifies a truncated diagram. Use a smaller representative sample when you need every detail; omitted fields are not proof that a field is absent.
How do SVG and Mermaid exports differ?
SVG preserves the generated visual layout and opens as an image. Mermaid is editable class-diagram text for documentation systems that support Mermaid. Labels and values may be shortened or sanitized for those formats; neither export is a lossless copy of your JSON.
Does this accept YAML or XML?
This web tool accepts strict JSON. The installed CodePrettify Diagram Generator also supports JSON Lines, YAML, TOML, XML, and CSV, with navigation and inspection controls. See the Diagram Generator manual.
Keep working: all free online tools · JSON to TypeScript · extension and app manual.