/ascii-diagram, Perfectly Aligned ASCII Diagrams

Orientation

Use when:

• The user wants any kind of text/ASCII diagram: architecture, flow, sequence, box-and-arrow, tree, table, org chart, network topology
• A diagram needs to be embedded in markdown, code comments, or plain text
• Visual alignment matters

Do NOT use when:

• The user wants an image (suggest Mermaid, PlantUML, or an image tool instead)
• The diagram is trivial (a single box or a one-line arrow)

What this skill needs:

• A description of what to diagram
• Optional: preferred style (single-line +--+, double-line ╔══╗, rounded ╭──╮, heavy ┏━━┓)
• Optional: target width constraint

Protocol

Step 1: PLAN THE LAYOUT

Before writing ANY characters, plan the diagram structurally:

1. Identify elements: List every box/node and its label text
2. Identify connections: List every arrow/line between elements, with optional labels
3. Choose layout direction: left-to-right, top-to-bottom, or mixed
4. Calculate dimensions:
   • Each box width = max label line length + 4 (2 padding + 2 border)
   • Each box height = label line count + 2 (top + bottom border)
   • Gutters between boxes: minimum 3 characters for arrows (→)
   • For vertical arrows: minimum 1 row gap

Write this plan out explicitly before proceeding. Example:

Elements:
  A: "Client" → width=10, height=3
  B: "Server" → width=10, height=3
  C: "Database" → width=12, height=3
Layout: left-to-right
Connections: A→B (HTTP), B→C (SQL)
Total width: 10 + 6 + 10 + 6 + 12 = 44

Step 2: BUILD ON A CHARACTER GRID

Use this JavaScript approach mentally (or actually execute it via Bash if the diagram is complex):