JSON and YAML to Mermaid converter

Paste JSON or YAML and get a Mermaid mind map or flowchart of its structure: every object, list and value as a node. Free, and the data stays in your browser.

mindmap
  root((config))
    service: checkout
    database
      engine: postgres
      replicas: 2
    queues
      orders
      emails
Loading the tool…

How to do it

  1. Step 1

    Paste your data

    Paste JSON or YAML, or upload a .json or .yaml file.

  2. Step 2

    Choose the diagram

    Pick mind map or flowchart, and set the depth and list limits.

  3. Step 3

    Tune it

    Check the preview and adjust the limits until it reads well.

  4. Step 4

    Use it

    Copy the Mermaid, or open it in the editor to export it.

Why draw a data structure

A diagram of a configuration file shows its shape at a glance: which sections exist, how deep they go, and where the lists are. That is useful in onboarding docs, in reviews of a large config change, and for explaining an API response to someone who does not read JSON.

How the tree is built

Objects become a node per key. Lists become numbered nodes when they hold objects and plain value nodes when they hold strings or numbers. Scalar values are shown as key: value, cut to 48 characters.

What this does not do

  • Mind map labels cannot contain brackets, so they are shown as ‹ and ›.
  • YAML anchors and aliases are expanded, so shared sections appear in each place they are used.
  • Very large documents are trimmed to keep the diagram readable.

Frequently asked questions

Does it take JSON or YAML?

Both. YAML is a superset of JSON, so the same parser reads either; just paste it. Docker Compose files, Kubernetes manifests, GitHub Actions workflows, OpenAPI specs and API responses all work.

Mind map or flowchart?

A mind map is the most compact way to show a nested structure, and it reads well for configuration. A flowchart from left to right is easier to follow when the tree is deep, and it can be edited on TryMermaid's visual canvas.

What happens with very large files?

Large documents are trimmed so the diagram stays readable: lists show their first items with a "… more" node, levels beyond the maximum depth are collapsed, and drawing stops at 400 nodes. All three limits are adjustable.

Can I hide the values?

Turn off Show values to draw only the keys, which is handy for showing the shape of a schema without its data.

More Mermaid tools

All tools