mshadmanrahman

Generate Web Diagram — Development skill for Claude Code

Development community

Generate a beautiful standalone HTML diagram and open it in the browser.

How to install Generate Web Diagram

Installs to ~/.claude/commands/mshadmanrahman-pm-operating-system-generate-web-diagram.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/mshadmanrahman/pm-operating-system/HEAD/.claude/commands/generate-web-diagram.md -o ~/.claude/commands/mshadmanrahman-pm-operating-system-generate-web-diagram.md

Restart Claude Code, or start a new session, for it to be picked up.

What Generate Web Diagram does

description: 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-i

Alternatives in Development

Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
Frontend Slides Editable — Editable HTML presentation skill for Codex/Claude Code with drag-resize editing, slide reordering, local save/ 466 ★
Open Claude In Chrome — Claude in Chrome, reverse-engineered and open-source 199 ★