/generate-web-diagram

Generate a standalone HTML diagram and open it in the browser

nicobailon@nicobailon

GitHub

From plugin

visual-explainer-marketplace

9.4k7 skills7 commands

Install

> /plugin marketplace add nicobailon/visual-explainer
> /plugin install visual-explainer@visual-explainer-marketplace

How it fires

How this command gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/generate-web-diagram

Context preview

What this command does when you run it.

Generate a standalone HTML diagram and open it in the browser

Command definition

generate-web-diagram.md

name: generate-web-diagram
description: Generate a standalone HTML diagram and open it in the browser

Load the visual-explainer skill and generate an HTML visual explainer for: $@

Use the skill’s reference routing and final checklist. Pick a representation that fits the topic: Mermaid for connected flows/topologies; CSS cards for text-heavy explanations; tables for matrices; timelines for linear history.

Write to `~/.agent/diagrams/` with a descriptive filename and open the result in the browser. In Pi package installs, this is an explicit visual request: use `visual_explainer.prepare` when planning/context scouting helps, then `visual_explainer.render` with the complete HTML.

Read it on GitHub ↗

Ships withvisual-explainer-marketplace

An agent skill that turns complex terminal output into styled HTML pages you actually want to read. Ask your agent to explain a system architecture, review a diff, or compare requirements against a plan.

Get the whole plugin

Stats

TypeScript JavaScript HTML CSS Bash

+4 tags

Git GitHub Mermaid Anthropic

9,452

Stars

635

Forks

Maintained

Maintenance

HTML