Sketch architecture, flow and sequence diagrams as plain text: drag to draw boxes and arrows, click to type labels, then copy the result straight into a code comment, commit message or README. Lines join automatically where they meet.
Last updated:
Drag on the grid to draw a box.
×
Import existing ASCII text
Advertisement
Advertisement
How to use the ASCII Diagram Editor
Pick a line style: ASCII works everywhere; the Unicode styles look sharper in modern editors and on GitHub.
Drag with the Box tool to draw boxes, then switch to Arrow and drag from one box to another.
Add labels with Text: click a cell and type. Enter moves to the next line; Esc finishes.
Rearrange with Select: drag around an area, then drag inside it to move it or press Delete to clear it.
Copy the diagram, optionally wrapped as a Markdown code block or a code comment, or download it as a .txt file.
Box-drawing characters at a glance
Piece
ASCII
Unicode light
Rounded
Heavy
Double
Horizontal
-
─ U+2500
─
━ U+2501
═ U+2550
Vertical
|
│ U+2502
│
┃ U+2503
║ U+2551
Corners
+
┌ ┐ └ ┘
╭ ╮ ╰ ╯
┏ ┓ ┗ ┛
╔ ╗ ╚ ╝
T junctions
+
├ ┤ ┬ ┴
├ ┤ ┬ ┴
┣ ┫ ┳ ┻
╠ ╣ ╦ ╩
Cross
+
┼ U+253C
┼
╋ U+254B
╬ U+256C
Arrow heads
> < ^ v
► ◄ ▲ ▼ (U+25BA, U+25C4, U+25B2, U+25BC)
The Unicode characters come from the Box Drawing block (U+2500 to U+257F). They are designed to fill the whole character cell so lines join without gaps, provided the text is shown in a monospaced font.
Tips for diagrams that survive copy and paste
Keep it narrow: about 72 to 80 characters wide fits code review tools, terminals and most style guides' line limits.
Use spaces, never tabs: tab width differs between editors, which shifts columns. The editor always exports spaces.
Leave a blank column around boxes so labels and arrows stay readable and junctions do not form by accident.
Prefer ASCII for terminals and logs; some fonts in older terminals draw Unicode box characters with gaps or at double width.
Label arrows, not just boxes: a short verb such as reads, publishes or HTTPS next to each arrow explains the flow.
Wrap it in a code block in Markdown, wikis and chat apps so the spacing is preserved.
An ASCII diagram is a drawing made only of text characters, such as + - | for boxes and > for arrow heads. Because it is plain text it can live inside source code, terminal output, emails and README files, and it shows up in diffs and code review like any other text.
Should I use the ASCII or the Unicode line style?
Plain ASCII (+ - |) displays correctly in every editor, terminal and font. Unicode box-drawing characters (┌─┐) look cleaner and connect seamlessly, and they render well on GitHub, GitLab and in modern editors, but a few older tools and some fonts may show them unevenly or at a different width.
How do I put the diagram in a README so it keeps its shape?
Choose Wrap as: Markdown code block and paste the result. A fenced code block is shown in a monospaced font with spaces preserved; without it, Markdown collapses the spacing and the diagram falls apart.
How do I add a diagram to a code comment?
Pick the comment style for your language (// for C, Java, JavaScript, Go; # for Python, shell, YAML; -- for SQL and Lua; or a /* */ block) and copy. Every line is prefixed and trailing spaces are removed so linters stay quiet.
How do connected lines get the right corner characters?
Each line character records which directions it connects (up, right, down, left). When you draw over an existing line, the directions are combined and the matching character is chosen, so a line that meets a box edge becomes a T junction and two crossing lines become a cross.
Can I edit a diagram I made earlier?
Yes. Your current drawing is saved in this browser automatically. To edit a diagram from a file or a code comment, paste it under Import existing ASCII text (remove comment markers first) and click Load text into the grid.
Does it work on a phone or tablet?
Yes. Drawing works with touch, and the Scroll tool lets you swipe around a large grid without drawing. A physical keyboard or the on-screen keyboard can be used with the Text tool.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.