<!--
  canonical-url: https://www.avonture.be/fr/blog/docker-mindmap
  published:     2023-12-16
  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.
-->

# Créer une mind map avec Docker et Markdown

> Apprenez à créer facilement une mind map dynamique avec Markmap, Docker et Markdown. Convertissez du texte brut en une superbe mind map HTML interactive.

---
![Créer une mind map avec Docker et Markdown](/img/v2/mindmaps.webp)

**TL;DR**

Cet article montre comment transformer un simple plan Markdown (titres et listes à puces) en une mind map SVG interactive et zoomable grâce à Markmap, soit via son éditeur en ligne, soit sans rien installer avec l'image Docker `leopoul/markmap` (`docker run ... mindmap.md --output mindmap.html`).

Fan de markdown, j'adore dénicher un petit outil qui me permet d'écrire du texte et de le convertir dans un autre format.

Pour cet article, nous allons écrire une mind map en texte brut, autrement dit : notre texte sera converti en une image de mind map.

## Le résultat {#what-comes-out}

Voici la mind map que vous obtiendrez à la fin de cet article :

![Une mind map rendue par Markmap](./images/mindmap.webp)

C'est un SVG dans une page HTML : les branches peuvent être repliées et dépliées, et vous pouvez zoomer ou dézoomer. Et voici l'unique commande qui l'a produite, à partir d'un simple fichier Markdown :

```bash
docker run -it --rm -v ${PWD}:/project -w /project -u $(id -u):$(id -g) \
  leopoul/markmap:1.0.0 mindmap.md --output mindmap.html
```

Rien d'installé sur la machine ; l'outil que nous utilisons s'appelle `Markmap` et il reste dans son container.

## Et voici le texte qui l'a produite {#and-here-is-the-text-that-produced-it}

**mindmap.md**

```markdown
# Social Media Uses

## Blogging

- Blogger
- Medium
- Joomla

## Social Network

### Common

- Facebook

### For developers

- Dev.to
- Daily.dev
- Github

## Photo Sharing

- Flicker
- Pinterest
```

Les titres deviennent des branches, les listes à puces deviennent des feuilles. Voilà toute la syntaxe ; vous la connaissez déjà.

## Le faire sur votre machine {#doing-it-on-your-machine}

Pour la démo, lancez un shell Linux et exécutez `mkdir -p /tmp/markmap && cd $_` pour créer un dossier `markmap` dans votre dossier temporaire Linux et vous y placer.

Créez un nouveau fichier appelé `mindmap.md` avec le contenu markdown à propos de *Social Media Uses* fourni juste au-dessus. Vous devriez avoir ceci :

```bash
$ ls -alh
total 920K
drwxr-xr-x  2 christophe christophe 4.0K Dec 16 14:05 .
drwxrwxrwt 19 christophe christophe 908K Dec 16 14:05 ..
-rw-r--r--  1 christophe christophe  198 Dec 16 14:05 mindmap.md
```

Exécutez maintenant la commande `docker run` affichée en début d'article pour convertir le document markdown en page HTML. L'image est automatiquement créée sous forme de contenu SVG dans le fichier `.html` :

```bash
$ ls -alh
total 920K
drwxr-xr-x  2 christophe christophe 4.0K Dec 16 14:05 .
drwxrwxrwt 19 christophe christophe 908K Dec 16 14:05 ..
-rw-r--r--  1 christophe christophe 2.2K Dec 16 14:10 mindmap.html
-rw-r--r--  1 christophe christophe  198 Dec 16 14:05 mindmap.md
```

Ouvrez `mindmap.html` dans votre navigateur et la carte s'affichera sur toute la largeur de l'écran.

> **Utilisateur WSL:**
>
> Si vous êtes sous Windows et WSL2, une façon d'ouvrir le fichier `mindmap.html` est de lancer `explorer.exe .` dans votre console Linux (voir [cet article](/blog/wsl-windows-explorer) pour en savoir plus). L'explorateur Windows démarrera ; il suffit alors de double-cliquer sur le fichier `mindmap.html`.

## Sans Docker, dans votre navigateur {#without-docker-in-your-browser}

`Markmap` peut aussi être utilisé en ligne : voyez la démo et l'éditeur sur <https://markmap.js.org/repl>. Copiez/collez le markdown ci-dessus dans l'[éditeur](https://markmap.js.org/repl) pour le voir en action, sans créer le moindre fichier.

## Aller plus loin {#go-further}

Vous pouvez ajouter des éléments de configuration dans votre document markdown, voyez <https://markmap.js.org/docs/json-options> pour obtenir la liste de toutes les options JSON supportées.

## Conclusion {#conclusion}

Une mind map que vous pouvez versionner, comparer et éditer dans n'importe quel éditeur de texte, produite par un seul `docker run` — et rien à désinstaller ensuite.

Deux suites : [Getting a more attractive mindmap with Markmap and Quarto](/blog/vscode-docker-markmap), qui soigne le rendu, et [Rendering a JSON file as a mind map](/blog/json-crack) quand la source est un fichier JSON plutôt que du Markdown.
