用 ASCII 字符“画图”(drawing)是什么?能画哪些图、怎么画

用 ASCII 字符“画图”指的是:在纯文本环境里,用 + - | / \ 这类 ASCII 符号,以及 Unicode 的制表符、箭头、块元素,拼出方框、连线、表格、流程图等图形。它不产生像素或矢量图像,产物是一段可以复制进代码注释、终端、聊天窗口的文本。适合需要“图跟着文字走”的场景;如果你要的是可缩放、带颜色的正式插图,应该用图形软件而不是字符画。

它和普通绘画、图形软件的区别

维度 ASCII/Unicode 字符画 像素/矢量绘图
产物 一段纯文本 图片文件或图形对象
依赖 等宽字体、字符对齐 渲染器、分辨率
可编辑性 任何文本编辑器都能改 需要图形软件
典型用途 代码注释、终端界面、README、聊天 演示、印刷、界面设计
主要难点 手工对齐、宽度一致 布局与视觉设计

关键机制是“网格对齐”:字符画把画面切成一个个等宽的字符格子,每个格子放一个符号,靠行列位置表达形状。所以它成立的前提是显示环境使用等宽字体,且所有字符占同样的宽度。

能画哪些图

  • 方框与边框:用 + 做角、- 做横线、| 做竖线,围出矩形或分区。
  • 箭头与连线:用 ->、<--、--> 表示方向,用 |、/、\ 走折线。
  • 表格:行列用 + 和 - 分隔,内容填在格子里。
  • 树状图:用 |、+--、\-- 表达层级,常见于目录结构。
  • 流程图:方框加箭头,串起判断和步骤。
  • 时序图:竖线代表参与者,横向箭头代表消息,按时间从上往下排。

常用字符集

ASCII 基础符号(兼容性最好,任何环境都能显示):

+  -  |  /  \  <  >  ^  v  *  =

Unicode 制表符与箭头(更整齐、更省字符,但需要字体支持):

┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ ─ │
→ ← ↑ ↓ ▶ ◀ ▲ ▼
█ ▓ ▒ ░  (块元素,可做填充或进度条)

选择原则:如果目标环境可能不支持 Unicode(老终端、某些代码页),优先用 ASCII;如果确定字体支持,Unicode 制表符能让边框连续、少用角字符,观感更好。

基本画法

  1. 先定网格:在纸上或编辑器里想好每行放什么、每列多宽,确定整体尺寸。
  2. 画外框:先搭最外层矩形,确定边界。
  3. 填内容与连线:在框内写文字,用箭头和折线连接各块。
  4. 检查对齐:在等宽字体下逐行核对竖线是否在同一列、横线是否连续。
  5. 验证:把结果粘贴到最终使用环境(终端、代码注释、聊天)里再看一遍,确认没有变形。

手工对齐在图形复杂时很费时,可以用 CASCII 这类 ASCII 图表构建器来降低对齐成本——它是在浏览器里运行的 ASCII 图表工具,用纯 JavaScript 写成,属于免费、开源项目。用它可以在可视化界面里摆放方框和连线,由工具处理字符位置,减少手工数格子的错误。

常见失败与卡点

  • 字体非等宽:比例字体会让竖线错位、方框歪斜。解决方法是确认使用等宽字体。
  • 中英文混排宽度不一致:一个汉字通常占两个英文字符宽,混排时列会对不齐。要么统一用英文,要么按“汉字算两格”预留宽度。
  • 复制后变形:粘贴到聊天、网页或不同编辑器时,换行、字体或空白处理可能改变布局。解决方法是粘贴后重新检查,必要时改用 ASCII 基础符号提高兼容性。
  • Unicode 符号显示为方块:目标环境字体不含该字符。回退到 ASCII 符号即可。
  • 制表符与空格混用:Tab 的宽度因环境而异,容易破坏对齐,建议统一用空格。
cascii.app
A free, open-source ASCII diagram builder written in vanilla Javascript
horseartist.com
Thomas Allen Pauly, the official equine portrait artist of the 2006 Kentucky Derby & 2011 Iroquois Steeplechase, has been portraying the beauty and...