为什么 ASCII 线框图（Wireframe）一出现中文就对不齐？是字体问题，还是 Unicode 字符宽度导致的？

最近在用 AI 生成 ASCII 线框图时，发现只要内容里出现中文，就很容易出现对齐问题。

例如：

+---------------+

|  /Lesson      |

|  事後回顧      |

+---------------+

理论上，两行内容都是从同一列开始，但实际在很多终端、Markdown 编辑器或代码编辑器中显示时，视觉上却没有垂直对齐。

查了一些资料后，大概了解到原因主要有几点：

• ASCII 字符通常属于半角字符（宽度为 1 ）。


• 中文、日文、韩文（ CJK ）字符通常属于全角字符（宽度约为 2 ）。


• 不同字体、终端和 Markdown 渲染器，对 CJK 字符宽度的处理并不完全一致。


• 有些编辑器虽然英文使用等宽字体，但中文会自动回退到非等宽字体，因此即使字符宽度理论正确，显示效果仍然会错位。

目前看到的几种解决方案包括：

• 使用支持 CJK 的等宽字体，例如 Sarasa Mono 、Maple Mono 、LXGW Mono 等。


• 程序生成 ASCII 图时，不使用 len() 计算字符串长度，而是使用 wcwidth 、string-width 等库计算字符显示宽度。


• 使用 Unicode Box Drawing （┌ ─ │ ┘）代替传统 ASCII (+ - |)。


• 如果需要展示中英文混排的结构图，考虑改用 Mermaid 、Markdown Table 、HTML 或 SVG ，而不是 ASCII 图。

我发现使用 Maple Mono 字体，是一个非常简单有效的方案。 如下：

另外，想请教一下大家：

1. 大家在日常开发中遇到过类似的问题吗？


2. 有没有哪个终端、编辑器或字体，对 CJK 的等宽显示支持得比较好？


3. 如果需要生成可跨平台展示的文本线框图，目前有没有比较成熟的最佳实践？

欢迎分享你的经验或踩过的坑！