ascii-explainer

Explains code, algorithms, system design using ASCII diagrams. Trigger phrases - "explain visually", "I don't get it", "show me", "ascii diagram", "help me understand". Produces diagram-first explanations ending with TL;DR tables.

16 stars

Best use case

ascii-explainer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Explains code, algorithms, system design using ASCII diagrams. Trigger phrases - "explain visually", "I don't get it", "show me", "ascii diagram", "help me understand". Produces diagram-first explanations ending with TL;DR tables.

Teams using ascii-explainer should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ascii-explainer/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/devops/ascii-explainer/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ascii-explainer/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ascii-explainer Compares

Feature / Agentascii-explainerStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Explains code, algorithms, system design using ASCII diagrams. Trigger phrases - "explain visually", "I don't get it", "show me", "ascii diagram", "help me understand". Produces diagram-first explanations ending with TL;DR tables.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

## Thinking

Before drawing, DIAGNOSE:
1. **Mental Model Gap**: What does user THINK vs what IS true? Name both.
2. **Primitive**: Which structure captures the essence? (see Quick Pick below)
3. **Hierarchy**: ONE main thing + 2-3 supporting details. Max 6 boxes.
4. **Verify**: Can diagram be understood WITHOUT surrounding text?

**CRITICAL**: Diagnosis IS the skill. Surfacing "user assumes X, but actually Y" is the value—not drawing boxes.

---

## Quick Pick (90% of cases)

| If the concept has... | Use | ASCII Pattern |
|-----------------------|-----|---------------|
| Steps in order | **DAG** | `A → B → C` |
| States + events | **State Machine** | `[S1] --evt--> [S2]` |
| Parent-child hierarchy | **Tree** | `Root` with `/` `\` branches |
| Cycles/feedback | **Graph** | Arrows that loop back |
| Stages that transform | **Pipeline** | `[Stage1] ──▶ [Stage2]` |
| 2D relationships | **Matrix** | Grid with `┌─┬─┐` |

For full primitive taxonomy → see `PRIMITIVES.md`

---

## Primitive Selection Flowchart

```
Continuous (infinite states)? ──Yes──▶ MANIFOLD
         │No
Time/order focused? ──Yes──▶ SEQUENCE│QUEUE│STACK│PIPELINE│TIMELINE
         │No
Concurrent states? ──Yes──▶ PETRI NET
         │No
States + transitions? ──Yes──▶ STATE MACHINE
         │No
Two distinct node types? ──Yes──▶ BIPARTITE
         │No
Edges connect 3+ nodes? ──Yes──▶ HYPERGRAPH
         │No
Partial ordering? ──Yes──▶ LATTICE
         │No
Spatial cells? ──Yes──▶ GRID
         │No
N-dimensional? ──Yes──▶ TENSOR/MATRIX
         │No
Direction matters? ──No──▶ UNDIRECTED GRAPH
         │Yes
Can loop back? ──Yes──▶ CYCLIC GRAPH
         │No
Multiple parents? ──Yes──▶ DAG
         │No──▶ TREE
```

---

## Process

### 1. Clarify (1 question max)
- What are the "things"? (nodes/states/events)
- What are the "connections"? (edges/transitions/order)
- Can you loop back?

If obvious, skip.

### 2. Identify Primitive
Use Quick Pick or flowchart. State: "This is a [PRIMITIVE] because [ONE REASON]."

### 3. Render ASCII
- Max 20 lines
- Use: `─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ ← → ↑ ↓ ● ○ █`
- Label with user's domain terms

### 4. Verify
"Does this capture the structure? What's missing?"

---

## Output Structure

```
[1-line context]

┌─────────────────────────────────────┐
│     WHAT [USER/ISSUE] ASSUMES:      │
├─────────────────────────────────────┤
│  [Their mental model]               │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│          ACTUAL STATE:              │
├─────────────────────────────────────┤
│  [Reality]                          │
│     ↑ key difference                │
└─────────────────────────────────────┘

Primitive: [NAME] — "[reason]"

[ASCII DIAGRAM]

