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 Architecture Diagram Generator

by comet-ml in comet-ml/opik

Generates a self-contained HTML diagram of a code change or architecture, with data flow, file groupings and design decisions, and a copy-as-image button for sharing.

Apache-2.0Auto-check passedDevelopment

Install HTML Architecture Diagram Generator

skills CLI
$ npx skills add comet-ml/opik --skill diagram-generation -a claude-code

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

GitHub CLI
$ gh skill install comet-ml/opik diagram-generation --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/comet-ml/opik.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/diagram-generation .claude/skills/diagram-generation && 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
diagram-generation
GitHub stars
22k
Token cost
~642 tokens
SKILL.md length
303 words
Files
3
Skills in repo
19
Repo updated
First seen
Licence
Apache-2.0

At a glance

Generates a self-contained HTML diagram of a code change or architecture, with data flow, file groupings and design decisions, and a copy-as-image button for sharing.

  • Works in 4 steps: Request / Data Flow — how data moves… → Why This Approach — problem vs solution… → Files Changed by Layer — grid of… → …
  • Visualizing the changes in a pull request for reviewers
  • SKILL.md covers When to Use, Output, How to Generate and Reference Files, plus 1 more section
  • Calls git

What it does

This skill produces a single self-contained HTML file that visualizes a code change, a data flow or an architecture decision, for pull request reviews, task plans and architectural explanations. The file is saved in a diagrams folder at the main repository root, resolved through git rev-parse --git-common-dir so it survives when the session runs in a worktree.

Diagrams follow a style guide and an HTML template shipped with the skill, with a dark GitHub-style theme, semantic color coding and a responsive layout, plus a Copy as image button for pasting into Slack, Jira or PR descriptions. The agent picks up to four sections from request or data flow, why this approach, files changed by layer, and key design decisions, weighting them by whether the change is a bug fix, new feature, refactor or cross-component work.

Listed gotchas: the html2canvas script tag needs integrity and crossorigin attributes, Playwright screenshots need absolute paths, more than four sections makes diagrams too tall, the toBlob call needs a null check, and diagrams show high-level summaries rather than raw diff hunks or Jira comments.

When your agent uses it

  • Visualizing the changes in a pull request for reviewers
  • Explaining an architectural decision with a diagram
  • Documenting how a request or data flows through the layers
  • Showing a before and after comparison for a refactor or bug fix

Example prompts

  • “Generate a diagram of how this PR changes the trace ingestion flow, for the reviewers.”
  • “Make an HTML diagram explaining why we moved the retry logic into the client layer.”
  • “Create a before and after diagram for the bug fix on this branch.”
  • “Draw the request flow for the new export endpoint with the files changed by layer.”

Requirements

  • Git, to resolve the main repository root

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Request / Data Flow — how data moves through layers
  2. Why This Approach — problem vs solution comparison
  3. Files Changed by Layer — grid of affected files grouped by component
  4. Key Design Decisions — numbered guards, trade-offs, or constraints

What it can do on your machine

Read from SKILL.md and the folder at commit 2982cd7. 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

    Shell commands in SKILL.md call:

    • git

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

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    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 Architecture Diagram Generator loads about 642 tokens when it runs. Until then it costs about 39 tokens; SKILL.md has 303 words of instructions outside code blocks.

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

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 comet-ml/opik at commit 2982cd7, republished under its Apache-2.0 licence (© comet-ml). 303 words, ~642 tokens.

Download SKILL.mdSave it as .claude/skills/diagram-generation/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
diagram-generation
description
Generate self-contained HTML architecture diagrams. Use when creating visual diagrams for PRs, task plans, or architectural explanations.

Diagram Generation

Generate self-contained HTML diagrams that visualize code changes, data flows, and architecture decisions.

When to Use

  • Visualizing PR changes for code review
  • Explaining architectural decisions
  • Documenting data/request flows
  • Illustrating before/after comparisons

Output

  • Self-contained HTML file at {MAIN_REPO_ROOT}/diagrams/opik-{TICKET_NUMBER}-diagram.html — always resolved against the main repo root (via git rev-parse --git-common-dir), even when the session runs inside a worktree, so the file outlives the worktree
  • Includes "Copy as image" button for sharing in Slack, Jira, PR descriptions
  • Dark GitHub theme, semantic color coding, responsive layout

How to Generate

Follow the style guide in style-guide.md and use the HTML template in template.md.

Required Sections (pick what applies)
  1. Request / Data Flow — how data moves through layers
  2. Why This Approach — problem vs solution comparison
  3. Files Changed by Layer — grid of affected files grouped by component
  4. Key Design Decisions — numbered guards, trade-offs, or constraints
Section Selection
  • Bug fix: Focus on before/after flow, root cause, safety guards
  • New feature: Focus on data flow, architecture, files changed
  • Refactor: Focus on before/after architecture, files changed
  • Cross-component: Show all layers with connecting flows

Reference Files

  • style-guide.md — Semantic colors, box themes, section labels, flow patterns, architecture trees
  • template.md — Base HTML structure, copy-as-image script, section recipes

Common Gotchas

  • SRI hash on CDN scripts: The html2canvas <script> tag must include integrity and crossorigin attributes — see template.md for the current hash
  • Absolute paths for Playwright screenshots: Playwright saves relative to its own CWD, not the repo root — always use absolute paths when calling browser_take_screenshot
  • Max 4 sections: More than 4 sections makes diagrams too tall for screenshots and hard to scan visually
  • No raw diff content: Diagrams show high-level summaries (component names, file names, flow descriptions) — never embed verbatim diff hunks or Jira comments
  • toBlob can return null: The Canvas toBlob call in the copy-as-image script needs a null check — see template.md

