home / skills / yonatangross / orchestkit / ascii-visualizer

ascii-visualizer skill

safe

This skill creates clear ASCII diagrams to visualize architecture, workflows, and data flows in text for documentation and planning.

npx playbooks add skill yonatangross/orchestkit --skill ascii-visualizer

Review the files below or copy the command above to add this skill to your agents.

Files (8)

SKILL.md

2.9 KB

---
name: ASCII Visualizer
description: Use when visualizing architecture, data flows, or system diagrams in text. Creates ASCII visualizer diagrams for plans, workflows, and structures.
version: 1.0.0
context: inherit
tags: [ascii, visualization, diagrams, architecture, 2025]
author: OrchestKit
user-invocable: false
---

# ASCII Visualizer Skill

Create clear ASCII visualizations for explaining complex concepts.

## 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.

## Related Skills

- `architecture-decision-record` - Document decisions that ASCII diagrams help visualize
- `brainstorming` - Use visualizations to explore and communicate ideas
- `explore` - Visualize codebase structure during exploration

## Capability Details

### architecture-diagrams
**Keywords:** architecture, diagram, system design, components, flow
**Solves:**
- How do I visualize system architecture?
- Show component relationships with ASCII
- Explain system design visually
- Create architecture diagrams in documentation

### workflows
**Keywords:** workflow, process, steps, pipeline, flowchart
**Solves:**
- How do I visualize process flow?
- Show step-by-step workflow with ASCII
- Explain pipeline stages visually
- Document multi-agent workflows

### comparisons
**Keywords:** compare, vs, before after, metrics, changes
**Solves:**
- How do I compare two options visually?
- Show before/after metrics
- Display progress comparison
- Visualize A/B testing results

### file-trees
**Keywords:** file tree, directory, structure, folder hierarchy
**Solves:**
- How do I show directory structure?
- Visualize file hierarchy with ASCII
- Explain codebase organization
- Document project structure

### progress-tracking
**Keywords:** progress, status, completion, percentage, metrics
**Solves:**
- How do I show progress visually?
- Create progress bars with ASCII
- Display completion status
- Track task completion metrics

Overview

This skill creates clear, production-ready ASCII visualizations for architecture, workflows, file trees, comparisons, and progress tracking. It generates fixed-width diagrams using box-drawing and block characters so designs remain readable in plain-text environments. Use it to convey system structure and flows where images are impractical or when documentation must remain text-first.

How this skill works

The skill accepts a description of components, connections, or steps and returns an ASCII diagram using standard and heavy box-drawing characters, connectors, and progress blocks. It chooses layout patterns (horizontal flows, vertical stacks, trees, and progress bars) and aligns labels to fit monospace rendering. Output is optimized for insertion into READMEs, RFCs, issue comments, chat, or code comments.

When to use it

Document system architecture in text-only environments
Explain multi-service data flows and interactions
Show pipelines, CI/CD stages, or multi-step workflows
Render file trees and codebase structure inline
Display progress bars and status summaries in logs or PRs

Best practices

Always view output in a monospace font to preserve alignment
Provide clear component names and desired direction (left-to-right, top-down) for best layout
Keep labels concise to avoid line-wrapping and layout shifts
Prefer standard weight box-drawing for portability; use heavy/double only when terminal/display supports them
Use the skill to produce diagrams that complement, not replace, detailed textual explanations

Example use cases

Architecture diagram for React frontend → FastAPI backend → PostgreSQL
Workflow for a data pipeline: ingest → transform → store → report
File tree showing project structure and important modules
Progress dashboard for a sprint: completed, in-progress, blocked tasks
Before/after comparison diagram to illustrate an architecture migration

FAQ

Will diagrams render correctly in any terminal or editor?

Most terminals and editors that support UTF-8 and a monospace font will render box-drawing characters correctly. If characters appear broken, switch to a monospace font or choose standard ASCII alternatives.

Can I control diagram orientation and detail level?

Yes. Provide the desired orientation (left-to-right or top-down) and indicate whether to include component details. The skill adapts layout and label placement to match the requested level of detail.