# Preview

> Generate visual explanations — Mermaid diagrams, ASCII art, architecture visualizations.

- Skill: `namtroi/preview` (Agent Skill)
- Install (CLI): `npx skillmds@latest add namtroi/preview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/namtroi/preview/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: namtroi (https://skillmd.com/u/namtroi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/namtroi/preview

---


# Preview Skill

Generate visual explanations for complex code, architecture, and data flows.

## Modes

| Flag | Output |
|------|--------|
| `--diagram [topic]` | Mermaid architecture/flow diagram |
| `--explain [topic]` | Visual explanation with ASCII + Mermaid |
| `--ascii [topic]` | Terminal-friendly ASCII-only output |

## When to Use

- Topic has 3+ interacting components
- User asks "explain", "how does X work", "visualize"
- Architecture decisions need communication

## Mermaid Guidelines

- Use `graph TD` for top-down flows
- Use `sequenceDiagram` for interactions
- Use `classDiagram` for structure
- Quote labels with special chars: `id["Label (info)"]`
- Keep diagrams focused — max 15 nodes

## Output

Save visuals to project directory (e.g., `docs/diagrams/` or `plans/visuals/`).
Render inline in response for immediate feedback.