Visualizador de Árbol de Carpetas
Convierte una simple lista indentada de nombres de archivos y carpetas en el clásico árbol de caracteres de caja (`├──`, `└──`, `│`) que ves en los README y en la salida del comando `tree` de Unix. El parser deduce la profundidad únicamente del espacio en blanco inicial de cada línea — elige 2 espacios, 4 espacios o un tab por nivel según tu fuente — así que puedes esbozar la estructura en cualquier editor y pegarla aquí. Toda entrada con hijos se trata como directorio y puede llevar `/` final; las entradas sin hijos se muestran como archivos, y se admiten varias raíces de nivel superior. Todo ocurre en tu navegador mientras escribes; nada se sube, y tu borrador se conserva en el almacenamiento local, así que sobrevive a una recarga. La salida usa caracteres Unicode de dibujo de cajas, que se renderizan correctamente en cualquier terminal moderno, en los bloques de código de GitHub/GitLab y en la mayoría de sistemas de documentación — envuelve el árbol en un bloque de código para que la fuente monoespaciada mantenga las ramas alineadas.
project/ ├── src/ │ ├── components/ │ │ ├── Header.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ └── utils.ts │ └── index.ts ├── public/ │ ├── favicon.ico │ └── robots.txt ├── package.json └── README.md
La salida usa caracteres Unicode de dibujo de cajas — renderizan en cualquier terminal moderno y en GitHub.
Cómo usar
- Pega o escribe tu lista indentada: un archivo o carpeta por línea, con los hijos un nivel más adentro que su padre.
- Ajusta la opción de indentación (2 espacios, 4 espacios o tabs) a la de tu lista; un ajuste incorrecto aplana el árbol o lo anida de más.
- Activa el slash final si quieres marcar los directorios con `/`.
- Copia el resultado y pégalo dentro de un bloque de código (tres backticks) en tu README o documentación.
Preguntas frecuentes
- ¿Y si mi lista mezcla tabs y espacios?
- El parser solo respeta la unidad de indentación seleccionada, así que la mezcla produce profundidades incorrectas. Elige el estilo dominante o normaliza primero: un buscar-y-reemplazar con regex de `\t` por dos espacios en tu editor tarda segundos.
- ¿Por qué importa el slash final en los directorios?
- En texto plano no hay iconos, así que el sufijo `/` es la única pista de que una entrada es una carpeta y no un archivo sin extensión. Los README de GitHub, la documentación de terminal y la opción `tree -F` de Unix usan la misma convención.
- ¿Cómo muestro una carpeta vacía?
- Una línea solo se trata como directorio cuando tiene al menos un hijo, así que una carpeta vacía se renderiza como archivo. Añade un hijo de relleno como `.gitkeep` si necesitas que aparezca como carpeta — también es la convención habitual en Git para conservar directorios vacíos.
- ¿Se verá bien el árbol en GitHub?
- Sí: los glifos `├──`/`└──` son texto Unicode normal. Coloca el árbol dentro de un bloque de código cercado (tres backticks) para que GitHub use fuente monoespaciada; fuera de un bloque de código el espaciado se colapsa y las ramas se desalinean.
- ¿Se guarda o se sube mi entrada?
- Nunca sale de tu navegador. La herramienta sí conserva tu última entrada en el almacenamiento local del navegador para que siga ahí tras recargar; vacía el área de texto (o borra los datos del sitio) para eliminarla.
Herramientas relacionadas
Imagen → ASCII Art
Convierte cualquier imagen en ASCII art con ancho, juego de caracteres e inversión ajustables — todo en tu navegador.
Conversor de Texto a Binario
Convierte texto a binario de 8 bits y viceversa. Codificado en UTF-8, así que funcionan emojis y caracteres acentuados, con separador de bytes a elegir.
Conversor de texto a hexadecimal (y vuelta)
Convierte texto a bytes hexadecimales y decodifica hex de vuelta a texto, con soporte UTF-8, en tu navegador.
Generador de Lorem Ipsum
Genera texto de relleno por párrafos, frases o palabras.
Generador de URL Slug
Convierte texto en un slug de URL limpio — quita acentos, elige separador, fija longitud máxima.
Conversor de leetspeak (1337)
Traduce texto a leetspeak y decodifica 1337 de vuelta a letras, en tu navegador.
Decodificador ASN.1 / DER
Pega cualquier estructura DER —PEM, base64 o hex— y mira su árbol ASN.1: desplazamientos, etiquetas, longitudes y valores decodificados.