Cómo crear un árbol de archivos para un README de GitHub
Un árbol de archivos — el pequeño diagrama ASCII de las carpetas y archivos de tu proyecto — hace que un README sea mucho más fácil de leer. Esta guía muestra tres formas fiables de crear uno y cómo pegarlo para que las ramas queden alineadas correctamente en GitHub.
La forma más rápida: un generador de árbol ASCII en línea
Sin línea de comandos ni instalación. Construye tu estructura de carpetas visualmente, alterna entre conectores Unicode y ASCII simple, y copia un diagrama limpio con un clic.
Abrir el Generador de Árbol ASCIIMétodo 1 — El comando tree
Todos los sistemas operativos principales incluyen (o pueden instalar) un comando tree que imprime la estructura de un directorio como texto.
En macOS o Linux, instálalo si es necesario (brew install tree o sudo apt install tree) y luego ejecútalo en la carpeta de tu proyecto. Usa -I para ignorar carpetas innecesarias:
En Windows, el comando está integrado. Ejecútalo en la carpeta que quieras documentar:
Copia la salida de tu terminal y pasa a la sección «Haz que se muestre en GitHub» más abajo.
tree -I 'node_modules|.git|dist'Método 2 — Un generador de árbol ASCII en línea
Si no quieres tocar la línea de comandos, o estás documentando una estructura que aún no existe en el disco, un generador en línea es la opción más sencilla.
Añades carpetas y archivos en un editor visual, los reorganizas arrastrando y soltando, eliges conectores Unicode (├──) o ASCII simple (|--), y copias el resultado. Nada se sube — todo se ejecuta en tu navegador.
Método 3 — Una extensión de VS Code
Varias extensiones de VS Code (busca «file tree to text») añaden una acción «Generar árbol de archivos» con clic derecho en cualquier carpeta, con salida en Markdown.
Es práctico cuando vives dentro del editor, aunque tienes menos control sobre qué carpetas excluir que con el comando tree o un generador dedicado.
Haz que se muestre en GitHub
Sea cual sea la forma en que generes el árbol, GitHub solo mantendrá las ramas alineadas si usa una fuente monoespaciada. Envuelve el árbol en un bloque de código — tres comillas invertidas en su propia línea, antes y después:
Sin las comillas de código, GitHub renderiza el texto con una fuente proporcional y los caracteres │ y ├── se desalinean.
```
my-project
├── src
│ └── index.ts
└── README.md
```Conectores Unicode vs ASCII
Los conectores Unicode (├──, │, └──) se ven más limpios y se muestran de forma nativa en GitHub y en editores modernos — úsalos por defecto.
Los conectores ASCII simple (|--, |, \--) usan solo caracteres básicos. Elígelos para terminales antiguas, correos de texto plano o entornos que no muestran Unicode de forma fiable.
my-project
├── src
│ ├── index.ts
│ └── utils.ts
├── tests
│ └── index.test.ts
├── package.json
└── README.mdPreguntas frecuentes
- ¿Cómo excluyo node_modules del árbol?
- Con el comando tree, pasa -I para ignorar patrones, p. ej. tree -I "node_modules|.git|dist". En un generador en línea, simplemente no añadas esas carpetas.
- ¿Por qué está desalineado mi árbol de archivos en GitHub?
- Casi siempre es porque el árbol no está dentro de un bloque de código. Envuélvelo en tres comillas invertidas para que GitHub use una fuente monoespaciada.
- ¿Puedo crear un árbol de archivos sin instalar nada?
- Sí — usa un generador de árbol ASCII en línea gratuito que se ejecuta completamente en tu navegador. Construyes la estructura visualmente y copias el resultado.