Créer une mind map avec Docker et Markdown

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​

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

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 :

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​

# 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​

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 :

$ 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 :

$ 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.

Sans Docker, dans votre navigateur​

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 pour le voir en action, sans créer le moindre fichier.

Aller plus loin​

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​

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 : Obtenir une mindmap plus attrayante avec Markmap et Quarto, qui soigne le rendu, et Afficher un fichier JSON sous forme de mind map quand la source est un fichier JSON plutôt que du Markdown.