# ASCII Visualizer

> Create beautiful ASCII art visualizations for plans, architectures, workflows, and data

- Skill: `yonatangross/ascii-visualizer` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add yonatangross/ascii-visualizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yonatangross/ascii-visualizer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yonatangross (https://skillmd.com/u/yonatangross)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yonatangross/ascii-visualizer

---


# ASCII Visualizer Skill

Create clear ASCII visualizations for explaining complex concepts.

## When to Use

- Explaining system architecture
- Showing workflow steps
- Displaying progress/metrics
- Before/after comparisons
- File/directory structures

## Box-Drawing Characters

**IMPORTANT:** Use a fixed-width (monospace) font for proper rendering.

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

## Quick Examples

### Architecture
```
┌──────────────┐      ┌──────────────┐
│   Frontend   │─────▶│   Backend    │
│   React 19   │      │   FastAPI    │
└──────────────┘      └───────┬──────┘
                              │
                              ▼
                      ┌──────────────┐
                      │  PostgreSQL  │
                      └──────────────┘
```

### Progress
```
[████████░░] 80% Complete
✅ Design    (2 days)
✅ Backend   (5 days)
🔄 Frontend  (3 days)
⏳ Testing   (pending)
```

See `references/` for complete patterns.