Comment créer une arborescence de fichiers pour un README GitHub

Une arborescence de fichiers — le petit diagramme ASCII des dossiers et fichiers de votre projet — rend un README bien plus lisible. Ce guide présente trois méthodes fiables pour en créer une, et comment la coller pour que les branches restent alignées sur GitHub.

La méthode la plus rapide : un générateur d'arbre ASCII en ligne

Sans ligne de commande ni installation. Construisez votre structure de dossiers visuellement, basculez entre connecteurs Unicode et ASCII simple, et copiez un diagramme propre en un clic.

Ouvrir le générateur d'arbre ASCII

Méthode 1 — La commande tree

Tous les principaux systèmes d'exploitation disposent (ou peuvent installer) d'une commande tree qui affiche une structure de dossiers sous forme de texte.

Sur macOS ou Linux, installez-la si besoin (brew install tree ou sudo apt install tree), puis lancez-la dans le dossier de votre projet. Utilisez -I pour ignorer les dossiers superflus :

Sur Windows, la commande est intégrée. Lancez-la dans le dossier à documenter :

Copiez la sortie de votre terminal et passez à la section « Faire en sorte que ça s'affiche sur GitHub » ci-dessous.

macOS / Linux
tree -I 'node_modules|.git|dist'

Méthode 2 — Un générateur d'arbre ASCII en ligne

Si vous ne voulez pas toucher à la ligne de commande, ou si vous documentez une structure qui n'existe pas encore sur le disque, un générateur en ligne est l'option la plus simple.

Vous ajoutez dossiers et fichiers dans un éditeur visuel, les réorganisez en glisser-déposer, choisissez des connecteurs Unicode (├──) ou ASCII simple (|--), et copiez le résultat. Rien n'est envoyé — tout se passe dans votre navigateur.

Méthode 3 — Une extension VS Code

Plusieurs extensions VS Code (cherchez « file tree to text ») ajoutent une action « Générer l'arborescence » au clic droit sur un dossier, avec une sortie Markdown.

Pratique quand vous vivez dans l'éditeur, même si vous contrôlez moins les dossiers à exclure qu'avec la commande tree ou un générateur dédié.

Faire en sorte que ça s'affiche sur GitHub

Quelle que soit la méthode, GitHub ne gardera les branches alignées que s'il utilise une police à chasse fixe. Encadrez l'arbre dans un bloc de code — trois accents graves sur leur propre ligne, avant et après :

Sans les accents graves, GitHub affiche le texte avec une police proportionnelle et les caractères │ et ├── se désalignent.

Dans votre README.md
```
my-project
├── src
│   └── index.ts
└── README.md
```

Connecteurs Unicode vs ASCII

Les connecteurs Unicode (├──, │, └──) sont plus nets et s'affichent nativement sur GitHub et dans les éditeurs modernes — utilisez-les par défaut.

Les connecteurs ASCII simple (|--, |, \--) n'utilisent que des caractères de base. Choisissez-les pour les vieux terminaux, les e-mails en texte brut ou les environnements sans support Unicode fiable.

Exemple de sortie
my-project
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md

Questions fréquentes

Comment exclure node_modules de l'arborescence ?
Avec la commande tree, passez -I pour ignorer des motifs, ex. tree -I "node_modules|.git|dist". Dans un générateur en ligne, il suffit de ne pas ajouter ces dossiers.
Pourquoi mon arborescence est-elle désalignée sur GitHub ?
C'est presque toujours parce que l'arbre n'est pas dans un bloc de code. Encadrez-le de trois accents graves pour que GitHub utilise une police à chasse fixe.
Puis-je créer une arborescence sans rien installer ?
Oui — utilisez un générateur d'arbre ASCII en ligne gratuit qui fonctionne entièrement dans votre navigateur. Vous construisez la structure visuellement et copiez le résultat.