Come creare un albero dei file per un README di GitHub

Un albero dei file — il piccolo diagramma ASCII delle cartelle e dei file del tuo progetto — rende un README molto più leggibile. Questa guida mostra tre modi affidabili per crearne uno e come incollarlo affinché i rami restino allineati correttamente su GitHub.

Il modo più rapido: un generatore di albero ASCII online

Senza riga di comando né installazione. Costruisci la struttura delle cartelle visivamente, alterna tra connettori Unicode e ASCII semplice e copia un diagramma pulito con un clic.

Apri il Generatore di Albero ASCII

Metodo 1 — Il comando tree

Ogni sistema operativo principale include (o può installare) un comando tree che stampa la struttura di una directory come testo.

Su macOS o Linux, installalo se necessario (brew install tree o sudo apt install tree), quindi eseguilo nella cartella del progetto. Usa -I per ignorare le cartelle superflue:

Su Windows il comando è integrato. Eseguilo nella cartella che vuoi documentare:

Copia l'output dal terminale e passa alla sezione «Fai in modo che si veda su GitHub» qui sotto.

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

Metodo 2 — Un generatore di albero ASCII online

Se non vuoi toccare la riga di comando, o stai documentando una struttura che non esiste ancora su disco, un generatore online è l'opzione più semplice.

Aggiungi cartelle e file in un editor visivo, li riorganizzi con il drag-and-drop, scegli connettori Unicode (├──) o ASCII semplice (|--) e copi il risultato. Nulla viene caricato — tutto avviene nel browser.

Metodo 3 — Un'estensione di VS Code

Diverse estensioni di VS Code (cerca «file tree to text») aggiungono un'azione «Genera albero dei file» con il clic destro su qualsiasi cartella, con output in Markdown.

È comodo quando vivi nell'editor, anche se hai meno controllo su quali cartelle escludere rispetto al comando tree o a un generatore dedicato.

Fai in modo che si veda su GitHub

Comunque tu generi l'albero, GitHub manterrà i rami allineati solo se usa un font a spaziatura fissa. Racchiudi l'albero in un blocco di codice — tre backtick su una riga a sé, prima e dopo:

Senza i delimitatori di codice, GitHub rende il testo con un font proporzionale e i caratteri │ e ├── si disallineano.

Nel tuo README.md
```
my-project
├── src
│   └── index.ts
└── README.md
```

Connettori Unicode vs ASCII

I connettori Unicode (├──, │, └──) sono più puliti e si visualizzano nativamente su GitHub e negli editor moderni — usali per impostazione predefinita.

I connettori ASCII semplice (|--, |, \--) usano solo caratteri di base. Scegli questi per terminali datati, email in testo semplice o ambienti che non visualizzano Unicode in modo affidabile.

Esempio di output
my-project
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md

Domande frequenti

Come escludo node_modules dall'albero?
Con il comando tree, passa -I per ignorare i pattern, ad es. tree -I "node_modules|.git|dist". In un generatore online, semplicemente non aggiungere quelle cartelle.
Perché il mio albero dei file è disallineato su GitHub?
È quasi sempre perché l'albero non è dentro un blocco di codice. Racchiudilo tra tre backtick affinché GitHub usi un font a spaziatura fissa.
Posso creare un albero dei file senza installare nulla?
Sì — usa un generatore di albero ASCII online gratuito che funziona interamente nel browser. Costruisci la struttura visivamente e copi il risultato.