Editor de diagramas ASCII
Haz bocetos de diagramas de arquitectura, flujo y secuencia en texto plano: arrastra para dibujar cajas y flechas, haz clic para escribir etiquetas y copia el resultado directamente en un comentario de código, un mensaje de commit o un README. Las líneas se unen automáticamente donde se encuentran.
Última actualización:
Importar texto ASCII existente
Cómo usar Editor de diagramas ASCII
- Elige un estilo de línea: ASCII funciona en todas partes; los estilos Unicode se ven más nítidos en editores modernos y en GitHub.
- Arrastra con la herramienta Caja para dibujar cajas, luego cambia a Flecha y arrastra de una caja a otra.
- Añade etiquetas con Texto: haz clic en una celda y escribe. Intro pasa a la línea siguiente; Esc termina.
- Reorganiza con Seleccionar: arrastra alrededor de una zona y luego arrastra dentro de ella para moverla, o pulsa Supr para borrarla.
- Copia el diagrama, opcionalmente envuelto como bloque de código Markdown o comentario de código, o descárgalo como archivo .txt.
Caracteres de dibujo de cajas de un vistazo
| Pieza | ASCII | Unicode fino | Redondeado | Grueso | Doble |
|---|---|---|---|---|---|
| Horizontal | - | ─ U+2500 | ─ | ━ U+2501 | ═ U+2550 |
| Vertical | | | │ U+2502 | │ | ┃ U+2503 | ║ U+2551 |
| Esquinas | + | ┌ ┐ └ ┘ | ╭ ╮ ╰ ╯ | ┏ ┓ ┗ ┛ | ╔ ╗ ╚ ╝ |
| Uniones en T | + | ├ ┤ ┬ ┴ | ├ ┤ ┬ ┴ | ┣ ┫ ┳ ┻ | ╠ ╣ ╦ ╩ |
| Cruz | + | ┼ U+253C | ┼ | ╋ U+254B | ╬ U+256C |
| Puntas de flecha | > < ^ v | ► ◄ ▲ ▼ (U+25BA, U+25C4, U+25B2, U+25BC) | |||
Los caracteres Unicode provienen del bloque Box Drawing (U+2500 a U+257F). Están diseñados para llenar toda la celda del carácter, de modo que las líneas se unen sin huecos, siempre que el texto se muestre con una fuente monoespaciada.
Consejos para diagramas que sobreviven al copiar y pegar
- Mantenlo estrecho: unos 72 a 80 caracteres de ancho caben en las herramientas de revisión de código, las terminales y los límites de línea de la mayoría de las guías de estilo.
- Usa espacios, nunca tabulaciones: el ancho de la tabulación varía entre editores, lo que desplaza las columnas. El editor siempre exporta espacios.
- Deja una columna en blanco alrededor de las cajas para que las etiquetas y las flechas sigan legibles y no se formen uniones por accidente.
- Prefiere ASCII para terminales y registros; algunas fuentes de terminales antiguas dibujan los caracteres Unicode de cajas con huecos o a doble ancho.
- Etiqueta las flechas, no solo las cajas: un verbo corto como lee, publica o HTTPS junto a cada flecha explica el flujo.
- Envuélvelo en un bloque de código en Markdown, wikis y aplicaciones de chat para que se conserven los espacios.
Para diagramas generados a partir de definiciones de texto con diseño automático, prueba el editor de diagramas Mermaid. Para convertir datos tabulares en una tabla de texto, usa el generador de tablas Markdown.
Preguntas frecuentes
¿Qué es un diagrama ASCII?
Un diagrama ASCII es un dibujo hecho solo con caracteres de texto, como + - | para las cajas y > para las puntas de flecha. Como es texto plano, puede vivir dentro del código fuente, la salida de la terminal, correos y archivos README, y aparece en los diffs y la revisión de código como cualquier otro texto.
¿Debo usar el estilo de línea ASCII o el Unicode?
El ASCII simple (+ - |) se muestra correctamente en cualquier editor, terminal y fuente. Los caracteres Unicode de dibujo de cajas (┌─┐) se ven más limpios y se conectan sin cortes, y se ven bien en GitHub, GitLab y editores modernos, pero algunas herramientas antiguas y algunas fuentes pueden mostrarlos de forma irregular o con otro ancho.
¿Cómo pongo el diagrama en un README para que conserve su forma?
Elige Envolver como: bloque de código Markdown y pega el resultado. Un bloque de código delimitado se muestra con una fuente monoespaciada y conserva los espacios; sin él, Markdown junta los espacios y el diagrama se desarma.
¿Cómo añado un diagrama a un comentario de código?
Elige el estilo de comentario de tu lenguaje (// para C, Java, JavaScript, Go; # para Python, shell, YAML; -- para SQL y Lua; o un bloque /* */) y copia. Cada línea lleva el prefijo y se eliminan los espacios finales para que los linters no se quejen.
¿Cómo obtienen las líneas conectadas los caracteres de esquina correctos?
Cada carácter de línea registra en qué direcciones conecta (arriba, derecha, abajo, izquierda). Cuando dibujas sobre una línea existente, las direcciones se combinan y se elige el carácter correspondiente, así que una línea que toca el borde de una caja se convierte en una unión en T y dos líneas que se cruzan forman una cruz.
¿Puedo editar un diagrama que hice antes?
Sí. Tu dibujo actual se guarda automáticamente en este navegador. Para editar un diagrama de un archivo o un comentario de código, pégalo en Importar texto ASCII existente (quita antes los marcadores de comentario) y haz clic en Cargar texto en la cuadrícula.
¿Funciona en un teléfono o una tableta?
Sí. El dibujo funciona con el tacto, y la herramienta Desplazar te permite moverte por una cuadrícula grande sin dibujar. Con la herramienta Texto puedes usar un teclado físico o el teclado en pantalla.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.