# Html Diagram

> Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram. Use when the user wants a full-screen diagram, wants the output to be light on prose, or wants an HTML artifact that is mostly there to make the architecture click fast.

- **Type:** Skill
- **Install:** `agentstack add skill-plannotator-effective-html-html-diagram`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [plannotator](https://agentstack.voostack.com/s/plannotator)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [plannotator](https://github.com/plannotator)
- **Source:** https://github.com/plannotator/effective-html/tree/main/skills/html-diagram
- **Website:** https://plannotator.ai

## Install

```sh
agentstack add skill-plannotator-effective-html-html-diagram
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# HTML Diagram

Review the SVG diagrams used throughout `references/html-effectiveness/`.

There are a bunch in there, and some of them are focused on architecture and whatnot.

After reviewing them, create an HTML file that is strictly for visualizing the architecture and understanding the stack.

It should not be prose-heavy. It should simplify more into a full-screen diagram and whatnot.

Build a high-quality diagram in SVG. Take your time iterating on the diagram more than anything.

If it makes sense, make the diagram interactive and able to visualize and animate different sequences of system behavior.

Also review `references/architecture-example.html` — a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).

Always include dark mode: hand-rolled CSS variables on `:root` / `html.dark`, a small theme toggle button, `localStorage` persistence, and an apply-before-paint script in `` (default to `prefers-color-scheme`). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [plannotator](https://github.com/plannotator)
- **Source:** [plannotator/effective-html](https://github.com/plannotator/effective-html)
- **License:** MIT
- **Homepage:** https://plannotator.ai

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-plannotator-effective-html-html-diagram
- Seller: https://agentstack.voostack.com/s/plannotator
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.