New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

HTML Diagram

by plannotator in plannotator/effective-html

Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.

MITAuto-check passedDevelopment

Install HTML Diagram

skills CLI
$ npx skills add plannotator/effective-html --skill html-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install plannotator/effective-html html-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-diagram .claude/skills/html-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-diagram
GitHub stars
3.6k
Token cost
~678 tokens
SKILL.md length
326 words
Files
2
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.

  • The user explicitly invokes html-diagram
  • SKILL.md covers Choose the right model, Choose the rendering method and Build and verify
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • The broad html skill routes a diagram request here

What it does

HTML Diagram is an agent skill from plannotator/effective-html. Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.

Its SKILL.md is about 680 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Development, covering Diagrams. The repository describes itself as: Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams. The licence is MIT.

When your agent uses it

  • The user explicitly invokes html-diagram
  • The broad html skill routes a diagram request here

Example prompts

  • “/html-diagram”

What it can do on your machine

Read from SKILL.md and the folder at commit 2ac1dfe. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Diagram loads about 678 tokens when it runs. Until then it costs about 90 tokens; SKILL.md has 326 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~90
When it runs · the whole SKILL.md, loaded when a task matches
~678

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from plannotator/effective-html at commit 2ac1dfe, republished under its MIT licence (© plannotator). 326 words, ~678 tokens.

Download SKILL.mdSave it as .claude/skills/html-diagram/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
html-diagram
description
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.

HTML Diagram

Build the smallest visual model that makes the relationship easier to understand than prose alone. Match the notation and visual language to the user's project and subject. Do not force every topic into the same SVG boxes and arrows.

Choose the right model

Identify the question the reader should answer, then select the form:

  • topology for components and connections;
  • sequence for ordered messages over time;
  • process for steps, branches, and handoffs;
  • state for transitions and conditions;
  • hierarchy for containment or ownership;
  • timeline for change over time;
  • matrix for repeated relationships;
  • quantitative view when magnitude matters.

Decide what must remain visible together and what can be revealed on demand. Use a simpler form when it carries the same meaning.

Choose the rendering method

Use HTML and CSS, SVG, Canvas, or WebGL according to the information and scale. Do not use SVG merely because the output is a diagram.

  • Keep labels, grouping, direction, and connectors legible before adding interaction.
  • Use stable node positions when readers must compare states or steps.
  • Keep edge crossings and ambiguous arrowheads to a minimum.
  • Put intentionally broad canvases in a contained pan or scroll region.
  • Use legends only when notation is not self-explanatory.

Add sequencing, filtering, path tracing, pan and zoom, or animation only when it helps answer the stated question. Keep overlays dismissible, controls keyboard-accessible, and motion compatible with prefers-reduced-motion.

When design-artifact is available, read it for the diagram's surrounding composition and visual register. Keep the chosen diagram grammar, label legibility, and relationships authoritative over decorative treatment.

Build and verify

Deliver one self-contained HTML file with essential CSS and JavaScript inline. Require no build step or external service. Use accessible text alternatives and keep important meaning available without animation or color alone.

Inspect the result at wide and narrow widths. Check label collisions, clipped nodes, edge routing, reading order, keyboard operation, overflow, and every interactive state.

Return the absolute path, the diagram form chosen, and the main simplifications or assumptions.

© plannotator, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/html-diagram of plannotator/effective-html.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 2ac1dfe

Compare with similar skills

HTML Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HTML Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Diagram this skillplannotator/effective-html3.6k—~678Automated safety check: PassMIT
Architecture Diagramsmallnest/pigo4751 repos~1.6kAutomated safety check: PassMIT
Process Flow DiagramCocoon-AI/process-flow-diagram-generator103—~4.3kAutomated safety check: PassMIT
Architecture Diagrammateaix/mateclaw1.1k5 repos~1.7kAutomated safety check: PassApache-2.0
Whatissuyuan2022/suyuan-skill276—~606Automated safety check: PassMIT
Mobius Architecture Drawmobius-system/mobius138—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Architecture Diagram

    smallnest/pigo

    Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.

    475 GitHub starsUsed in 1 repo~1.6k tokens
    DevelopmentAuto-check passed

  • Process Flow Diagram

    Cocoon-AI/process-flow-diagram-generator

    Create polished dark-themed process flow diagrams as self-contained HTML+SVG files.

    103 GitHub stars~4.3k tokensUpdated 4 mo ago
    DevelopmentAuto-check passed

  • Architecture Diagram

    mateaix/mateclaw

    Dark-themed SVG architecture/cloud/infra diagrams as HTML. An agent skill from mateaix/mateclaw.

    1.1k GitHub starsUsed in 5 repos~1.7k tokens
    DevelopmentAuto-check passed

  • Whatis

    suyuan2022/suyuan-skill

    What Is This — explain anything as a picture-first HTML page.

    276 GitHub stars~606 tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Mobius Architecture Draw

    mobius-system/mobius

    Analyze a Mobius project repository and generate a single-file HTML/SVG architecture diagram at .imac/generatedfigures/arch.html, with optional image fallbacks.

    138 GitHub stars~1.7k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Flowchart

    Unclecheng-li/AI_Animation

    生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。

    1.5k GitHub stars~616 tokensUpdated 3 days ago
    DevelopmentAuto-check passed

More from plannotator/effective-html

  • HTML

    plannotator/effective-html

    Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.

    3.6k GitHub stars~1.6k tokensUpdated 23 days ago
    Auto-check passed

  • HTML Plan

    plannotator/effective-html

    Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability.

    3.6k GitHub stars~614 tokensUpdated 23 days ago
    Auto-check passed

  • HTML Prototype

    plannotator/effective-html

    Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language.

    3.6k GitHub stars~1.5k tokensUpdated 23 days ago
    Auto-check passed

Categories

Questions about HTML Diagram

What does HTML Diagram do?

Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. HTML Diagram is an agent skill from plannotator/effective-html. Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.

When should I use HTML Diagram?

HTML Diagram fits situations like: the user explicitly invokes html-diagram; the broad html skill routes a diagram request here.

How do I install HTML Diagram in Claude Code?

Run `npx skills add plannotator/effective-html --skill html-diagram -a claude-code`. Or copy the skill folder (skills/html-diagram in plannotator/effective-html) into .claude/skills/html-diagram in your project. Claude Code loads it when a task matches its description.

How do I install HTML Diagram in Codex?

Run `npx skills add plannotator/effective-html --skill html-diagram -a codex`. Or copy the skill folder (skills/html-diagram in plannotator/effective-html) into .agents/skills/html-diagram in your project. Codex loads it when a task matches its description.

Can I use HTML Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add plannotator/effective-html --skill html-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-diagram, .gemini/skills/html-diagram, .github/skills/html-diagram and .opencode/skills/html-diagram in your project.

What does HTML Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Diagram is instructions for the agent only.

Does HTML Diagram access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is HTML Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HTML Diagram use?

HTML Diagram is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Diagram use?

About 678 tokens (SKILL.md is roughly 2.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HTML Diagram?

Skills that share tags, products or a category with HTML Diagram: Architecture Diagram (smallnest/pigo, 475 stars), Process Flow Diagram (Cocoon-AI/process-flow-diagram-generator, 103 stars), Architecture Diagram (mateaix/mateclaw, 1.1k stars) and Whatis (suyuan2022/suyuan-skill, 276 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Diagram?

plannotator (a GitHub organization) maintains it in plannotator/effective-html, which has 3,562 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on September 14, 2026.

Source: plannotator/effective-html on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.