From agent-flow
Create visually appealing tables and diagrams for display. Use when the user asks to create tables, diagrams, status displays, dashboards, or structured text layouts that should render nicely in monospace fonts. Triggers include requests for tables, terminal-style output, box diagrams, or recreating visual layouts in text form.
npx claudepluginhub timgranlundmarsden/claude-agent-flowThis skill uses the workspace's default tool permissions.
Use `|` and `-` for structured data with rows and columns. Renders cleanly everywhere.
Provides ASCII diagram patterns for architecture, workflows, file trees, and data visualizations. Use for terminal-rendered box-drawing layouts, progress bars, swimlanes, and blast radius charts.
Generates perfectly aligned ASCII diagrams for architecture, flow, sequence, box-and-arrow using a math-based character grid with post-render verification. Ideal for embedding in markdown, code comments, or plain text.
Render directive-flavored markdown as rich ANSI terminal output or tmux side pane with panels, trees, columns, callouts, mermaid diagrams, syntax-highlighted code, diffs, charts, KPIs, timelines, tasklists, badges. Use for visual output, diagrams, structured displays.
Share bugs, ideas, or general feedback.
Use | and - for structured data with rows and columns. Renders cleanly everywhere.
| COLUMN A | COLUMN B | COLUMN C |
|----------------|----------------|----------------|
| Data row 1 | Value 1 | Value 1 |
| Data row 2 | Value 2 | Value 2 |
For titled sections, use markdown headings above the table:
### Section Title
| COLUMN A | COLUMN B |
|----------------|----------------|
| Data row 1 | Value 1 |
|--- (three or more dashes) per cell##, ###) above tables instead of title rows inside the tableDo NOT use heavy Unicode box-drawing characters (╔, ║, ═, etc.) for data tables — they cause alignment issues.
Use Unicode box-drawing characters for node boxes, flow arrows, and architecture diagrams. These look far better than +/-/| for visual layouts.
| Purpose | Character |
|---|---|
| Horizontal | ─ |
| Vertical | │ |
| Top-left | ┌ |
| Top-right | ┐ |
| Bottom-left | └ |
| Bottom-right | ┘ |
| T-left | ├ |
| T-right | ┤ |
| T-top | ┬ |
| T-bottom | ┴ |
| Cross | ┼ |
| Arrow down | ▼ |
| Arrow up | ▲ |
| Arrow right | ▶ |
| Arrow left | ◀ |
Do NOT use +, -, * for diagram boxes — always prefer the Unicode characters above.
┌─────────────────┐ ┌─────────────────┐
│ Node A │ │ Node B │
│ - detail │ │ - detail │
└────────┬────────┘ └────────┬────────┘
│ │
└───────────┬───────────┘
▼
┌──────────────────────┐
│ Next Layer │
└──────────────────────┘
Emojis render as ~2 characters wide in most monospace fonts and can cause column misalignment.
Include emojis (may cause slight alignment drift):
| Authentication | 🟢 Operational |
| Database | 🔴 Outage |
ASCII alternatives (perfect alignment):
| Authentication | [*] Operational |
| Database | [X] Outage |
Common substitutions:
[~] = pending/waiting (replaces ⏳)[!] = warning/attention (replaces ⚡ 🟡)[*] = success/OK (replaces 🟢 ✓)[X] = error/failure (replaces 🔴 ✗)[x] = checkbox checked[ ] = checkbox unchecked>> = callout/verdictDate: 2026-02-05 | Time: 14:30 UTC
| Service | Status | Notes |
|---|---|---|
| Authentication | [*] Operational | |
| Database | [!] Degraded | |
| Storage | [X] Outage | Affecting file uploads, ETA 15:00 UTC |