ascii-visualizer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ASCII Visualizer

ASCII 可视化工具

Consistent, readable ASCII diagrams for architecture, workflows, file trees, and data visualizations. All output renders correctly in monospace terminals without external tools.

Core principle: Encode information into structure, not decoration. Every diagram element should communicate something meaningful.

用于架构、工作流、文件树和数据可视化的一致性、高可读性ASCII图表。所有输出无需外部工具，即可在等宽终端中正确渲染。

核心原则： 将信息编码到结构中，而非装饰。每个图表元素都应传递有意义的内容。

Box-Drawing Character Reference

框绘字符参考

Standard:  ┌─┐ │ └─┘  ├─┤ ┬ ┴ ┼
Heavy:     ┏━┓ ┃ ┗━┛  ┣━┫ ┳ ┻ ╋
Double:    ╔═╗ ║ ╚═╝  ╠═╣ ╦ ╩ ╬
Rounded:   ╭─╮ │ ╰─╯
Arrows:    → ← ↑ ↓ ─> <─ ──> <──
Blocks:    █ ▓ ░ ▏▎▍▌▋▊▉
Checks:    ✓ ✗ ● ○ ◆ ◇ ★ ☆

Standard:  ┌─┐ │ └─┘  ├─┤ ┬ ┴ ┼
Heavy:     ┏━┓ ┃ ┗━┛  ┣━┫ ┳ ┻ ╋
Double:    ╔═╗ ║ ╚═╝  ╠═╣ ╦ ╩ ╬
Rounded:   ╭─╮ │ ╰─╯
Arrows:    → ← ↑ ↓ ─> <─ ──> <──
Blocks:    █ ▓ ░ ▏▎▍▌▋▊▉
Checks:    ✓ ✗ ● ○ ◆ ◇ ★ ☆

Weight Conventions

线条粗细约定

Weight	Characters	Use For
Standard `─│`	Normal boxes and connectors	Most diagrams
Heavy `━┃`	Emphasis, borders, headers	Key components, outer frames
Double `═║`	Separation, titles	Section dividers, title boxes

粗细级别	字符	适用场景
标准 `─│`	普通方框和连接线	大多数图表
加粗 `━┃`	强调、边框、标题	核心组件、外框
双线条 `═║`	分隔、标题	区域分隔符、标题框

Diagram Patterns

图表模板

Architecture Diagrams

架构图表

┌──────────────┐      ┌──────────────┐
│   Frontend   │─────>│   Backend    │
│   React 19   │      │   FastAPI    │
└──────────────┘      └───────┬──────┘
                              │
                              v
                      ┌──────────────┐
                      │  PostgreSQL  │
                      └──────────────┘

┌──────────────┐      ┌──────────────┐
│   Frontend   │─────>│   Backend    │
│   React 19   │      │   FastAPI    │
└──────────────┘      └───────┬──────┘
                              │
                              v
                      ┌──────────────┐
                      │  PostgreSQL  │
                      └──────────────┘

File Trees with Annotations

带注释的文件树

src/
├── api/
│   ├── routes.py          [M] +45 -12    !! high-traffic path
│   └── schemas.py         [M] +20 -5
├── services/
│   └── billing.py         [A] +180       ** new file
└── tests/
    └── test_billing.py    [A] +120       ** new file

Legend: [A]dd [M]odify [D]elete  !! Risk  ** New

src/
├── api/
│   ├── routes.py          [M] +45 -12    !! high-traffic path
│   └── schemas.py         [M] +20 -5
├── services/
│   └── billing.py         [A] +180       ** new file
└── tests/
    └── test_billing.py    [A] +120       ** new file

Legend: [A]dd [M]odify [D]elete  !! Risk  ** New

Progress Bars

进度条

[████████░░] 80% Complete
+ Design    (2 days)
+ Backend   (5 days)
~ Frontend  (3 days)
- Testing   (pending)

[████████░░] 80% Complete
+ Design    (2 days)
+ Backend   (5 days)
~ Frontend  (3 days)
- Testing   (pending)

Swimlane / Timeline Diagrams

泳道/时间线图表

Backend  ===[Schema]======[API]===========================[Deploy]====>
                |            |                                ^
                |            +------blocks------+             |
                |                               |             |
Frontend ------[Wait]--------[Components]=======[Integration]=+