┌─────────┬────────────┬─────────────┐
│ Aspect  │  Assumed   │   Actual    │
├─────────┼────────────┼─────────────┤
│ X       │ state A    │  state B    │
└─────────┴────────────┴─────────────┘

★ Insight ─────────────────────────────
[Transferable lesson]
───────────────────────────────────────
```

---

## Constraints

- Emoji sparingly: 🟣🔵🟢 for state, ✓✗⚠️ for status
- Nested concepts: 3-space indent
- Pointer annotations: `↑` or `←` with 1-line labels
- Never: prose paragraphs first, box soup, mixed styles (`+--+` with `┌──┐`)

Related Skills

asciinema-streaming-backup

16
from diegosouzapw/awesome-omni-skill

Real-time asciinema backup to GitHub orphan branch. TRIGGERS - streaming backup, asciinema backup, session backup, recording backup.

asciinema-player

16
from diegosouzapw/awesome-omni-skill

Play .cast terminal recordings in iTerm2. TRIGGERS - asciinema play, .cast file, play recording, recording playback.

asciinema-converter

16
from diegosouzapw/awesome-omni-skill

Convert .cast recordings to .txt for analysis. TRIGGERS - convert cast, cast to txt, strip ANSI, batch convert.

asciinema-cast-format

16
from diegosouzapw/awesome-omni-skill

Asciinema v3 .cast file format reference. TRIGGERS - cast format, asciicast spec, event codes, parse cast file.

asciinema-analyzer

16
from diegosouzapw/awesome-omni-skill

Semantic analysis of asciinema recordings. TRIGGERS - analyze cast, keyword extraction, find patterns in recordings.

ascii-diagrams

16
from diegosouzapw/awesome-omni-skill

Create and fix ASCII diagrams, tables, wireframes, box-drawings. Use when message contains Unicode box characters (┌┐└┘│─), user asks to create/fix text visualization, align borders, or fix broken ASCII art. Triggers on "поправ діаграму", "fix diagram", "create table", "вирівняй", "align boxes".

ascii-diagram-validator

16
from diegosouzapw/awesome-omni-skill

Validate ASCII diagram alignment in markdown. TRIGGERS - diagram alignment, ASCII art, box-drawing diagrams.

ascii-diagram-creator

16
from diegosouzapw/awesome-omni-skill

Create ASCII diagrams from workflow definitions and save them as image files (PNG, SVG, etc.)

ascii-art-diagrams

16
from diegosouzapw/awesome-omni-skill

MUST be loaded before creating any ASCII art or text-based diagrams in markdown files. Provides mandatory workflow for properly aligned diagrams. You MUST follow the PLAN, DRAW, VERIFY phases in order. Do NOT skip any phase. Do NOT take shortcuts. Follow the workflow precisely. Diagrams that do not follow this workflow will be rejected. Before proceedig with work, confirm that you understand the entire workflow and will follow it for every diagram you create. You are not to proceed unless you are going to follow the process exactly. You MUST confirm that each step is followed before and after every diagram you create.

Code Explainer

16
from diegosouzapw/awesome-omni-skill

Explains code in plain English. Paste any code snippet and get a clear, detailed explanation of what it does, how it works, and why it's written that way. No tools required - pure LLM reasoning.

ascii-ui-designer

16
from diegosouzapw/awesome-omni-skill

Create high-quality ASCII art UI/UX previews for web development with a two-phase approach. Phase 1: Design & Preview - visualize interfaces, explore layouts, refine ideas in ASCII format without code. Phase 2: Implementation - when ready, get HTML/CSS/React code and design tokens. Use for exploring ideas, getting stakeholder feedback, and iterating on design before development.

ascii-design-reviewer

16
from diegosouzapw/awesome-omni-skill

Review Phase 1 ASCII UI designs from a product owner perspective. Analyze user journeys, identify potential issues, ask clarifying questions about requirements and user flows, create Mermaid diagrams (flowcharts, sequence diagrams, state charts), provide detailed system behavior documentation, and document error handling strategies. Use when reviewing ASCII mockups to validate design against actual user needs, understand system workflows, and ensure completeness before moving to implementation.