ASCII Draw Comments

Use this skill to make ASCII diagrams that survive copy/paste into code comments and plain-text docs.

Workflow

1. Clarify the target comment style only when needed:

- / ... / for JavaScript, TypeScript, C, Java, Kotlin, Swift block comments. - # ... for shell, Ruby, Python line comments. - Plain fenced text for Markdown docs.

1. Convert the user's idea into a simple ASCII layout before adding polish.
2. Keep diagrams monospace-safe:

- Use ASCII characters only unless the user asks for Unicode box drawing. - Prefer +---+, |, -, >, v, and spaces. - Avoid tabs. Use spaces. - Keep line widths consistent.

1. Make labels short. Long labels break comment readability.
2. If the user wants to use the GUI app, point them to ascii-draw as a manual drawing tool:

- Draw the diagram in ASCII Draw. - Copy the resulting text. - Paste it inside the target comment block.

1. If the user wants the diagram directly in chat or a file, generate the final comment-ready ASCII yourself.

Bundled Script

Use scripts/wrapasciicomment.py when the user already has ASCII art and wants it wrapped as a source-code comment without breaking alignment.

Examples:

python3 scripts/wrap_ascii_comment.py --style block < diagram.txt
python3 scripts/wrap_ascii_comment.py --style line --prefix "# " < diagram.txt
python3 scripts/wrap_ascii_comment.py --style markdown < diagram.txt

Comment Templates

JavaScript/TypeScript/C-style:

/*
+----------+      +----------+
| Request  | ---> | Handler  |
+----------+      +----------+
                      |
                      v
                 +----------+
                 | Storage  |
                 +----------+
*/

Python/shell-style:

# +----------+      +----------+
# | Request  | ---> | Handler  |
# +----------+      +----------+
#                       |
#                       v
#                  +----------+
#                  | Storage  |
#                  +----------+

Markdown:

+----------+      +----------+
| Request  | ---> | Handler  |
+----------+      +----------+
                      |
                      v
                 +----------+
                 | Storage  |
                 +----------+

Review Checklist

• Diagram explains flow or structure faster than prose.
• Every arrow has a clear direction.
• Box labels fit inside the box.
• Comment prefix does not distort alignment.
• Result uses plain ASCII unless Unicode was requested.