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.

18 janvier 2024 · 3 minutes de lecture

Voir la source

Christophe

Amoureux de Markdown, WSL et Docker ~ Curieux insatiable.

Cet article existe aussi en anglais — lire la version originale.

Traduction automatique

Cette traduction a été produite par une IA. Elle peut contenir des contresens ou des maladresses, en particulier sur les termes techniques. En cas de doute, consultez l'article de référence en anglais — c'est lui qui fait foi.

Cet article a plus d'un an, mais il a été relu le 30 juillet 2026 — son contenu est toujours exact.

Cet article fait partie de la série Diagrammes as code :

Afficher un fichier JSON sous forme de mind map

⚡

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 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 (même idée, mais depuis du Markdown) et les outils de diagram-as-code en général.

Quand vous avez juste besoin de lire le JSON plutôt que de le visualiser, JSON - Linter en ligne et jq font le travail.

Prenons un exemple trouvé au hasard sur le net : superheroes. Comment représenter Spider-Man sous forme d'objet JSON ? Voici une tentative :

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

Ce fichier JSON décrit un personnage de super-héros en structurant ses informations de base : identité, pouvoirs spécialisés et équipement disponible. La structure utilise des clés imbriquées pour organiser les données de manière hiérarchique et lisible.

Ce n'est pas plus sympa en version visuelle ?

JSON Crack

Un autre exemple (trouvé ici) :

{
  "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"
      ]
    }
  ]
}

Ce fichier JSON décrit une équipe de super-héros appelée « Super hero squad » avec ses informations générales (ville d'origine, année de formation, base secrète) et une liste détaillée de trois membres, chacun ayant son nom public, son identité secrète, son âge et ses pouvoirs spécifiques.

Super hero squad

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.

Remarque

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.

D'autres outils JSON à connaître : générer de fausses données JSON et linter et valider vos fichiers JSON.

Cet article fait partie de la série Diagrammes as code :