Agent skill

Smallest-Visual Diagrams

by Yeachan-Heo in Yeachan-Heo/oh-my-claudecode

Picks the smallest visual that carries structure when prose alone would not: pseudocode, call tree, component or file tree, Mermaid or diff, and skips it when prose is enough.

MITAuto-check passedDevelopment

Install Smallest-Visual Diagrams

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a claude-code

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

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode 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/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/diagram .claude/skills/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/

Paste into Claude Code

Install the "diagram" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram into .claude/skills/diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode diagram --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/diagram .agents/skills/diagram && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "diagram" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram into .agents/skills/diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode diagram --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/diagram .cursor/skills/diagram && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "diagram" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram into .cursor/skills/diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/Yeachan-Heo/oh-my-claudecode.git --path skills/diagram

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode diagram --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/diagram .gemini/skills/diagram && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "diagram" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram into .gemini/skills/diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode diagram

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/diagram .github/skills/diagram && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "diagram" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram into .github/skills/diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode diagram --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/diagram .opencode/skills/diagram && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "diagram" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/diagram into .opencode/skills/diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: diagram
GitHub stars: 40k
Token cost: ~885 tokens
SKILL.md length: 306 words
Files: 1
Skills in repo: 47
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Picks the smallest visual that carries structure when prose alone would not: pseudocode, call tree, component or file tree, Mermaid or diff, and skips it when prose is enough.

Explaining control flow or call depth that prose makes hard to follow
SKILL.md covers The vocabulary, When text runs out and Discipline
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Showing which module or file owns which responsibility

What it does

Diagrams are treated as load-bearing, not decoration. The agent reaches for one only when the reader would otherwise have to hold a whole shape in their head, and it picks one view, two at most. Everything renders in the conversation as text blocks or Mermaid, and at most one artifact file is ever written.

The vocabulary has pseudocode for the branching shape of a decision, a call tree for runtime control flow where depth shows who owns it, a component tree for UI or module structure, a file tree for where responsibility lives, Mermaid for interactions, dataflow or state transitions, and a diff for the shape of a change, matched to the topic: component, file layout, control flow or state machine. When eliding code would hide who owns what or the order things run in, the complete block is shown once so it can be copied.

When your agent uses it

Explaining control flow or call depth that prose makes hard to follow
Showing which module or file owns which responsibility
Illustrating the shape of a change as a diff
Drawing a sequence or state diagram in Mermaid

Example prompts

“Show the call tree for acquireStateFileLockSync and mark where the lock can be refused.”
“Draw a Mermaid sequence diagram of how the CLI and the hook interact.”
“Show the file layout change from state-tools.ts to a state-tools folder as a diff.”

What it can do on your machine

Read from SKILL.md and the folder at commit 454bae0. 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 (its code samples are diff, typescript and mermaid).
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

Smallest-Visual Diagrams loads about 885 tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 306 words of instructions outside code blocks.

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

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 Yeachan-Heo/oh-my-claudecode at commit 454bae0, republished under its MIT licence (© Yeachan-Heo). 306 words, ~885 tokens.

