Editor de Diagramas ASCII - Dibujar Diagramas de Texto en Línea
Dibuja cajas, flechas y líneas como texto ASCII o Unicode para comentarios de código y documentación — 100% del lado del cliente, sin envío de datos.
Preguntas Frecuentes
¿Qué es un Editor de Diagramas ASCII?
Un Editor de Diagramas ASCII es una herramienta en línea que permite dibujar visualmente cajas, líneas, flechas y texto usando caracteres ASCII o Unicode en un lienzo basado en cuadrícula. A diferencia de herramientas gráficas que producen archivos de imagen, este editor genera texto puro que puede insertarse directamente en comentarios de código, archivos README, correos electrónicos y documentación de texto plano.
¿Cómo uso este Editor de Diagramas ASCII?
Selecciona una herramienta de dibujo de la barra de herramientas: Caja, Línea, Flecha, Texto, Borrar o Libre. Haz clic y arrastra en el lienzo para dibujar. Para cajas, arrastra de una esquina a la opuesta. Elige entre modo ASCII (+, -, |) y modo Unicode (┌, ─, │). Cuando tu diagrama esté completo, copia el texto o descárgalo como archivo .txt.
¿Mis datos están seguros? ¿Se envía algo al servidor?
Todas las operaciones se realizan 100% del lado del cliente en tu navegador. No se transmiten datos de diagramas, estado del lienzo ni información del usuario a ningún servidor. Tus diagramas solo existen en la memoria del navegador y opcionalmente en localStorage para autoguardado.
¿Cuál es la diferencia entre los modos ASCII y Unicode?
El modo ASCII usa caracteres básicos: + para esquinas, - para líneas horizontales, | para verticales. Produce salida compatible con cualquier editor de texto. El modo Unicode usa caracteres de dibujo de cajas como ┌, ─, │ que producen diagramas más limpios y profesionales. También soporta 5 estilos de línea: fina, gruesa, doble, discontinua y redondeada.
¿Puedo importar diagramas ASCII existentes?
Sí. Haz clic en el botón de importar y pega tu diagrama ASCII existente. También puedes subir un archivo .txt. Una vez importado, puedes editar y modificar el diagrama con todas las herramientas disponibles.
¿Cuáles son los límites de tamaño del lienzo?
El lienzo predeterminado es de 200 columnas por 100 filas (20,000 celdas). El tamaño máximo es 500 columnas por 300 filas (150,000 celdas). Para la mayoría de diagramas, el tamaño predeterminado es más que suficiente.
¿El editor guarda automáticamente mi trabajo?
Sí. El estado del lienzo se guarda automáticamente en localStorage después de cada edición. Al volver a visitar la página, se restaura el último diagrama. Para almacenamiento permanente, exporta como archivo .txt.
¿Cuáles son los usos comunes de los diagramas ASCII?
Los diagramas ASCII se usan en: comentarios de código fuente, archivos README, especificaciones técnicas y RFCs, herramientas CLI/terminal, correos electrónicos y chats, commits y PRs de git, y documentación de texto plano.
Ejemplos de Código
// ASCII Diagram Drawing Primitives
function createGrid(width, height) {
return Array.from({ length: height }, () =>
Array.from({ length: width }, () => ' ')
);
}
function drawBox(grid, x, y, w, h, mode = 'ascii') {
const c = mode === 'unicode'
? { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' }
: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' };
grid[y][x] = c.tl;
grid[y][x + w - 1] = c.tr;
grid[y + h - 1][x] = c.bl;
grid[y + h - 1][x + w - 1] = c.br;
for (let i = x + 1; i < x + w - 1; i++) {
grid[y][i] = c.h;
grid[y + h - 1][i] = c.h;
}
for (let j = y + 1; j < y + h - 1; j++) {
grid[j][x] = c.v;
grid[j][x + w - 1] = c.v;
}
}
function drawArrow(grid, x1, y1, x2, y2) {
if (y1 === y2) {
const [s, e] = x1 < x2 ? [x1, x2] : [x2, x1];
for (let i = s; i <= e; i++) grid[y1][i] = '-';
grid[y1][x2] = x2 > x1 ? '>' : '<';
} else if (x1 === x2) {
const [s, e] = y1 < y2 ? [y1, y2] : [y2, y1];
for (let j = s; j <= e; j++) grid[j][x1] = '|';
grid[y2][x1] = y2 > y1 ? 'v' : '^';
}
}
function exportText(grid) {
return grid.map(row => row.join('').trimEnd())
.join('\n').replace(/\n+$/, '');
}
// Example: Simple flowchart
const grid = createGrid(30, 12);
drawBox(grid, 5, 0, 12, 3);
for (let i = 6; i < 16; i++) grid[1][i] = ' ';
grid[1][8] = 'S'; grid[1][9] = 't'; grid[1][10] = 'a';
grid[1][11] = 'r'; grid[1][12] = 't';
drawArrow(grid, 10, 3, 10, 4);
drawBox(grid, 3, 5, 16, 3);
drawArrow(grid, 10, 8, 10, 9);
drawBox(grid, 5, 10, 12, 3);
console.log(exportText(grid));