🌳Dev

Gerador de Árvore ASCII

Cole uma estrutura indentada (espaços/tabs) e gere uma árvore ASCII pronta para README — ├──, └── etc. Tudo no navegador.

Estrutura indentada (2 espaços ou 1 tab por nível)

Gere árvores de diretório em ASCII

Aquelas árvores de pastas que aparecem em READMEs, com os ramos ├── e └──, dão um ar profissional à documentação. O problema é montá-las na mão: alinhar os caracteres um a um vira um suplício. Cole uma estrutura indentada aqui e a ferramenta desenha a árvore ASCII por você.

Escreva a hierarquia usando espaços ou tabs para marcar os níveis. O alinhamento sai certinho e os conectores aparecem nos lugares corretos sozinhos. Funciona bem para documentar a estrutura de um projeto, explicar como os arquivos estão organizados ou ilustrar um diagrama em texto puro.

A geração acontece no próprio navegador e o resultado já sai pronto para colar no seu README ou na documentação. Acabou a era de alinhar barras e traços na unha.

Perguntas frequentes

Como devo indentar o texto de entrada?

Dois espaços ou um tab por nível, sem misturar os dois. A leitura troca cada tab por dois espaços e divide o total por dois, então quatro espaços por nível são interpretados como dois níveis de uma vez e a árvore ganha ramos que não existem. Indentação ímpar, três espaços por exemplo, cai num nível quebrado e os conectores param de alinhar. Linha em branco é descartada, e o que vier depois da indentação é copiado como está: barra final, comentário, o que você escrever.

A ferramenta consegue ler uma pasta do meu computador?

Não, não existe upload nem seletor de diretório. Você digita ou cola a estrutura no campo de texto e ela desenha os conectores; nada sai do navegador. Um jeito prático de produzir a entrada é rodar tree -i --noreport ou find . -type d no terminal e colar a saída já indentada. Ela também não distingue pasta de arquivo, então a barra no fim do nome da pasta, se você quiser, entra na mão junto com o nome.

Por que aparece uma barra vertical solta na árvore?

Isso acontece quando existe mais de um item no nível zero. As raízes são impressas sem conector nenhum, mas os descendentes continuam desenhando a coluna do nível zero, e aí surge um traço vertical apontando para o nada: basta colocar um README.md ao lado de src para a linha do button.js, dois níveis abaixo, ganhar um. Para uma saída limpa, monte uma raiz de cada vez e cole a segunda árvore separadamente.

Ferramentas Relacionadas

📋

Gerador de Tabela Markdown

Crie tabelas Markdown visualmente — adicione linhas e colunas, edite células e copie a sintaxe GFM pronta para README, Notion ou GitHub. Sem formatação manual.

📝

Markdown Cheatsheet

Consulta rápida de sintaxe Markdown, com filtro por palavra: títulos, listas, links, tabelas, código e mais. Mostra a sintaxe crua ao lado do que ela significa.

📘

Gerador de README.md

Monte um README.md profissional preenchendo nome, descrição, badges, instalação, uso, licença. Pré-visualização Markdown ao lado.

📑

Gerador de TOC Markdown

Gere o sumário (table of contents) de um arquivo Markdown a partir das headings (#, ##, ###). Inclui anchors no estilo GitHub. Tudo no navegador.

⏱️

Parse Retry-After

Faz parse do header Retry-After (segundos ou HTTP-date) e retorna tempo de espera.

🎯

Focus-Visible CSS Snippet

Gera snippet CSS focus-visible com cor de outline customizada (WCAG 2.4.7).