<!--
  canonical-url: https://www.avonture.be/blog/json-crack
  published:     2024-01-18
  This is a static plain-Markdown mirror generated at build time.
  Visit the canonical URL above for the fully rendered page, with images and interactive components.
-->

# Rendering a JSON file as a mind map

> Transform complex JSON data into clear, interactive mind maps with JSON Crack. Discover how this powerful tool simplifies data visualization and enhances data understanding.

---
![Rendering a JSON file as a mind map](/img/v2/mindmaps.webp)

**TL;DR**

This article presents JSON Crack, a free online tool that renders JSON content as an interactive mind map/diagram instead of raw nested text, making complex structures much easier to read at a glance. It shows two example JSON files rendered as visual trees and mentions the free version's line-count limitation along with a VSCode extension alternative.

> <https://jsoncrack.com/editor>

I really like the idea of not having to draw (actually, that is just because I am really bad at it) a diagram, a flow chart, a graphic representation of something that ... can be written.

[JSON Crack](https://jsoncrack.com/editor) is one of the tools in my toolkit when I want to draw something that can be written in JSON. *It sits next to [Markmap](/blog/docker-mindmap) (same idea, but from Markdown) and [the diagram-as-code tools](/blog/docker-diagram-as-code) in general.*

*When you just need to read the JSON rather than visualize it, [JSON - Online linter](/blog/json-lint) and [`jq`](/blog/linux-jq) do the job.*

Let's take an example found randomly on the net [superheroes](https://medium.com/@Goldzila/superheroes-of-data-exploring-xml-json-and-binary-formats-through-the-lens-of-marvel-characters-3754f2691cdc). How can we represent Spider-Man as a JSON object? Below an attempt:

**superheroes.json**

```json
{
  "superhero": "Spider-Man",
  "realName": "Peter Parker",
  "abilities": [
    "Wall-Crawling",
    "Spider-Sense",
    "Super Strength"
  ],
  "equipment": {
    "webShooters": "True",
    "spiderTracers": "True"
  }
}
```

Isn't it nicer in visual form?

![JSON Crack](./images/spiderman_json.webp)

Another example (found [here](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON)):

**superheroes.json**

```json
{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}
```

![Super hero squad](./images/super_hero_squad.webp)

The advantage of the image is that it is much clearer: we can see straight away that the squad is made up of three members and that the strongest (and oldest) is *Eternal Flame*, who has five powers.

> **Note:**
>
> JSON Crack has some limitations for the free version like the number of lines in your JSON content. You can also install an [add-on for vscode](https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode).

Other JSON tools worth knowing about: [generating fake JSON data](/blog/json-faker) and [linting/validating your JSON files](/blog/json-lint).