© comet-ml, Apache-2.0. 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 2 other files in .agents/skills/diagram-generation of comet-ml/opik.

  • SKILL.md
  • style-guide.md
  • template.md

Open the folder on GitHubat commit 2982cd7

Compare with similar skills

HTML Architecture Diagram Generator 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 Architecture Diagram Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Architecture Diagram Generator this skillcomet-ml/opik22k—~642Automated safety check: PassApache-2.0
Mermaid Diagramsjjmartres/opencode1336 repos~1.9kAutomated safety check: PassMIT
Miro Code Reviewmiroapp/miro-ai160—~4.8kAutomated safety check: WarnMIT
Map Architectureazalio/map-framework156—~2.2kAutomated safety check: PassMIT
Code Change Analysis Gatetelagod/code-abyss243—~532Automated safety check: NotesMIT
GitHub Code ReviewRedWoodOG/Hermes-Desktop1775 repos~3.4kAutomated safety check: NotesMIT

Similar skills

  • Mermaid Diagrams

    jjmartres/opencode

    Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.

    133 GitHub starsUsed in 6 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Miro Code Review

    miroapp/miro-ai

    A skill your agent uses when the user wants to create a visual code review on a Miro board from a pull/merge request (GitHub, GitLab, or any forge), local uncommitted changes, or a branch comparison…

    160 GitHub stars~4.8k tokensUpdated 22 days ago
    DevelopmentAuto-check: warnings

  • Map Architecture

    azalio/map-framework

    Opt-in proactive architecture-deepening report: ranks codebase areas by recent git hotspot and design friction, generates a ranked Markdown+Mermaid candidate report under…

    156 GitHub stars~2.2k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Code Change Analysis Gate

    telagod/code-abyss

    Checks what a code change touched, how far its impact reaches and whether design docs, tests and README files kept up, before commit or in review.

    243 GitHub stars~532 tokensUpdated 2 mo ago
    DevelopmentAuto-check: notes

  • GitHub Code Review

    RedWoodOG/Hermes-Desktop

    Review code changes by analyzing git diffs, leaving inline comments on PRs, and performing thorough pre-push review.

    177 GitHub starsUsed in 5 repos~3.4k tokens
    DevelopmentAuto-check: notes

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

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

More from comet-ml/opik

All 19 skills in this repo

  • Add Opik Code Quality Hook

    comet-ml/opik

    Checklist for wiring a new linter into Opik's Code Quality pipeline: the four files to edit, the silent-failure gotchas and the pass/fail verification loop.

    22k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

  • Opik Analytics Instrumentation

    comet-ml/opik

    Shows how to add product analytics events to Opik's frontend, Java backend and Python SDK, all reporting through Segment to PostHog with an opik_ name prefix.

    22k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Debugging Opik E2E Tests

    comet-ml/opik

    Investigates a failed Opik end-to-end test from CI, TestOps or a local run, decides regression versus flake, and proposes a fix without editing tests.

    22k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Opik Documentation Patterns

    comet-ml/opik

    Rules for writing PR descriptions, changelog entries and feature documentation in the Opik repository, including the exact headings that CI requires.

    22k GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Explore Feature E2E Test

    comet-ml/opik

    Turns a code change into one committed, passing Playwright end-to-end spec by resolving the change scope and handing authoring to a companion skill.

    22k GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Opik Local Dev Environment

    comet-ml/opik

    Starts, rebuilds, and troubleshoots the Opik local dev stack, including an optional Comet Platform integration mode for the Opik team.

    22k GitHub stars~734 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about HTML Architecture Diagram Generator

What does HTML Architecture Diagram Generator do?

Generates a self-contained HTML diagram of a code change or architecture, with data flow, file groupings and design decisions, and a copy-as-image button for sharing. This skill produces a single self-contained HTML file that visualizes a code change, a data flow or an architecture decision, for pull request reviews, task plans and architectural explanations. The file is saved in a diagrams folder at the main repository root, resolved through git rev-parse --git-common-dir so it survives when the session runs in a worktree.

When should I use HTML Architecture Diagram Generator?

HTML Architecture Diagram Generator fits situations like: visualizing the changes in a pull request for reviewers; explaining an architectural decision with a diagram; documenting how a request or data flows through the layers; showing a before and after comparison for a refactor or bug fix.

How do I install HTML Architecture Diagram Generator in Claude Code?

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

How do I install HTML Architecture Diagram Generator in Codex?

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

Can I use HTML Architecture Diagram Generator 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 comet-ml/opik --skill diagram-generation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diagram-generation, .gemini/skills/diagram-generation, .github/skills/diagram-generation and .opencode/skills/diagram-generation in your project.

What does HTML Architecture Diagram Generator need to run?

Going by SKILL.md and its folder, HTML Architecture Diagram Generator needs the command-line tools its instructions call (git). Our summary lists: Git, to resolve the main repository root.

Does HTML Architecture Diagram Generator access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is HTML Architecture Diagram Generator 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 Architecture Diagram Generator use?

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

How many tokens does HTML Architecture Diagram Generator use?

About 642 tokens (SKILL.md is roughly 2.6k 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 Architecture Diagram Generator?

Skills that share tags, products or a category with HTML Architecture Diagram Generator: Mermaid Diagrams (jjmartres/opencode, 133 stars), Miro Code Review (miroapp/miro-ai, 160 stars), Map Architecture (azalio/map-framework, 156 stars) and Code Change Analysis Gate (telagod/code-abyss, 243 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Architecture Diagram Generator?

comet-ml (a GitHub organization) maintains it in comet-ml/opik, which has 22,468 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 9, 2026.

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