ASCII图表编辑器 - 在线绘制文本图表

使用ASCII或Unicode文本绘制框、箭头和线条，适用于代码注释和文档 — 100%客户端处理，无数据发送至服务器。

100%

200 x 100

选择工具并在画布上开始绘制

常见问题

什么是ASCII图表编辑器？

ASCII图表编辑器是一个在线工具，可以在基于网格的画布上使用ASCII或Unicode字符可视化地绘制框、线、箭头和文本。与生成图片文件的图形化图表工具不同，该编辑器输出纯文本，可以直接嵌入到源代码注释、README文件、电子邮件、终端输出和纯文本文档中。

如何使用这个ASCII图表编辑器？

从工具栏选择绘图工具：方框、线条、箭头、文本、擦除或自由绘制。在画布上点击并拖动来绘制。使用字符集切换在ASCII模式（+, -, |）和Unicode模式（┌, ─, │）之间选择。图表完成后，点击复制按钮复制到剪贴板，或下载为.txt文件。

我的图表数据安全吗？会发送到服务器吗？

所有绘图和编辑操作100%在浏览器客户端执行。图表数据、画布状态和用户信息不会传输到任何服务器。您的图表仅存在于浏览器内存和用于自动保存的localStorage中。

ASCII模式和Unicode模式有什么区别？

ASCII模式使用基本字符：角落用+，水平线用-，垂直线用|。可在任何文本编辑器和终端中正确显示。Unicode模式使用┌、─、│等制表符字符，生成更整洁专业的图表。Unicode模式还支持5种线条样式：细线、粗线、双线、虚线和圆角。

可以导入现有的ASCII图表吗？

可以。点击导入按钮并粘贴现有的ASCII图表。也可以上传.txt文件。导入后可以使用所有绘图工具进行编辑和修改。

画布大小有什么限制？

默认画布为200列×100行（20,000个单元格）。最大支持500列×300行（150,000个单元格）。对于大多数图表，默认大小已经足够。

编辑器会自动保存吗？

是的。画布状态在每次编辑后自动保存到localStorage。重新访问页面时会自动恢复上次的图表。如需永久保存，请导出为.txt文件。

ASCII图表有哪些常见用途？

ASCII图表广泛用于：源代码注释、README文件、技术规范和RFC、终端/CLI工具、电子邮件和聊天、git提交和PR、纯文本文档。

代码示例

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