用 ASCII 字符画图表(diagrams)是什么?怎么画
ASCII 图表（diagrams）就是用键盘上能直接打出来的字符——- | + / \ < > 以及各种方框符号——拼出方框、箭头和连线，从而在纯文本里表达流程、结构或层级关系。它适合的场景很明确：内容要放进代码注释、README、终端输出、邮件或纯文本笔记，而这些地方不方便贴图片。如果你的图表最终会出现在网页或文档里且允许插图，用绘图软件通常更省事；ASCII 图表的价值在于“任何能显示文字的地方都能显示它”。
ASCII 图表能表达什么
常见的几类：
- 流程图：方框表示步骤，箭头表示走向。
- 结构图 / 层级图：用缩进和树状连线表示父子关系。
- 时序图：用竖线表示时间轴，横向箭头表示消息传递。
- 表格与布局草图：用边框字符画出界面分区。
基本元素只有几种，掌握后就能组合出大部分图形：
| 元素 | 常用字符 | 说明 |
|---|---|---|
| 水平线 | - ═ ─ |
单线、双线、Unicode 细线 |
| 垂直线 | | ║ │ |
注意 | 在部分语法里要转义 |
| 转角 | + ┌ ┐ └ ┘ |
+ 兼容性最好 |
| 箭头 | > < ^ v → ← ↑ ↓ |
方向由字符本身表达 |
| 交叉点 | + ┼ |
表示两条线相交 |
手工画一个简单流程图
以“用户提交表单 → 校验 → 通过则保存，否则报错”为例，步骤是：
- 先定骨架：确定有几个方框、怎么排列。横向排还是纵向排，先想清楚再动手。
- 画方框：用
+做四角，-做上下边，|做左右边。 - 连箭头：从方框边缘引出
-或|，末端加><^v。 - 填文字：文字放在方框内部，保持左右留白对称。
- 对齐检查：逐行数宽度，确保竖线在同一列。
结果大致是这样：
+----------+ +----------+ +----------+
| 提交表单 | --> | 校验 | --> | 保存 |
+----------+ +----------+ +----------+
|
v
+----------+
| 报错 |
+----------+
验证方法：把这段文字粘到目标环境里（代码注释、终端、Markdown 代码块），看竖线是否仍然对齐。如果错位，说明某一行少了或多了空格。
手工画 vs 用工具生成
手工画灵活、零依赖，但改一处往往要重排一片。工具（例如 CASCII 这类 ASCII 图表构建器）的思路是让你在画布上摆放方框和连线，再导出成字符文本，省去逐行对齐的体力活。
选择条件可以这样看：
- 只画一次、图形很小：手工更快，不用学工具。
- 图形复杂、需要反复调整：用工具，改动时对齐由工具保证。
- 环境不允许装东西：手工，或找纯网页版的工具。
- 需要精确控制每个字符：手工，工具导出后仍可能要微调。
CASCII 是一个用原生 JavaScript 写的免费、开源 ASCII 图表构建器（来源：cascii.app 站点描述）。它属于“在浏览器里摆放元素再导出文本”这一类工具，适合不想手工数空格的人。具体功能以站点实际提供的为准。
最容易踩的坑：对齐和字符宽度
ASCII 图表翻车几乎都出在对齐上，原因通常有两个：
一是等宽字体。 ASCII 图表只有在等宽字体下才对齐。放到比例字体（很多网页正文、部分聊天窗口）里，| 会立刻歪掉。所以它最适合代码块、终端、代码编辑器这类默认等宽的环境。
二是全角字符宽度。 中文字、日文假名在等宽字体里通常占两个英文字符的宽度，而 - | 只占一个。方框里写中文时，如果按“一个字符一格”来数，边框就会错位。解决办法：
- 方框内文字尽量用英文或数字；
- 必须用中文时，按“一个汉字 = 两个半角字符”计算宽度，左右补空格凑齐；
- 或者干脆用 Unicode 制表符（
─ │ ┌ ┐）配合支持它的字体，视觉上更整齐，但兼容性不如纯 ASCII。
检查清单：换到目标环境后，确认①字体是等宽、②每行总宽度一致、③中文按双宽计算、④| 没有被 Markdown 表格或某些语法吃掉。
什么时候该用它，什么时候不该
适合：代码注释里的模块关系、README 里的架构草图、终端工具的界面示意、纯文本邮件里的流程说明、需要随代码一起版本管理的图。
不适合：需要精确比例或大量数据的图（用真正的图表工具）、需要颜色和图形的展示（用图片）、读者环境是比例字体且无法控制（对齐无法保证）。
一句话判断：图要跟着纯文本走，就用 ASCII；图要好看或要精确，就别用它。