=== Active work   --- Blocked/waiting   | Dependency

Backend  ===[Schema]======[API]===========================[Deploy]====>
                |            |                                ^
                |            +------blocks------+             |
                |                               |             |
Frontend ------[Wait]--------[Components]=======[Integration]=+

=== Active work   --- Blocked/waiting   | Dependency

Blast Radius (Concentric Rings)

影响范围（同心环）

            Ring 3: Tests (8 files)
       +-------------------------------+
       |    Ring 2: Transitive (5)      |
       |   +------------------------+   |
       |   |  Ring 1: Direct (3)     |   |
       |   |   +--------------+      |   |
       |   |   | CHANGED FILE |      |   |
       |   |   +--------------+      |   |
       |   +------------------------+   |
       +-------------------------------+

            Ring 3: Tests (8 files)
       +-------------------------------+
       |    Ring 2: Transitive (5)      |
       |   +------------------------+   |
       |   |  Ring 1: Direct (3)     |   |
       |   |   +--------------+      |   |
       |   |   | CHANGED FILE |      |   |
       |   |   +--------------+      |   |
       |   +------------------------+   |
       +-------------------------------+

Comparison Tables

对比表格

BEFORE                          AFTER
┌────────────┐                  ┌────────────┐
│  Monolith  │                  │  Service A │──┐
│  (all-in-1)│                  └────────────┘  │  ┌──────────┐
└────────────┘                  ┌────────────┐  ├─>│  Shared  │
                                │  Service B │──┘  │  Queue   │
                                └────────────┘     └──────────┘

BEFORE                          AFTER
┌────────────┐                  ┌────────────┐
│  Monolith  │                  │  Service A │──┐
│  (all-in-1)│                  └────────────┘  │  ┌──────────┐
└────────────┘                  ┌────────────┐  ├─>│  Shared  │
                                │  Service B │──┘  │  Queue   │
                                └────────────┘     └──────────┘

Reversibility Timeline

可逆性时间线

Phase 1  [================]  FULLY REVERSIBLE    (add column)
Phase 2  [================]  FULLY REVERSIBLE    (new endpoint)
Phase 3  [============....]  PARTIALLY           (backfill)
              --- POINT OF NO RETURN ---
Phase 4  [........????????]  IRREVERSIBLE        (drop column)

Phase 1  [================]  FULLY REVERSIBLE    (add column)
Phase 2  [================]  FULLY REVERSIBLE    (new endpoint)
Phase 3  [============....]  PARTIALLY           (backfill)
              --- POINT OF NO RETURN ---
Phase 4  [........????????]  IRREVERSIBLE        (drop column)

Key Rules

关键规则

Rule	Description
Font	Always monospace — box-drawing requires fixed-width
Weight	Standard for normal, Heavy for emphasis, Double for titles
Arrows	`─>` , `──>` , or `│` with `v` / `^` for direction
Alignment	Right-pad labels to match column widths
Annotations	`!!` for risk, `**` for new, `[A/M/D]` for change type
Width	Keep under 80 chars for terminal compatibility
Nesting	Max 3 levels of box nesting before readability degrades

规则	说明
字体	必须使用等宽字体 —— 框绘需要固定宽度
线条粗细	普通内容用标准线条，强调内容用加粗，标题用双线条
箭头	使用 `─>` 、 `──>` ，或配合 `v` / `^` 的 `│` 表示方向
对齐	标签右填充以匹配列宽
注释	`!!` 表示风险， `**` 表示新增， `[A/M/D]` 表示变更类型
宽度	保持在80字符以内以兼容终端
嵌套	方框嵌套最多3层，否则可读性会下降

When to Use Each Pattern

各模板适用场景

Pattern	Use Case
Layered boxes	System architecture, deployment topology
Concentric rings	Blast radius, impact analysis
Timeline bars	Reversibility, migration phases
Swimlanes	Execution order, parallel work streams
Annotated trees	File change manifests, directory structures
Comparison tables	Cross-layer consistency, before/after
Progress bars	Status tracking, completion metrics

模板	适用场景
分层方框	系统架构、部署拓扑
同心环	影响范围、影响分析
时间线进度条	可逆性、迁移阶段
泳道图	执行顺序、并行工作流
带注释的树状图	文件变更清单、目录结构
对比表格	跨层一致性、前后对比
进度条	状态跟踪、完成度指标