Download SKILL.mdSave it as .claude/skills/diagram/SKILL.md (or your agent's skills folder).

name: diagram
description: Use the smallest visual when prose must carry structure—control flow, call depth, module ownership, or change shape: pseudocode, call tree, component/file tree, Mermaid diagram, or diff. Skip it when prose already answers the question.
level: 2

Diagrams are load-bearing, not decoration. Reach for one only when prose forces the reader to hold a whole shape in their head at once — then pick the smallest view that lets them see the shape instead of reconstructing it from sentences. Everything here renders in the conversation as text blocks or Mermaid; at most one artifact file is ever written.

The vocabulary

Pick one view; two at most. More is noise.

Pseudocode — logic without language noise. Reduces a decision to its branching shape:

text

on(request)
  if state file locked by another writer
    queue and return pending
  acquire lock
  write
  release

Call tree — runtime control flow. Depth shows who owns the flow; annotate where the interesting edge is:

text

acquireStateFileLockSync()
  resolveLockPath()
  openExclusive()
  writePid()

Component tree — UI or module structure, with the boundaries that matter annotated inline:

tsx

<SettingsPage> (src/routes/settings)
  <SessionList> (owns its fetches)
  <DangerZone>
    <ConfirmButton> (disabled until typed confirmation)

File tree — where responsibility lives; keep it shallow, one annotation per directory:

text

src/
├── hooks/        # hook registry + types
├── tools/        # MCP tool handlers
└── workflow/     # registry + projections

Mermaid — interaction between parties, dataflow, or state transitions:

mermaid

sequenceDiagram
    participant CLI
    participant Hook
    participant State
    CLI->>Hook: PreToolUse
    Hook->>State: read mode
    Hook-->>CLI: allow / deny + facts

Diff — the shape of a change when the surrounding structure already exists. Match the diff to the topic:

a component change:

diff

 <SettingsPage>
   <SessionList />
   <DangerZone>
+    <ConfirmButton />
   </DangerZone>

a file-layout change:

diff

 src/tools/
-└── state-tools.ts
+└── state-tools/
+   ├── handlers.ts
+   └── schema.ts

a control-flow change:

diff

 commit()
   stage()
     hashBlobs()
+  writeObject()
   updateRef()
+    acquireStateFileLock()

a state-machine change:

diff

 on(request)
-  write immediately
+  if locked
+    queue and return pending
+  acquire lock
+  write
+  release

The whole block — when elision would hide who owns what or the order things run in, show the complete unit once, copyable:

export function isRegistryEnabled(): boolean {
  const flag = process.env.OMC_WORKFLOW_REGISTRY;
  return flag !== '0' && flag !== 'false';
}

When text runs out

A UI layout, a before/after comparison, or a concept too dense for Mermaid: write one focused HTML file — a diagram, an infographic, or a few slides — styled after the product's own colors, type, and components, filled with real labels and data, working on desktop and mobile. Open it with the platform opener (start on Windows, open on macOS, xdg-open on Linux) and stop there: one artifact, not a gallery.

Discipline

Place each visual directly beside the two or three sentences it supports.
Carry only the calls, files, props, states, and boundaries that answer the current question — every extra node is a decoding tax on the reader.
If the honest answer fits in one sentence, write the sentence.

Files

Just SKILL.md in skills/diagram of Yeachan-Heo/oh-my-claudecode.

Open the folder on GitHubat commit 454bae0

Compare with similar skills

Smallest-Visual Diagrams 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.

Smallest-Visual Diagrams compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Smallest-Visual Diagrams this skillYeachan-Heo/oh-my-claudecode	40k	—	~885	Automated safety check: Pass	MIT	3 days ago
Diagram Designcathrynlavery/diagram-design	49k	1 repos	~7.6k	Automated safety check: Pass	MIT	today
Draw.io Diagram StudioAgents365-ai/drawio-skill	10k	—	~2.4k	Automated safety check: Notes	MIT	today
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills	1.5k	—	~2k	Automated safety check: Pass	MIT	1 mo ago
Mermaid Diagramsjjmartres/opencode	133	6 repos	~1.9k	Automated safety check: Pass	MIT	5 mo ago
Eli5coldteadotai/pr-lens	1.9k	—	~2.3k	Automated safety check: Pass	MIT	6 days ago

Similar skills

Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
49k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
10k GitHub stars~2.4k tokensUpdated today
DevelopmentAuto-check: notes
Pretty Mermaid Renderer
imxv/Pretty-mermaid-skills
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
1.5k GitHub stars~2k tokensUpdated 1 mo ago
DevelopmentAuto-check passed
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
Eli5
coldteadotai/pr-lens
WHAT: Explains a codebase, a folder, a feature, a command or a pull request to someone who knows nothing about it, as a PR Lens canvas whose walkthrough builds the picture one part at a time.
1.9k GitHub stars~2.3k tokensUpdated 6 days ago
DevelopmentAuto-check passed
C4 Architecture Diagrams
lexler/skill-factory
Creates C4 model diagrams at every zoom level, from system landscape to code, in ASCII, Mermaid or Structurizr, for designing or documenting software architecture.
239 GitHub stars~2.3k tokensUpdated yesterday
DevelopmentAuto-check passed

Questions about Smallest-Visual Diagrams

What does Smallest-Visual Diagrams do?

Picks the smallest visual that carries structure when prose alone would not: pseudocode, call tree, component or file tree, Mermaid or diff, and skips it when prose is enough. Diagrams are treated as load-bearing, not decoration. The agent reaches for one only when the reader would otherwise have to hold a whole shape in their head, and it picks one view, two at most.

When should I use Smallest-Visual Diagrams?

Smallest-Visual Diagrams fits situations like: explaining control flow or call depth that prose makes hard to follow; showing which module or file owns which responsibility; illustrating the shape of a change as a diff; drawing a sequence or state diagram in Mermaid.

How do I install Smallest-Visual Diagrams in Claude Code?

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

How do I install Smallest-Visual Diagrams in Codex?

Run `npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -a codex`. Or copy the skill folder (skills/diagram in Yeachan-Heo/oh-my-claudecode) into .agents/skills/diagram in your project. Codex loads it when a task matches its description.

Can I use Smallest-Visual Diagrams 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 Yeachan-Heo/oh-my-claudecode --skill 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/diagram, .gemini/skills/diagram, .github/skills/diagram and .opencode/skills/diagram in your project.

What does Smallest-Visual Diagrams need to run?

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

Does Smallest-Visual Diagrams 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 Smallest-Visual Diagrams 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 Smallest-Visual Diagrams use?

Smallest-Visual Diagrams 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 Smallest-Visual Diagrams use?

About 885 tokens (SKILL.md is roughly 3.5k 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 Smallest-Visual Diagrams?

Skills that share tags, products or a category with Smallest-Visual Diagrams: Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars), Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars) and Mermaid Diagrams (jjmartres/opencode, 133 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Smallest-Visual Diagrams?

Yeachan-Heo (a GitHub user) maintains it in Yeachan-Heo/oh-my-claudecode, which has 39,751 GitHub stars. The repository holds 47 skills in this directory. The repository was last updated on October 8, 2026.

Source: Yeachan-Heo/oh-my-claudecode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Smallest-Visual Diagrams

Install Smallest-Visual Diagrams

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

The vocabulary

When text runs out

Discipline

Files

Compare with similar skills

Similar skills

Diagram Design

Draw.io Diagram Studio

Pretty Mermaid Renderer

Mermaid Diagrams

Eli5

C4 Architecture Diagrams

More from Yeachan-Heo/oh-my-claudecode

Ask Advisor Routing

Ask Navigator

Self-Improve Evolutionary Loop

Autopilot

OMC Mode Cancellation

Hierarchical AGENTS.md Generator

Questions about Smallest-Visual Diagrams

Install Smallest-Visual Diagrams

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

The vocabulary

When text runs out

Discipline

Files

Compare with similar skills

Similar skills

More from Yeachan-Heo/oh-my-claudecode

Related

Questions about Smallest-Visual Diagrams