Explain Anything Visually: The whatis Agent Skill

Where this fits

You ask your agent "what is a Merkle tree?" and it replies with a dense paragraph. That's fine for a search engine, but for a developer trying to grasp a concept quickly, a diagram is worth a thousand tokens. The whatis skill turns any topic into a self-contained HTML page filled with hand‑drawn SVG diagrams, big labels, and minimal text — perfect for visual learners and for agent responses that need to be scanned, not read.

Why agents benefit

• Picture‑first output: The skill forces the agent to think in diagrams (flowcharts, sequence diagrams, architecture maps) before writing a single sentence, which often leads to clearer mental models.
• Evidence‑backed rendering: Every node in a diagram must be backed by context the agent gathers itself — no fabrication. This pushes the agent to research the topic thoroughly before drawing.
• Self‑contained HTML: The output is a single file with inline SVG/CSS, no external dependencies. The agent can open it locally or share it as a static file, making it easy to embed in a chat or save for later.
• Flexible diagram selection: The skill encourages mixing diagram types — C4, sequence, state, timeline, even custom designs — so the agent adapts to the topic rather than forcing a one‑size‑fits‑all template.
• Fewer words, more clarity: By limiting prose, the skill trains the agent to communicate the essence of a concept, which benefits all subsequent interactions.

Practical scenarios

Onboarding to a new codebase

Ask "what is the payment service architecture?" and the agent produces a C4 diagram showing services, data flows, and failure points — instantly giving you the mental map you'd otherwise build after hours of digging.

Explaining a protocol or algorithm

"How does OAuth 2.0 work?" becomes a sequence diagram with actors, tokens, and redirects, annotated with short explanations. You see the handshake without reading a spec.

Comparing two approaches

"What's the difference between REST and gRPC?" yields a side‑by‑side comparison with flow diagrams, payload formats, and performance charts — a quick decision‑making aid.

Add it to your agent workflow

Install the skill with a single command:

npx skills add suyuan2022/suyuan-skill --skill whatis

Then trigger it by typing /whatis <topic> in your agent's chat, or simply ask "what is X?" when a visual answer would help. The agent will generate the HTML file and open it for you. For more context on this skill, see its listing at OpenAgentSkill.

Compare before adopting

Before adding whatis to your toolkit, compare it against alternatives like diagram-as-code tools or prompt templates that generate Mermaid. Check: quality signals (does it actually produce readable diagrams?), maintenance freshness (is the repo actively updated?), alternatives (are there skills that produce interactive diagrams or integrate with your existing charting library?), and workflow fit (does your agent environment support opening local HTML files? If not, you'll need to adjust the skill's output method).

Why it is worth tracking

With 27 stars and a simple, focused design, whatis is a promising example of how agent skills can move beyond text generation into visual communication. Its emphasis on evidence‑backed diagrams sets a high bar for accuracy, and the skill's flexibility signals a mature author. Keep an eye on it — if the community adopts it, it could become the default way agents explain complex topics. Evaluate it when you need to upgrade your agent's explanation quality or when you're building educational or documentation‑focused agents.