ASCII Diagram Editor for Text-Based Drawings
The ASCII diagram editor lets you draw boxes, lines, arrows, and labels directly on a character grid, then copy the result as plain text. Switch between classic ASCII characters and Unicode box-drawing characters for cleaner edges — everything is drawn right in your browser.
Text diagrams are ideal for README files, code comments, technical docs, and chat, because they render anywhere a fixed-width font does — no images to host and no special viewer needed. It is built for developers, technical writers, and anyone documenting a flow, architecture, or layout in plain text.
How to Draw an ASCII Diagram
Pick a drawing tool
Choose a tool from the toolbar or press its shortcut: B Box, L Line, A Arrow, T Text, E Eraser, or V Select.
Choose a character set
Toggle between Unicode box-drawing characters (┌ ─ │ →) for crisp corners or ASCII (+ - | >) for maximum compatibility. New shapes use whichever set is active.
Draw on the grid
Click and drag to draw boxes, lines, and arrows with a live preview. With the Text tool, click a cell and start typing. Use Select to drag, copy, or delete a region.
Copy or export
Click Copy to put the diagram on your clipboard, or Export to download it as a .txt file. Trailing whitespace is trimmed automatically for clean output.
Features
Six Drawing Tools
Box, Line, Arrow, Text, Eraser, and Select cover every common diagramming need, each with a live preview as you drag.
Boxes, Lines & Arrows
Drag out rectangles with proper corners, draw horizontal or vertical lines, and add arrows with directional arrowheads.
Type Text Anywhere
Click any cell with the Text tool and type labels directly on the canvas, moving the cursor with the arrow keys.
ASCII & Unicode Sets
Switch between classic ASCII (+ - |) for universal compatibility and Unicode box-drawing characters (┌ ─ │ →) for cleaner visuals.
Select, Move & Copy
Drag a selection around part of your diagram, then move it, copy just that region, or delete it in place.
Undo & Redo
Step backward and forward through your edits with up to 50 history states using Ctrl+Z and Ctrl+Y.
Adjustable Canvas
Widen or narrow the canvas from 20 to 200 columns, with a grid background that aligns precisely with each character cell.
Keyboard Shortcuts
Switch tools with single keys (V, B, L, A, T, E) and run undo, redo, and copy with familiar Ctrl shortcuts.
Copy & Export
Copy the whole diagram to your clipboard or download it as a plain .txt file, with trailing whitespace trimmed for tidy output.
Mouse & Touch
Draw with a mouse or trackpad on desktop, or use touch input on tablets and phones for on-the-go edits.
Frequently Asked Questions
What is an ASCII diagram?
An ASCII diagram is a drawing made entirely of text characters — boxes, lines, and arrows built from symbols like +, -, |, and >. Because it is plain text, it displays in any editor, terminal, or code viewer without needing image support.
How do I make an ASCII diagram online?
Pick a tool from the toolbar, then click and drag on the grid to draw boxes, lines, and arrows, or use the Text tool to type labels. When you are done, click Copy or Export to take the diagram with you — there is nothing to install.
What is the difference between ASCII and Unicode mode?
ASCII mode uses basic characters like +, -, and | that work in every text environment. Unicode mode uses dedicated box-drawing characters like ┌, ─, and │ that look cleaner but require Unicode support in the viewer.
Can I switch character sets after drawing?
Yes. Switching only affects new shapes you draw — characters already on the canvas stay unchanged. That means you can mix both styles in a single diagram if you need to.
How do I add ASCII diagrams to code comments or a README?
Draw your diagram, click Copy, then paste it into your comment block or Markdown file. For README and Markdown, wrap the diagram in a fenced code block (three backticks) so the fixed-width font keeps every character aligned.
How do I move or copy part of a diagram?
Switch to the Select tool (press V), drag a box around the area you want, then drag it to a new position. Press Ctrl+C to copy just that region, or Delete to clear it.
Can I undo my changes?
Yes. The editor keeps up to 50 history states, so press Ctrl+Z to undo and Ctrl+Y to redo your way through recent edits.
How do I export my diagram as text?
Click Copy to put the whole diagram on your clipboard, or click Export to download it as a .txt file. Both options trim trailing whitespace so the output stays clean when you paste it elsewhere.
Does the editor work on mobile devices?
Yes, it supports touch input so you can draw on a tablet or phone. For precise character placement, a desktop browser with a mouse or trackpad still gives the best experience.
No comments yet. Be the first to comment!