Como criar uma árvore de ficheiros para um README do GitHub

Uma árvore de ficheiros — o pequeno diagrama ASCII das pastas e ficheiros do seu projeto — torna um README muito mais fácil de ler. Este guia mostra três formas fiáveis de criar uma e como colá-la para que os ramos fiquem alinhados corretamente no GitHub.

A forma mais rápida: um gerador de árvore ASCII online

Sem linha de comandos nem instalação. Construa a sua estrutura de pastas visualmente, alterne entre conectores Unicode e ASCII simples e copie um diagrama limpo com um clique.

Abrir o Gerador de Árvore ASCII

Método 1 — O comando tree

Todos os principais sistemas operativos incluem (ou podem instalar) um comando tree que imprime a estrutura de um diretório como texto.

No macOS ou Linux, instale-o se necessário (brew install tree ou sudo apt install tree) e execute-o na pasta do seu projeto. Use -I para ignorar pastas desnecessárias:

No Windows, o comando está integrado. Execute-o na pasta que quer documentar:

Copie a saída do seu terminal e passe para a secção «Faça aparecer no GitHub» mais abaixo.

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

Método 2 — Um gerador de árvore ASCII online

Se não quiser mexer na linha de comandos, ou estiver a documentar uma estrutura que ainda não existe no disco, um gerador online é a opção mais simples.

Adiciona pastas e ficheiros num editor visual, reorganiza-os com arrastar e soltar, escolhe conectores Unicode (├──) ou ASCII simples (|--) e copia o resultado. Nada é enviado — tudo corre no seu navegador.

Método 3 — Uma extensão do VS Code

Várias extensões do VS Code (procure «file tree to text») adicionam uma ação «Gerar árvore de ficheiros» ao clicar com o botão direito em qualquer pasta, com saída em Markdown.

É prático quando vive dentro do editor, embora tenha menos controlo sobre quais pastas excluir do que com o comando tree ou um gerador dedicado.

Faça aparecer no GitHub

Seja qual for a forma como gera a árvore, o GitHub só mantém os ramos alinhados se usar uma fonte monoespaçada. Envolva a árvore num bloco de código — três crases numa linha própria, antes e depois:

Sem as crases de código, o GitHub renderiza o texto com uma fonte proporcional e os caracteres │ e ├── ficam desalinhados.

No seu README.md
```
my-project
├── src
│   └── index.ts
└── README.md
```

Conectores Unicode vs ASCII

Os conectores Unicode (├──, │, └──) ficam mais limpos e aparecem nativamente no GitHub e em editores modernos — use-os por predefinição.

Os conectores ASCII simples (|--, |, \--) usam apenas caracteres básicos. Escolha-os para terminais antigos, e-mails em texto simples ou ambientes que não mostram Unicode de forma fiável.

Exemplo de saída
my-project
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md

Perguntas frequentes

Como excluo node_modules da árvore?
Com o comando tree, passe -I para ignorar padrões, por ex. tree -I "node_modules|.git|dist". Num gerador online, basta não adicionar essas pastas.
Porque é que a minha árvore de ficheiros está desalinhada no GitHub?
É quase sempre porque a árvore não está dentro de um bloco de código. Envolva-a em três crases para que o GitHub use uma fonte monoespaçada.
Posso criar uma árvore de ficheiros sem instalar nada?
Sim — use um gerador de árvore ASCII online gratuito que funciona inteiramente no seu navegador. Constrói a estrutura visualmente e copia o resultado.