# Ascii Artist > Create beautiful ASCII art, diagrams, banners, and text graphics. Use when asked for ASCII art, text diagrams, CLI graphics, terminal banners, or plaintext visuals. - Skill: `diegosouzapw/ascii-artist` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add diegosouzapw/ascii-artist` - Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/ascii-artist/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: diegosouzapw (https://skillmd.com/u/diegosouzapw) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/diegosouzapw/ascii-artist --- # ASCII Artist Create ASCII art with craft. Every character is a pixel. The constraint is the gift. ## Philosophy ASCII art is typography at its limit. The monospace grid is your canvas. Whitespace is not empty — it is structure. **Principles:** - Choose characters for their visual weight, not their meaning - Respect the grid — alignment is everything - Less is more — don't fill every space - Test in monospace — it will look different in proportional fonts ## Character Palette ### Weight Scale (Light to Heavy) ``` Light: . · ˙ ' ` Medium: - ~ = + * : ; Heavy: # @ % & $ Block: ░ ▒ ▓ █ ``` ### Lines and Structure ``` Horizontal: - = _ ─ ━ Vertical: | │ ┃ Diagonal: / \ Corners: + ┌ ┐ └ ┘ ╭ ╮ ╰ ╯ T-joins: ├ ┤ ┬ ┴ ┼ Double: ═ ║ ╔ ╗ ╚ ╝ ╠ ╣ ╦ ╩ ╬ Rounded: ╭ ╮ ╰ ╯ ``` ### Arrows ``` Simple: <- -> ^ v Fancy: ← → ↑ ↓ ↔ ↕ Triangle: ◀ ▶ ▲ ▼ ``` ### Shapes ``` Dots: · • ● Squares: □ ■ ▪ ▫ Circles: ○ ● ◯ ◉ Stars: * ✱ ✳ ★ ☆ ``` ## Banners ### Simple Box Banner ``` ┌─────────────────────┐ │ YOUR TEXT HERE │ └─────────────────────┘ ``` ### Double Line Banner ``` ╔═════════════════════╗ ║ YOUR TEXT HERE ║ ╚═════════════════════╝ ``` ### Rounded Banner ``` ╭─────────────────────╮ │ YOUR TEXT HERE │ ╰─────────────────────╯ ``` ### Shadow Banner ``` ┌─────────────────────┐ │ YOUR TEXT HERE │▒ └─────────────────────┘▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ``` ### Big Text (Block Letters) ``` ██╗ ██╗███████╗██╗ ██╗ ██████╗ ██║ ██║██╔════╝██║ ██║ ██╔═══██╗ ███████║█████╗ ██║ ██║ ██║ ██║ ██╔══██║██╔══╝ ██║ ██║ ██║ ██║ ██║ ██║███████╗███████╗███████╗╚██████╔╝ ╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ``` ### Minimal Big Text ``` _ _ ___ _ _ ___ | || || __|| | | | / _ \ | __ || _| | |__| |_| (_) | |_||_||___||____|____\___/ ``` ### Slant Style ``` __ __________ __ ____ / / / / ____/ / / / / __ \ / /_/ / __/ / / / / / / / / / __ / /___/ /___/ /___/ /_/ / /_/ /_/_____/_____/_____/\____/ ``` ## Diagrams ### Flowchart ``` ┌─────────┐ ┌─────────┐ ┌─────────┐ │ Start │────▶│ Process │────▶│ End │ └─────────┘ └─────────┘ └─────────┘ │ ▼ ┌─────────┐ │ Branch │ └─────────┘ ``` ### Tree Structure ``` project/ ├── src/ │ ├── components/ │ │ ├── Button.tsx │ │ └── Card.tsx │ ├── utils/ │ │ └── helpers.ts │ └── index.ts ├── package.json └── README.md ``` ### Architecture Diagram ``` ┌──────────────────────────────────────────┐ │ Client │ └──────────────────┬───────────────────────┘ │ ▼ ┌──────────────────────────────────────────┐ │ API Gateway │ └───────┬──────────────────────┬───────────┘ │ │ ▼ ▼ ┌───────────────┐ ┌───────────────┐ │ Service A │ │ Service B │ └───────┬───────┘ └───────┬───────┘ │ │ └──────────┬───────────┘ ▼ ┌───────────────┐ │ Database │ └───────────────┘ ``` ### Timeline ``` ──●────────●────────●────────●────────●──▶ │ │ │ │ │ v1.0 v1.1 v2.0 v2.1 v3.0 Jan Mar Jun Sep Dec ``` ### Table ``` ┌──────────┬───────────┬─────────┐ │ Name │ Role │ Status │ ├──────────┼───────────┼─────────┤ │ Alice │ Engineer │ Active │ │ Bob │ Designer │ Active │ │ Carol │ Manager │ Away │ └──────────┴───────────┴─────────┘ ``` ## Decorative Elements ### Dividers ``` ───────────────────────────────────────── ═════════════════════════════════════════ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ • • • • • • • • • • • • • • • • • • • • • ─────────────────●───────────────── ════════════════════════════════════════ ◆ SECTION ◆ ════════════════════════════════════════ ``` ### Frames ``` ╔══════════════════════════════════════╗ ║ ║ ║ Content goes here ║ ║ ║ ╚══════════════════════════════════════╝ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ ┃ Bold frame ┃ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ``` ### Logo Example ``` ╭━━━╮ ┃ ◉ ┃ ACME ╰━━━╯ CORP ``` ## Patterns ### Progress Bar ``` Loading: [████████████░░░░░░░░] 60% Progress: ▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░ 50% [==================== ] 67% ``` ### Sparklines ``` ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁ ``` ### Checkbox Lists ``` [x] Task completed [ ] Task pending [~] Task in progress [-] Task cancelled ``` ### Status Indicators ``` ● Online ○ Offline ◐ Busy ◑ Away ``` ## Rules 1. **Always use monospace** — ASCII art breaks in proportional fonts 2. **Test your output** — render it, don't just imagine it 3. **Align obsessively** — one space off ruins everything 4. **Use box-drawing characters** — they connect cleanly 5. **Whitespace is structure** — don't fight it, use it 6. **Keep it readable** — art that can't be understood is noise ## Common Mistakes - Using proportional fonts to view ASCII art - Mixing box-drawing styles (single with double) - Inconsistent spacing - Too much detail — know when to simplify - Forgetting the art will be copy-pasted --- *The constraint is the gift. Make something beautiful.*