Skip to content

스킬 검색.../

Agent Skill Search Engine

검색

검색
카테고리
직업

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Diagram Generation | Skills Pool

스킬 파일

Diagram Generation

Generate self-contained HTML architecture diagrams. Use when creating visual diagrams for PRs, task plans, or architectural explanations.

comet-ml18,905 스타2026. 2. 24.

직업
카테고리: 디자인

스킬 내용

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 diagrams/opik-{TICKET_NUMBER}-diagram.html
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)

Request / Data Flow — how data moves through layers
Why This Approach — problem vs solution comparison

관련 스킬

빠른 설치

Diagram Generation

npx skillvault add comet-ml/comet-ml-opik-agents-skills-diagram-generation-skill-md

Skill 다운로드 저장소 열기

작성자: comet-ml
스타: 18,905
업데이트: 2026. 2. 24.
직업

이 페이지의 내용

01When to Use 02

Files Changed by Layer — grid of affected files grouped by component

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

Output

03How to Generate

04Required Sections (pick what applies)

05Section Selection

06Reference Files

07Common Gotchas

소프트웨어 개발자

Frontend Slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Frontend Slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Frontend Slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Ascii Art

Generate ASCII art using pyfiglet (571 fonts), cowsay, boxes, toilet, image-to-ascii, remote APIs (asciified, ascii.co.uk), and LLM fallback. No API keys required.

NousResearch98.6k

Popular Web Designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

NousResearch98.6k

Meme Generation

Generate real meme images by picking a template and overlaying text with Pillow. Produces actual .png meme files.

NousResearch98.6k

소프트웨어 개발자