ASCII 다이어그램 에디터 - 텍스트 다이어그램 온라인 편집

// 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));