Saltar al contenido

Editor de diagramas ASCII

ASCII Diagram Editor

Dibuja cajas, líneas, flechas y etiquetas sobre una rejilla de caracteres; cada esquina y cada cruce se deducen de qué celdas vecinas están ocupadas, en caracteres de recuadro Unicode o en ASCII puro.

Lo que hace penosos los diagramas ASCII a mano son las esquinas. Pon un ┌ donde va un ┬ y el dibujo queda sutilmente mal; decide después que tiene que ir en un comentario del código fuente y hay que encontrar y reemplazar cada uno de esos caracteres. Este editor nunca te deja elegir uno. Tú dices dónde hay una caja y por dónde corre una línea, y cada celda deduce su propio glifo a partir de cuáles de sus cuatro vecinas están ocupadas — así que las líneas que se cruzan producen ┼ sin que ninguna de las dos sepa de la otra, y pasar el dibujo entero a ASCII puro es un ajuste.

🔒 Se ejecuta por completo en tu navegadorasciidiagrameditordevelopertext
Herramienta

Caracteres de dibujo de cajas U+2500. Están en todas las tipografías monoespaciadas en uso desde más o menos 1995.

Figura seleccionada

No hay nada seleccionado. Elige la herramienta de selección y haz clic en una figura.

Diagrama

 
Ningún carácter de esquina o de cruce se elige a mano. Una caja dice dónde está su borde y una línea dice por dónde pasa; después cada celda deduce su propio glifo de las cuatro direcciones en las que conecta. Por eso dos líneas que se cruzan dan un ┼ sin que ninguna sepa de la otra, y por eso pasar a ASCII puro es un ajuste y no un buscar y reemplazar sobre tu dibujo.
El juego ASCII pierde información a propósito: un solo + para los once cruces y para los cuatro tipos de esquina. Un diagrama que aguanta entrar en un comentario del código, en un mensaje de commit, en un Makefile o en una terminal con una tipografía de 1994 vale más que uno más bonito que llega convertido en cajas.
Tres cosas que no hace. Nada de líneas diagonales, porque ningún carácter de recuadro lo es: un arrastre en diagonal se traza como un codo. Ningún trazado automático que esquive obstáculos; la línea va por donde la pongas. Y nada de ajuste de texto dentro de una caja.

Cómo se usa

  1. Arrastra cajas primero, luego conéctalas

    Un arrastre con la herramienta de caja crea una caja; un clic crea la más pequeña que sigue siendo una caja. Luego toma la herramienta de flecha y arrastra de una a otra: un extremo que cae dentro de una caja se atrae a la celda de borde más cercana, porque arrastrar *hasta* una caja significa conectarse a ella y una línea que la atraviesa por el medio nunca es lo que se quería.

  2. Elige el conjunto de caracteres según a dónde va

    Caracteres de dibujo de cajas Unicode para un README o una terminal. ASCII puro — solo - | + < > ^ v — para un comentario de código, un mensaje de commit, un Makefile, o cualquier sitio donde la codificación no sea segura. El conjunto ASCII es deliberadamente pobre: un + para las once uniones. Un diagrama que llega intacto le gana a uno más bonito que llega como cajas.

  3. Etiqueta las cajas desde el panel, no escribiendo dentro

    Selecciona una caja y escribe su etiqueta en el panel de abajo; se centra dentro automáticamente y se mueve con la caja. Una etiqueta más ancha que su caja se recorta en lugar de reacomodarse, y la página dice cuáles: reacomodar cambiaría la forma del dibujo, que no es algo que una etiqueta deba hacer.

Preguntas frecuentes

¿Puedo dibujar una línea diagonal?

No, y no es una función que falte. No hay ningún carácter de dibujo de cajas para una diagonal: el bloque tiene ─ │ y las esquinas y nada a 45 grados. Un arrastre que no es ni horizontal ni vertical se traza en su lugar como un codo, que es lo que el diagrama quería, y puedes elegir qué tramo va primero.

¿Trazará las líneas rodeando mis cajas?

No. El trazado ortogonal automático alrededor de obstáculos es un algoritmo de verdad y uno malo es peor que una línea recta puesta por ti: mueve tu diagrama mientras intentas dibujarlo. Las líneas van donde las pones.

Puede recibir de

Después

Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.

Generador de tablas en texto

ASCII Table Generator

Dibuja una tabla en ASCII monoespaciado, en Markdown o con caracteres de recuadro, para READMEs y comentarios.

Se ejecuta por completo en tu navegador

Captura de código como imagen

Code Screenshot

Convierte un fragmento de código en una imagen con resaltado de sintaxis, marco de ventana y el tema que elijas.

Se ejecuta por completo en tu navegador

Editor de Markdown

Markdown Editor

Edita Markdown con vista previa en vivo y exporta el HTML renderizado, con tablas y listas de tareas de GFM.

Se ejecuta por completo en tu navegador

Arte de texto a imagen

Text Art to Image

Convierte cualquier arte de texto monoespaciado en PNG o SVG eligiendo fuente, tamaño de celda, color, fondo y transparencia, para que sobreviva al publicarlo donde no se respeta el monoespaciado.

Se ejecuta por completo en tu navegador

Horóscopo del día por signo y animal del zodiaco

Daily Fortune by Zodiac Animal & Star Sign

Compone la lectura de un día para un signo del zodiaco o un animal del zodiaco chino a partir del 일진 de esa fecha y del temperamento tradicional del signo; la semilla es la fecha, así que no cambia al recargar.

Se ejecuta por completo en tu navegador

Compatibilidad de signos del zodiaco chino

Zodiac Compatibility (궁합)

Dos fechas de nacimiento dan dos animales del zodiaco chino y dos troncos del día, e informa de la relación exacta entre ellos —삼합, 육합, 충, 원진, 형, 파, 해— y de la relación de los cinco elementos, cada una con su veredicto tradicional.

Se ejecuta por completo en tu navegador