Html Diagram
Turns "diagram my architecture" into a full-screen, pan/zoom, dark-mode SVG HTML file
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 20, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 0fa66b4
Fetched the tree via gh (rate-limited on anon curl): monorepo of 3 skills; picked skills/html-diagram/SKILL.md by slug. Frontmatter parses with name+description and disable-model-invocation:true (openai.yaml also sets allow_implicit_invocation:false — it is explicit-invocation-only, real discovery friction). Both referenced paths exist (references/html-effectiveness/ with 20 example HTMLs + index, and references/architecture-example.html, a real 462-line file with CSS-var dark mode + localStorage apply-before-paint + 38 flow-animation hits). No exfiltration/base64/secrets in SKILL.md or the example. Measured output: baseline was div boxes + 2 prose paragraphs, no SVG/theme/interactivity; skill result was a full-screen SVG stage, 0 prose, dark-mode toggle, wheel-zoom anchored at cursor, 1:1 SVG-space pan, capture-phase drag-click suppression, and a dismissible node panel with close button — every delta from the skill's directives (clear win). Docs ding: SKILL.md heavily mandates pan/zoom but its own "done well" example contains zero pan/zoom handlers (0 wheel/mousedown), so the flagship reference doesn't demonstrate one of the skill's strongest requirements. Trigger phrasings — SHOULD: "make a full-screen HTML diagram of my microservices architecture", "interactive SVG diagram of how my auth stack fits together", "self-contained HTML artifact visualizing my system architecture, minimal text"; should NOT: "write a prose doc explaining my architecture decisions", "build me a React dashboard component" — 5/5 correct.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 9/10
- Docs & honesty 4/5
What Html Diagram does
A self-contained prompt skill that produces a full-screen HTML architecture diagram: SVG-first, minimal prose, hand-rolled dark mode, and cursor-anchored pan/zoom. Triggers when the user explicitly asks for a full-screen system/architecture/stack diagram as a standalone HTML artifact (it is opt-in only — disable-model-invocation is set, so it won't auto-fire).
How to install Html Diagram
npx skills add plannotator/effective-html --skill html-diagram (or: /plugin marketplace add plannotator/effective-html then /plugin install plannotator-effective-html@effective-html)
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Html Diagram
-
/html-diagramTurns "diagram my architecture" into a full-screen, pan/zoom, dark-mode SVG HTML file
It also activates on plain-language prompts like these:
-
Make a full-screen diagram of our architecture -
Create an HTML artifact showing the stack visually -
Build a diagram-first page explaining this system
Frequently asked questions
- Is the Html Diagram skill free?
- Yes. The skill itself is free from plannotator/effective-html. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Html Diagram work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 20, 2026. Verdict: Tested · Works. Fetched the tree via gh (rate-limited on anon curl): monorepo of 3 skills; picked skills/html-diagram/SKILL.md by slug. Frontmatter parses with name+description and disable-model-invocation:true (openai.yaml also sets allow_implicit_invocation:false — it is explicit-invocation-only, real discovery friction). Both referenced paths exist (references/html-effectiveness/ with 20 example HTMLs + index, and references/architecture-example.html, a real 462-line file with CSS-var dark mode + localStorage apply-before-paint + 38 flow-animation hits). No exfiltration/base64/secrets in SKILL.md or the example. Measured output: baseline was div boxes + 2 prose paragraphs, no SVG/theme/interactivity; skill result was a full-screen SVG stage, 0 prose, dark-mode toggle, wheel-zoom anchored at cursor, 1:1 SVG-space pan, capture-phase drag-click suppression, and a dismissible node panel with close button — every delta from the skill's directives (clear win). Docs ding: SKILL.md heavily mandates pan/zoom but its own "done well" example contains zero pan/zoom handlers (0 wheel/mousedown), so the flagship reference doesn't demonstrate one of the skill's strongest requirements. Trigger phrasings — SHOULD: "make a full-screen HTML diagram of my microservices architecture", "interactive SVG diagram of how my auth stack fits together", "self-contained HTML artifact visualizing my system architecture, minimal text"; should NOT: "write a prose doc explaining my architecture decisions", "build me a React dashboard component" — 5/5 correct.
- What is the Html Diagram SkillProof Score?
- 9.2/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 4/5.
- How do I install Html Diagram?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Html Diagram with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.