Pega un diagrama
Pega texto hecho de caracteres de dibujo de cajas Unicode, o carga el ejemplo.
Un editor de diagramas de cajas que trata bien los caracteres de ancho completo
Esta herramienta lee un diagrama hecho de caracteres de dibujo de cajas Unicode (┌┐└┘│─├┤┬┴┼) — el tipo de cajas rectangulares anidadas que se usan en wireframes de interfaz y esquemas de arquitectura simples —, te deja seleccionar, mover, redimensionar y volver a escribir el texto de cada caja en una GUI, y escribe el resultado de vuelta como texto plano.
Su modelo de cuadrícula direcciona cada celda por columna de visualización, no por unidad de código UTF-16. Un carácter japonés o chino de ancho completo, o un emoji (incluidas secuencias de varios puntos de código unidas con un joiner de ancho cero), ocupa correctamente dos columnas de la cuadrícula en lugar de una — así que al pegar un diagrama que mezcla ASCII con texto CJK o iconos de emoji, los bordes de las cajas se mantienen alineados en vez de desplazarse una o dos columnas después del primer carácter ancho.
Solo entiende cajas rectangulares anidadas — no líneas ni flechas dibujadas a mano, círculos, ni otro arte ASCII general. Si necesitas una herramienta de dibujo genérica, esta no lo es; pero si necesitas reorganizar un wireframe de cajas y etiquetas pegado desde un documento de diseño o una transcripción de captura de pantalla, está pensada justamente para eso.
Por qué tu diagrama nunca sale de tu dispositivo
Aquí la privacidad es estructural, no una promesa. No hay paso de subida porque no hay servidor al que subir nada:
- El análisis, la edición y el renderizado ocurren enteramente en tu navegador.
- La página se sirve como archivos estáticos y no hace ninguna solicitud que lleve el texto de tu diagrama.
- No hay ninguna función de enlace para compartir que codifique tu diagrama en una URL.
- El código fuente es abierto y cualquiera puede leerlo (MIT).
- Funciona sin conexión, algo que solo es posible porque nada sale del dispositivo.
Si quieres comprobarlo tú mismo, abre el panel de red de tu navegador mientras editas — ninguna solicitud lleva el texto de tu diagrama. Lee el código fuente.
Cómo usarlo
-
Pega tu diagrama
Pega el texto del diagrama de cajas en el cuadro de texto, o haz clic en "Cargar ejemplo" para probarlo primero con un ejemplo pequeño.
-
Selecciona y edita una caja
Haz clic en una caja del lienzo, o elígela de la lista de la derecha. Arrastra para moverla, arrastra su esquina inferior derecha para cambiar su tamaño, o edita su texto directamente en el formulario — todo esto también funciona desde el teclado mediante los campos numéricos y el área de texto.
-
Añade o elimina cajas
Usa "Añadir caja" para dibujar una caja vacía nueva, o elimina la que esté seleccionada. Mover y redimensionar nunca evitan superponerse con otras cajas — las ediciones posteriores simplemente se dibujan encima de las anteriores, como en un lienzo de dibujo normal.
-
Exporta el resultado
Copia el texto plano, descárgalo como archivo .txt, o usa "Copiar para IA" para obtener una instrucción de antes/después lista para pegar en un chat de IA (ver más abajo).
Preguntas frecuentes
¿Se sube mi diagrama a algún sitio?
No. El análisis, la edición y el renderizado ocurren enteramente en tu navegador. No hay componente de servidor ni función de enlace para compartir, así que el texto de tu diagrama no tiene ninguna vía para salir de tu dispositivo.
¿Por qué importan aquí los caracteres de ancho completo y los emoji?
Un carácter japonés o chino, o la mayoría de los emoji, tienen visualmente el doble de ancho que una letra latina al renderizarse en una fuente monoespaciada — pero en el texto subyacente siguen siendo un solo carácter (o, en algunos emoji, una secuencia de varios puntos de código). Un analizador que recorre el texto unidad de código por unidad de código cuenta mal ese ancho, así que el borde de la caja después del carácter ancho queda una columna corto. Esta herramienta calcula el ancho de visualización real de cada carácter y le da dos columnas de la cuadrícula a un carácter de ancho doble, así que las columnas se mantienen alineadas sin importar el contenido del diagrama.
¿Qué pasa con las líneas, flechas o círculos dibujados a mano?
Esta herramienta solo detecta y edita regiones rectangulares cerradas hechas con los caracteres de dibujo de cajas estándar (┌┐└┘│─├┤┬┴┼). Todo lo demás — una línea diagonal, una punta de flecha, un círculo, arte ASCII general — se trata como contenido de texto normal y se conserva tal cual, pero no es una "caja" seleccionable ni movible.
¿Mover o redimensionar una caja evita que se superponga con otras?
No, deliberadamente no. Esto es un lienzo de cuadrícula sencillo: la caja que dibujes o muevas en último lugar simplemente sobrescribe las celdas donde caiga, igual que en una herramienta de dibujo básica. Si dos cajas terminan superpuestas, vuelve a dibujar o mueve una de ellas para arreglarlo.
Si no edito nada, ¿el texto exportado es idéntico byte a byte al que pegué?
No necesariamente byte a byte (por ejemplo, siempre se recorta el espacio en blanco al final de cada línea) — pero al volver a analizar el texto exportado se encuentran las mismas cajas, en las mismas posiciones, con el mismo texto, que en la versión que pegaste. La herramienta es un lienzo de cuadrícula completo, no un editor de parches que preserva líneas.
¿Para qué sirve "Copiar para IA"?
Copia el texto del diagrama tal como estaba al pegarlo y el texto tal como está ahora, como dos bloques de texto etiquetados y delimitados, listos para pegar en un chat de IA como instrucción de cambio. Está pensado para un flujo de trabajo concreto: pegar un wireframe de interfaz (el diseño de una pantalla real, esbozado como cajas anidadas), editarlo aquí, y entregarle el antes/después a una IA como el cambio a aplicar.
¿Puedo usarlo sin ratón?
Sí. Seleccionar una caja de la lista, y moverla, redimensionarla, cambiar su texto y eliminarla mediante los campos del formulario junto al lienzo, son todas operaciones totalmente operables por teclado. Arrastrar en el lienzo es una comodidad para el puntero añadida sobre esas mismas operaciones.
¿Funciona sin conexión?
Sí. Es una PWA. Después de la primera visita queda en caché, así que funciona sin conexión de red. También puedes instalarla en tu pantalla de inicio.