ASCII Visualizer Skill | Agent Skills

ASCII Visualizer

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.

Box-Drawing Character Reference

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  │
                      └──────────────┘

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

Progress Bars

[████████░░] 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

Blast Radius (Concentric Rings)

            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   │
                                └────────────┘     └──────────┘

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)

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 |

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 |

Related Skills

brainstorm — Design exploration where diagrams communicate ideas
architecture-patterns — System architecture that benefits from ASCII diagrams
code-review-playbook — Review comments with inline diagrams

Agent Skills: ASCII Visualizer

Install this agent skill to your local

Skill Files