<!--
  canonical-url: https://www.avonture.be/fr/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.
-->

# Afficher un fichier JSON sous forme de mind map

> Transformez des données JSON complexes en mind maps claires et interactives avec JSON Crack. Découvrez comment cet outil puissant simplifie la visualisation et la compréhension des données.

---
![Afficher un fichier JSON sous forme de mind map](/img/v2/mindmaps.webp)

**TL;DR**

Cet article présente JSON Crack, un outil en ligne gratuit qui affiche du contenu JSON sous forme de mind map / diagramme interactif au lieu d'un texte brut imbriqué, ce qui rend les structures complexes beaucoup plus lisibles d'un coup d'œil. Il montre deux exemples de fichiers JSON rendus sous forme d'arbres visuels et mentionne la limitation du nombre de lignes de la version gratuite, ainsi qu'une extension VSCode comme alternative.

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

J'aime beaucoup l'idée de ne pas avoir à dessiner (en fait, c'est juste parce que je suis vraiment mauvais pour ça) un diagramme, un organigramme, une représentation graphique de quelque chose qui... peut s'écrire.

[JSON Crack](https://jsoncrack.com/editor) est l'un des outils de ma boîte à outils quand je veux dessiner quelque chose qui peut s'écrire en JSON. *Il côtoie [Markmap](/blog/docker-mindmap) (même idée, mais depuis du Markdown) et [les outils de diagram-as-code](/blog/docker-diagram-as-code) en général.*

*Quand vous avez juste besoin de lire le JSON plutôt que de le visualiser, [JSON - Online linter](/blog/json-lint) et [`jq`](/blog/linux-jq) font le travail.*

Prenons un exemple trouvé au hasard sur le net : [superheroes](https://medium.com/@Goldzila/superheroes-of-data-exploring-xml-json-and-binary-formats-through-the-lens-of-marvel-characters-3754f2691cdc). Comment représenter Spider-Man sous forme d'objet JSON ? Voici une tentative :

**superheroes.json**

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

Ce n'est pas plus sympa en version visuelle ?

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

Un autre exemple (trouvé [ici](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)

L'avantage de l'image, c'est qu'elle est beaucoup plus claire : on voit tout de suite que l'équipe compte trois membres et que le plus fort (et le plus vieux) est *Eternal Flame*, qui possède cinq pouvoirs.

> **Note:**
>
> JSON Crack a quelques limitations dans sa version gratuite, comme le nombre de lignes de votre contenu JSON. Vous pouvez aussi installer un [add-on pour vscode](https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode).

D'autres outils JSON à connaître : [générer de fausses données JSON](/blog/json-faker) et [linter et valider vos fichiers JSON](/blog/json-lint).
