ASCII Diagram Editor - Draw Text Diagrams Online

Draw boxes, arrows, and lines as plain ASCII or Unicode text for code comments, documentation, and README files — 100% client-side, no data sent to server.

100%

200 x 100

Click a tool and start drawing on the canvas

Frequently Asked Questions

What is an ASCII Diagram Editor?

An ASCII Diagram Editor is an online tool that lets you visually draw boxes, lines, arrows, and text using plain ASCII or Unicode characters on a grid-based canvas. Unlike graphical diagram tools that produce image files, this editor outputs pure text that can be embedded directly in source code comments, README files, emails, terminal output, and plain-text documentation. Every character in the output is a standard text character, meaning the diagram is readable without any special rendering software and produces meaningful diffs in version control systems like git.

How do I use this ASCII Diagram Editor?

Select a drawing tool from the toolbar: Box, Line, Arrow, Text, Erase, or Freeform. Click and drag on the canvas to draw. For boxes, drag from one corner to the opposite corner. For lines and arrows, drag from start to end point. Use the Text tool to click anywhere and type text directly. Choose between ASCII mode (+, -, |) and Unicode mode (┌, ─, │) using the character set toggle. When your diagram is complete, click the copy button to copy the plain-text output to your clipboard, or download as a .txt file.

Is my diagram data safe? Does anything get sent to a server?

All drawing and editing operations are performed 100% client-side in your browser. No diagram data, canvas state, or user information is ever transmitted to any server. Your diagrams exist only in your browser's memory and optionally in localStorage for auto-save. This makes the tool completely safe for proprietary architecture diagrams, internal system designs, and security-sensitive documentation.

What is the difference between ASCII and Unicode character modes?

ASCII mode uses basic characters available on every keyboard: + for corners, - for horizontal lines, | for vertical lines. This produces maximally compatible output that renders correctly in every text editor and terminal. Unicode mode uses box-drawing characters like ┌, ─, │ that produce cleaner, more professional-looking diagrams with proper corners and continuous lines. Unicode mode also supports multiple line styles: thin, bold, double, dashed, and rounded corners.

Can I import existing ASCII diagrams?

Yes. Click the import button in the text output panel and paste your existing ASCII art or text diagram into the import area. The text will be placed onto the canvas. You can also upload a .txt file. Once imported, you can edit, extend, or modify the diagram using all available drawing tools.

What are the canvas size limits?

The default canvas is 200 columns by 100 rows (20,000 character cells). The maximum supported size is 500 columns by 300 rows (150,000 cells). For most diagrams like flowcharts, network diagrams, and class hierarchies, the default size is more than sufficient. The editor is optimized to maintain smooth 60fps interaction for typical use cases.

Does the editor auto-save my work?

Yes. Your canvas state is automatically saved to your browser's localStorage after every edit with a 500ms debounce. When you revisit the page, your last diagram is restored automatically. Note that localStorage is browser-specific — switching browsers or clearing browser data will lose the saved diagram. For permanent storage, export your diagram as a .txt file or copy the text to your documentation.

What are common use cases for ASCII diagrams?

ASCII diagrams are widely used in: source code comments (architecture overviews embedded above functions), README files (project structure, component relationships), RFCs and technical specifications (protocol flows, message sequences), terminal/CLI tools (help text, status displays), email and chat (quick diagrams that render in any client), git commits and PRs (inline diagrams that produce meaningful text diffs), and plain-text documentation (man pages, config file comments).

Code Examples

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