SKILL.md
Unicode Box Drawing Patterns
Guidelines for creating properly aligned, readable Unicode box diagrams.
When to Apply
- Drawing ASCII/Unicode diagrams in code comments or documentation
- Creating flow charts, state machines, or architecture diagrams
- Documenting CLI output formats or terminal interfaces
- Building text-based UI mockups
- Reviewing diagram alignment issues
- Writing technical documentation with visual structures
Rule Categories by Priority
| Priority |
Prefix |
Category |
| CRITICAL |
padding- |
Right-padding and fixed width alignment |
| HIGH |
spacing- |
Breathing room and whitespace |
| HIGH |
layout- |
Centering and nested box calculations |
| MEDIUM |
chars- |
Character selection and consistency |
Quick Reference
Critical Rules
| Rule ID |
Description |
padding-right |
Every content line MUST be padded to full width before closing │ |
padding-fixed-width |
All lines in a box MUST have identical character count |
High Priority Rules
| Rule ID |
Description |
spacing-breathing-room |
Empty line after ┌───┐ or ├───┤, and before └───┘ or ├───┤ |
layout-centering |
Always center nested boxes and flow diagrams within parent |
layout-width-limit |
Keep diagrams under 70 characters for compatibility |
layout-nested-math |
Calculate: leftpad + innercontent + rightpad = contentwidth |
Character Rules
| Rule ID |
Description |
chars-single-set |
Never mix Unicode box chars with ASCII on same line |
chars-light-lines |
Use light lines (─ │ ┌ ┐ └ ┘) for best compatibility |
chars-monospace |
Only renders correctly in monospace fonts |
Box Width Formula
Border formula: ┌ + (width-2 × ─) + ┐ = total width
Content formula: │ + (width-2 chars) + │ = total width
↑
Content + right-padding spaces
For a 65-character wide box:
- Border:
┌ + 63×─ + ┐ = 65 chars
- Content:
│ + 63 chars (content + padding) + │ = 65 chars
Unicode Characters Reference
Light Lines (Recommended)
Corners: ┌ ┐ └ ┘
Lines: ─ │
T-junctions: ├ ┤ ┬ ┴
Cross: ┼
Arrows
Simple: → ← ↓ ↑
Filled: ▶ ◀ ▼ ▲
Double: ⇒ ⇐ ⇓ ⇑
Common Patterns
Simple Box
┌───────────────────────────────────────────────────────────────┐
│ TITLE │
├───────────────────────────────────────────────────────────────┤
│ │
│ Content with proper right-padding │
│ │
└───────────────────────────────────────────────────────────────┘
Horizontal Flow
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Step 1 │─────▶│ Step 2 │─────▶│ Step 3 │
└───────────┘ └───────────┘ └───────────┘
Vertical Flow
┌─────────────────┐
│ Parent │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Child │
└─────────────────┘
Pre-Commit Checklist
How to Use
Each rule file in rules/ contains:
- Rule explanation with rationale
- WRONG example showing the anti-pattern
- CORRECT example showing proper implementation
- Verification steps
Recommended Tools
| Tool |
URL |
Platform |
| ASCIIFlow |
asciiflow.com |
Web, free |
| Monodraw |
monodraw.helftone.com |
macOS, paid |
| Textik |
textik.com |
Web, free |
| Diagon |
arthursonzogni.com/Diagon |
Web, free |
References
