Command
Content
Command
/generate-web-diagram
Generate a beautiful standalone HTML diagram and open it in the browser
Install
> /plugin marketplace add jamditis/claude-skills-journalismHow 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 beautiful standalone HTML diagram and open it in the browser
Command definition
generate-web-diagram.mddescription: Generate a beautiful standalone HTML diagram and open it in the browser
Load the visual-explainer skill, then generate an HTML diagram for: $@
Follow the visual-explainer skill workflow. Read the reference template and CSS patterns before generating. Pick a distinctive aesthetic that fits the content, vary fonts, palette, and layout style from previous diagrams.
If `surf` CLI is available (`which surf`), consider generating an AI illustration via `surf gemini --generate-image` when an image would genuinely enhance the page, a hero banner, conceptual illustration, or educational diagram that Mermaid can't express. Match the image style to the page's palette. Embed as base64 data URI. See css-patterns.md "Generated Images" for container styles. Skip images when the topic is purely structural or data-driven.
Write to `~/.agent/diagrams/` and open the result in the browser.
Ships withclaude-skills-journalism
A collection of Agent Skills for journalists, researchers, academics, media professionals, and communications practitioners. The same repository serves Claude Code and Codex while keeping Claude-only commands, agents, and hooks clearly labeled.
Get the whole plugin
Stats
391
Stars
65
Forks
Active
Maintenance
Python
Language
MIT
License
8d ago
Last commit
8mo ago
Created
Repo: jamditis/claude-skills-journalism
Other commands on claude-skills-journalism.
Command