ASCII diagram patterns for architecture, workflows, file trees, and data visualizations. Use when creating terminal-rendered diagrams, box-drawing layouts, progress bars, swimlanes, or blast radius visualizations.

Reference low

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

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

The system has a frontend that talks to a backend API which uses
a database and a cache layer. There's also a message queue for
async processing.

Correct — layered architecture diagram:

┌─────────────────────────────────────────────────────┐
│                    Load Balancer                      │
└──────────┬──────────────────────────┬────────────────┘
           │                          │
┌──────────v──────────┐  ┌───────────v────────────┐
│   API Gateway       │  │   API Gateway          │
│   (instance 1)      │  │   (instance 2)         │
└──────────┬──────────┘  └───────────┬────────────┘
           │                          │
           └──────────┬───────────────┘
                      │
        ┌─────────────┼────────────────┐
        │             │                │
┌───────v──────┐ ┌────v─────┐ ┌───────v──────┐
│  PostgreSQL  │ │  Redis   │ │  RabbitMQ    │
│  (primary)   │ │  (cache) │ │  (queue)     │
└──────────────┘ └──────────┘ └──────────────┘

Blast Radius Visualization

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

Direct dependents:   auth.py, routes.py, middleware.py
Transitive:          app.py, config.py, utils.py, cli.py, server.py

Reversibility Timeline

REVERSIBILITY TIMELINE
Phase 1  [================]  FULLY REVERSIBLE    (add column, nullable)
Phase 2  [================]  FULLY REVERSIBLE    (new endpoint, additive)
Phase 3  [============....]  PARTIALLY           (backfill data)
              --- POINT OF NO RETURN ---
Phase 4  [........????????]  IRREVERSIBLE        (drop old column)
Phase 5  [================]  FULLY REVERSIBLE    (frontend toggle)

Comparison Tables

CROSS-LAYER CONSISTENCY
Backend Endpoint          Frontend Consumer     Status
POST /invoices            createInvoice()       PLANNED
GET  /invoices/:id        useInvoice(id)        PLANNED
GET  /invoices            InvoiceList.tsx        MISSING  !!

Key Patterns

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

Use consistent box-drawing characters and formatting for correct terminal rendering — MEDIUM

ASCII Diagram Fundamentals

Incorrect — inconsistent characters and alignment:

+-------+    +-------+
| Frontend | -> | Backend |
+-------+    +-------+
              |
          +--------+
          | Database |
          +--------+

Correct — proper box-drawing characters with alignment:

Box-Drawing Characters:
┌─┐│└─┘  Standard weight
┏━┓┃┗━┛  Heavy weight
├─┤┬┴    Connectors
╔═╗║╚═╝  Double lines

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

Progress Tracking

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

File Trees

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

Workflow Diagrams

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

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

Key Rules

Rule	Description
Font	Always monospace — box-drawing characters require fixed-width
Weight	Standard (─│) for normal, Heavy (━┃) for emphasis
Arrows	Use ─>, ──>, or │ with v/^ for direction
Alignment	Right-pad labels to match column widths
Annotations	Use !! for risk, ** for new, [A/M/D] for change type

Ascii Visualizer

ASCII Visualizer

Box-Drawing Character Reference

Weight Conventions

Diagram Patterns

Architecture Diagrams

File Trees with Annotations

Progress Bars

Swimlane / Timeline Diagrams

Blast Radius (Concentric Rings)

Comparison Tables

Reversibility Timeline

Key Rules

When to Use Each Pattern

Rules (2)

Create structured ASCII architecture diagrams to communicate system design without external tools — MEDIUM

ASCII Architecture Visualization Patterns

Blast Radius Visualization

Reversibility Timeline

Comparison Tables

Key Patterns

Use consistent box-drawing characters and formatting for correct terminal rendering — MEDIUM

ASCII Diagram Fundamentals

Progress Tracking

File Trees

Workflow Diagrams

Key Rules

On this page