ascii-visualizer

Solid

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.

AI & Automation 180 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
75
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 This block intentionally shows multiple sets together as a key. Authors should use ONE set per real diagram; the `single-set` lint rule enforces this on production diagrams. <!-- ascii-lint-disable: single-set,single-arrow-style,density-min --> ``` default: ┌─┐ │ └─┘ ├─┤ ┬ ┴ ┼ emphasis: ┏━┓ ┃ ┗━┛ ┣━┫ ┳ ┻ ╋ title: ╔═╗ ║ ╚═╝ ╠═╣ ╦ ╩ ╬ soft: ╭─╮ │ ╰─╯ portable: +-+ | +-+ +-+ + + + Arrows: → ← ↑ ↓ ─> <─ ──> <── Blocks: █ ▓ ░ ▏▎▍▌▋▊▉ Status: ● ○ ✓ ✗ ⚠ ◆ ◇ ▶ ▷ ↑↓→ ▓▒░ (closed-set vocab — see rules) ``` ### Set Conventions (D8: intent-driven naming) Tokens live in `tokens.json`. Names describe USE not APPEARANCE. | Set | Characters | Use For | |-----|-----------|---------| | `default` `─│` | Normal boxes and connectors | Most diagrams | | `emphasis` `━┃` | Headers, focus, draw the eye | Key components, outer frames | | `title` `═║` | Document titles | §0-style banners only | | `soft` `╭╮╰╯ ─│` | Status cards, ambient UI | Diff blocks | | `portable` `+-\|` | NO_COLOR / CI / bare TTY | Fallback | Rename codemod (D8): old `light/heavy/double/rounded/ascii-fallback` → new names above. Old n...

Details

Author
yonatangross
Repository
yonatangross/orchestkit
Created
5 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

ascii-diagram

Generate perfectly aligned ASCII diagrams — architecture, flow, sequence, box-and-arrow. Uses a programmatic character-grid approach so alignment is guaranteed by math, not token prediction. Includes post-render verification.

1 Updated today
allysgrandiose674
Data & Documents Listed

ascii-visualizer

Creates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.

335 Updated today
aiskillstore
AI & Automation Solid

baoyu-diagram

Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.

845 Updated yesterday
guanyang
AI & Automation Listed

beautiful-mermaid

Render Mermaid diagrams as ASCII/Unicode art for terminal display or as SVG files. Use when visualizing flowcharts, state machines, sequence diagrams, class diagrams, or ER diagrams. Supports 15 themes including tokyo-night, catppuccin, nord, dracula, and github.

33 Updated 2 days ago
tdimino
DevOps & Infrastructure Listed

architecture-diagram

Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships.

335 Updated today
aiskillstore