Ascii Grapher

Before drawing, plan:

1. Nodes — identify every box, actor, or component.
2. Edges — identify connections, their direction, and optional labels.
3. Layout direction — top-to-bottom, left-to-right, or hybrid based on what fits best.
4. Size budget — aim for max 120 columns wide and a reasonable height. Prefer compact diagrams.

Phase 3: Draw the ASCII Diagram

Render the diagram using only plain-text characters. Follow these conventions:

Box style

┌──────────────┐
│  Component   │
└──────────────┘

Arrows

• Horizontal: ───>, <───, <──>
• Vertical: │ with ▼ or ▲ at endpoints
• Diagonal: avoid when possible; use L-shaped connectors instead

Connectors and junctions

• Corner: ┌ ┐ └ ┘
• Tee: ├ ┤ ┬ ┴
• Cross: ┼

Labels

Place edge labels inline on the arrow or directly above/below:

        request
  ────────────────>

Grouping

Use solid boxes for logical groups:

┌─── Service Layer ───┐
│                     │
│  ┌───┐    ┌───┐     │
│  │ A │    │ B │     │
│  └───┘    └───┘     │
│                     │
└─────────────────────┘

Phase 4: Present and Refine

1. Output the diagram inside a fenced code block so it renders with a monospace font.
2. Add a brief legend or description below the diagram if labels alone are not self-explanatory.
3. If the user asks for changes, loop back to Phase 2 and redraw.

Phase 5: Save (optional)

When saving, embed the diagram directly inside the target document (e.g., README.md, CONCEPTS.md, or a spec file) within a fenced code block — do not create a separate standalone file for the diagram. Use the Write or Edit tool to insert or update the diagram in place.

Diagram Types Cheat Sheet

Team Coordination

Other skills may invoke this skill to produce diagrams for documentation or specifications. Draw diagrams based on the context and requirements provided by the caller.