ascii-diagram

1# /ascii-diagram — Perfectly Aligned ASCII Diagrams
2 
3## Orientation
4 
5**Use when:**
6- The user wants any kind of text/ASCII diagram: architecture, flow, sequence,
7  box-and-arrow, tree, table, org chart, network topology
8- A diagram needs to be embedded in markdown, code comments, or plain text
9- Visual alignment matters
10 
11**Do NOT use when:**
12- The user wants an image (suggest Mermaid, PlantUML, or an image tool instead)
13- The diagram is trivial (a single box or a one-line arrow)
14 
15**What this skill needs:**
16- A description of what to diagram
17- Optional: preferred style (single-line `+--+`, double-line `╔══╗`, rounded `╭──╮`, heavy `┏━━┓`)
18- Optional: target width constraint
19 
20## Protocol
21 
22### Step 1: PLAN THE LAYOUT
23 
24Before writing ANY characters, plan the diagram structurally:
25 
261. **Identify elements**: List every box/node and its label text
272. **Identify connections**: List every arrow/line between elements, with optional labels
283. **Choose layout direction**: left-to-right, top-to-bottom, or mixed
294. **Calculate dimensions**:
30   - Each box width = max label line length + 4 (2 padding + 2 border)
31   - Each box height = label line count + 2 (top + bottom border)
32   - Gutters between boxes: minimum 3 characters for arrows (` → `)
33   - For vertical arrows: minimum 1 row gap
34 
35Write this plan out explicitly before proceeding. Example:
36 
37```
38Elements:
39  A: "Client" → width=10, height=3
40  B: "Server" → width=10, height=3
41  C: "Database" → width=12, height=3
42Layout: left-to-right
43…